GitHub Pages quarto

Quartoでpublishしたサイトにgoogle tag managerを埋め込む方法

GitHub Pages published by Quarto 1/N

公開日: 2024-07-13
更新日: 2024-07-13

  Table of Contents

この記事のスコープ

  • QuartoでpublishしたGitHub PagesにGoogle Tag Managerを埋め込む

▶  前提条件

  • quarto: create projectを用いてblog用レポジトリを作成
  • quarto publishを用いて，作成したレポジトリをGitHub Pagesとしてpublish済み
  • google analyticsでproperty設定済み
  • google tag managerでgtm発行済

Google Tag Manager設定実践編

▶  現在のレポジトリの状態

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.
├── about.qmd
├── .gitignore
├── img
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   └── OGG_logo.png
├── index.qmd
├── LICENSE
├── posts
│   ├── 2024-07-12-committed-on-a-wrong-branch
│   │   └── index.qmd
│   └── _metadata.yml
├── _quarto.yml
├── README.md
└── styles.css

quartoでpublishしたGitHub Pagesはデフォルトではgh-pagesブランチのposts以下がコンテンツとしてレンダリングされます．

▶  やりたいこと

  • 発行したgoogle tag manager htmlを各コンテンツページ個別設定ではなく，一括で設定したい

Google Tag Managerの設定条件

Tag ManagerでGTMを発行すると，

  1. ページの<head> の中で，可能な限り上部にこのコードを貼り付けてください：
1
2
3
4
5
6
7

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','hogehogehoge');</script>
<!-- End Google Tag Manager -->
  1. <body>タグ開始の直後に以下のコードを貼り付けてください：
1
2
3
4

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=Ghogehogehoge"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

というインストラクションが表示されます．なお，Google analyticsを適切に設定すると，Google Search Consoleのサイト認証が一瞬でできるという副次的効果も有ります．

Solution: _quarto.yml経由でGTMを参照する

Quartoでは, repository root直下に存在する _quarto.yml に以下のように設定をすると各コンテンツページで 自動的にgoogle tag managerを設定することができます．

1
2
3
4

format:
  html:
    include-in-header: gtm_code_head.html
    include-before-body: gtm_code_body.html
  • <head> sectionのなかで gtm_code_head.htmlを読み込む
  • <body> sectionのなかで gtm_code_body.htmlを読み込む

という設定になります．複数のhtml/jsファイルを読み込ませたい場合は

1
2
3
4
5
6

format:
  html:
    include-in-header: gtm_code_head.html
    include-before-body: 
        - gtm_code_body.html
        - toggle.js

のような設定になります．

Share Buttons
 Share on:
Feature Tags
Leave a Comment
(注意：GitHub Accountが必要となります）
CONTENTS