Zenn
🛠️

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

2023/02/16に公開
Google Analytics
GitHub Pages
tech

概要

index.md や README.md のみで公開されているような、最低限のファイルしか無い GitHub Pages で、引き続きテーマやレイアウトなどはなるべく設定せずに Google Analytics を設定したい。

Conclusion

  1. ./_includes/head-custom-google-analytics.html を作成する
  2. そこに Google Analytics で提示されたコードを貼り付ける
  3. 必要に応じて ID を _config.yml に記載、そこを参照するなどの修正を行う

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

未設定とはいえ何かしらのテーマは適用されているので、まずはそれを確認してみます。

https://github.com/pages-themes/primer

なぜか以下の Supported themes の一覧には載っていないので、探すのが少し大変でした。

https://pages.github.com/themes/

オプションの変数設定

README.md を読み進めると以下の記述があります。

https://github.com/pages-themes/primer#configuration-variables

Additionally, you may choose to set the following optional variables:

show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a download URL]
google_analytics: [Your Google Analytics tracking ID]

ここで [Your Google Analytics tracking ID] とあります。つまり _config.yml の google_analytics に ID を設定すれば良いということになります。

この google_analytics の値は以下の _includes/head-custom-google-analytics.html にて参照され、設定されていれば結果としてサイトの <head> タグ内に Google Analytics 用のコードなどが記載されることとなります。

https://github.com/pages-themes/primer/blob/master/_includes/head-custom-google-analytics.html

しかしどうやら Google Analytics の設定の仕方が古いように見える。次はその対応を確認していきます。

Customizing Google Analytics code

README.md を更に読みすすめると以下の記述がみつかります。

https://github.com/pages-themes/primer#customizing-google-analytics-code

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.

日本語訳を以下に。

Googleは、このテーマが最初に作成されて以来、長年にわたって彼らの Google Analytics のコードにいくつかのイテレーションをリリースしています。あなたが最新のコードを利用したい場合は、あなたの Jekyll サイト内の _includes/head-custom-google-analytics.html に貼り付けます。

というわけで、まずは自分のリポジトリに ./_includes/head-custom-google-analytics.html を作成します。

続いて {% if site.google_analytics %} と {% endif %} の間に Google Analytics で提示されたコードを貼り付け、以下のように記述します。

./_includes/head-custom-google-analytics.html
{% if site.google_analytics %}
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', '{{ site.google_analytics }}');
  </script>
{% endif %}

次にに ./_config.yml が無ければ作成し、google_analytics の値を設定します。設定する ID が G-XXXXXXXXXX であれば以下のようになります。

./_config.yml
google_analytics: G-XXXXXXXXXX

動作確認

コミットしてデプロイし、以下のように <head> タグ内に記載があることを確認して完了です。

Discussion