<h2 id="%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h2>
<code>index.md</code> や <code>README.md</code> のみで公開されているような、最低限のファイルしか無い GitHub Pages で、引き続きテーマやレイアウトなどはなるべく設定せずに Google Analytics を設定したい。
<h3 id="conclusion">
<a class="header-anchor-link" href="#conclusion" aria-hidden="true"></a> Conclusion</h3>
<ol>
<li>
<code>./_includes/head-custom-google-analytics.html</code> を作成する</li>
<li>そこに Google Analytics で提示されたコードを貼り付ける</li>
<li>必要に応じて ID を <code>_config.yml</code> に記載、そこを参照するなどの修正を行う</li>
</ol>
<h2 id="%E6%9C%AA%E8%A8%AD%E5%AE%9A%E6%99%82%E3%81%AB%E9%81%A9%E7%94%A8%E3%81%95%E3%82%8C%E3%82%8B%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E6%9C%AA%E8%A8%AD%E5%AE%9A%E6%99%82%E3%81%AB%E9%81%A9%E7%94%A8%E3%81%95%E3%82%8C%E3%82%8B%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 未設定時に適用されるテーマの確認</h2>
未設定とはいえ何かしらのテーマは適用されているので、まずはそれを確認してみます。
<iframe id="zenn-embedded__6de477478c953" src="https://embed.zenn.studio/card#zenn-embedded__6de477478c953" data-content="https%3A%2F%2Fgithub.com%2Fpages-themes%2Fprimer" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/pages-themes/primer" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/pages-themes/primer</a>
なぜか以下の Supported themes の一覧には載っていないので、探すのが少し大変でした。
<iframe id="zenn-embedded__2cc63f83686e3" src="https://embed.zenn.studio/card#zenn-embedded__2cc63f83686e3" data-content="https%3A%2F%2Fpages.github.com%2Fthemes%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://pages.github.com/themes/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://pages.github.com/themes/</a>
<h2 id="%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%A4%89%E6%95%B0%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%A4%89%E6%95%B0%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> オプションの変数設定</h2>
<code>README.md</code> を読み進めると以下の記述があります。
<a href="https://github.com/pages-themes/primer#configuration-variables" target="_blank" rel="nofollow noopener noreferrer">https://github.com/pages-themes/primer#configuration-variables</a>
<blockquote>
Additionally, you may choose to set the following optional variables:
</blockquote>
<div class="code-block-container"><pre class="language-yml"><code class="language-yml">show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a download URL]
google_analytics: [Your Google Analytics tracking ID]
</code></pre></div>ここで <code>[Your Google Analytics tracking ID]</code> とあります。つまり <code>_config.yml</code> の <code>google_analytics</code> に ID を設定すれば良いということになります。
この <code>google_analytics</code> の値は以下の <code>_includes/head-custom-google-analytics.html</code> にて参照され、設定されていれば結果としてサイトの <code>&lt;head&gt;</code> タグ内に Google Analytics 用のコードなどが記載されることとなります。
<iframe id="zenn-embedded__882f05921adb9" src="https://embed.zenn.studio/github#zenn-embedded__882f05921adb9" data-content="https%3A%2F%2Fgithub.com%2Fpages-themes%2Fprimer%2Fblob%2Fmaster%2F_includes%2Fhead-custom-google-analytics.html" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/pages-themes/primer/blob/master/_includes/head-custom-google-analytics.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/pages-themes/primer/blob/master/_includes/head-custom-google-analytics.html</a>
しかしどうやら Google Analytics の設定の仕方が古いように見える。次はその対応を確認していきます。
<h2 id="customizing-google-analytics-code">
<a class="header-anchor-link" href="#customizing-google-analytics-code" aria-hidden="true"></a> Customizing Google Analytics code</h2>
<code>README.md</code> を更に読みすすめると以下の記述がみつかります。
<a href="https://github.com/pages-themes/primer#customizing-google-analytics-code" target="_blank" rel="nofollow noopener noreferrer">https://github.com/pages-themes/primer#customizing-google-analytics-code</a>
<blockquote>
Customizing Google Analytics code 
Google has released several iterations to their Google Analytics code over the years since this theme was first created. If you would like to take advantage of the latest code, paste it into _includes/head-custom-google-analytics.html in your Jekyll site.
</blockquote>
日本語訳を以下に。
<blockquote>
Googleは、このテーマが最初に作成されて以来、長年にわたって彼らの Google Analytics のコードにいくつかのイテレーションをリリースしています。あなたが最新のコードを利用したい場合は、あなたの Jekyll サイト内の _includes/head-custom-google-analytics.html に貼り付けます。
</blockquote>
というわけで、まずは自分のリポジトリに <code>./_includes/head-custom-google-analytics.html</code> を作成します。
続いて <code>{% if site.google_analytics %}</code> と <code>{% endif %}</code> の間に Google Analytics で提示されたコードを貼り付け、以下のように記述します。
<div class="code-block-container">
<div class="code-block-filename-container">./_includes/head-custom-google-analytics.html</div>
<pre class="language-html"><code class="language-html">{% if site.google_analytics %}
 &lt;!-- Google tag (gtag.js) --&gt;
 &lt;script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"&gt;&lt;/script&gt;
 &lt;script&gt;
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', '{{ site.google_analytics }}');
 &lt;/script&gt;
{% endif %}
</code></pre>
</div><aside class="msg message">!<div class="msg-content">
もともと ID が記載されていた箇所も <code>{{ site.google_analytics }}</code> に変更しています。
</div></aside>
次にに <code>./_config.yml</code> が無ければ作成し、<code>google_analytics</code> の値を設定します。設定する ID が <code>G-XXXXXXXXXX</code> であれば以下のようになります。
<div class="code-block-container">
<div class="code-block-filename-container">./_config.yml</div>
<pre class="language-yml"><code class="language-yml">google_analytics: G-XXXXXXXXXX
</code></pre>
</div><h2 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h2>
コミットしてデプロイし、以下のように <code>&lt;head&gt;</code> タグ内に記載があることを確認して完了です。
<img src="https://storage.googleapis.com/zenn-user-upload/f3c54f8dc787-20230214.png" alt loading="lazy" class="md-img">

テーマ未設定の GitHub Pages に Google Analytics を設定する

未設定時に適用されるテーマの確認

Discussion