Zenn
🎉

GitHub PagesでMinimaテンプレートを用いてGoogle Analytics GA4を設定する方法

2025/02/06に公開
GitHub Pages
gykyll
minima
tech

この記事では、GitHub Pagesで運用しているJekyllサイトにおいて、MinimaテーマのGoogle Analytics設定をGA4に対応させるための方法を紹介します。現状、Minima 2.5.1に含まれる_includes/google-analytics.htmlは、従来のUniversal Analytics用のコードとなっており、GA4の計測コードにはなっていません。

対象環境

  • Jekyll: 3.10.0
  • GitHub Pages: 232
  • Minima: 2.5.1

なお、GitHub Pagesで利用可能な最新のバージョンについては、以下の公式ページを参照してください。

GitHub Pages Versions

現状の問題点

Minima 2.5.1に同梱されている_includes/google-analytics.htmlのコードは以下のようになっています。
このコードは、Universal Analytics用の計測スクリプトであり、GA4に対応していません。

<script>
if(!(window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1")) {
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', '{{ site.google_analytics }}', 'auto');
  ga('send', 'pageview');
}
</script>

このままでは、GA4に必要なgtag.jsを利用した最新の計測方法に対応していません。

PRによる修正内容

https://github.com/jekyll/minima/pull/835/files

GitHub上では、MinimaテーマのGoogle Analytics対応をGA4に対応させるためのPRが提出されています。以下は、そのPRで提案された修正内容の例です。

<!-- 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>

このコードでは、非同期でgtag.jsを読み込み、GA4向けの初期化および設定が行われています。公式がこの修正版のタグを含むバージョンをリリースするまでは、手動でこの修正を反映させる必要があります。

手動での修正手順

  1. 該当ファイルの編集
    プロジェクトルートにある_includes/google-analytics.htmlを開き、上記のUniversal Analytics用コードを、PRに記載されているGA4対応コードに置き換えます。

  2. 環境変数の設定
    GitHub Pages上でJekyllを実行する際に、公式の手順に従い、対象リポジトリの環境変数JEKYLL_ENVをproductionに設定します。
    ※これにより、Minimaテーマ側の条件分岐が正しく動作し、Google Analyticsのコードが埋め込まれます。

  3. _config.ymlの設定
    サイトのルートにある_config.ymlに、以下のようにGoogle Analytics用のトラッキングIDを追加します。
    ※GA4の場合、IDは「G-XXXXXXXXXXXXX」の形式となります。

    google_analytics: G-XXXXXXXXXXXXX

  4. ビルド・デプロイの確認
    変更をGitHubにプッシュ後、GitHub Pagesによるビルドが成功しているか確認し、ブラウザのデベロッパーツールなどで新しいgtag.jsの読み込み状況や計測が行われていることを検証します。

まとめ

MinimaテーマのGoogle Analytics設定は、現時点ではUniversal Analytics用となっていますが、GitHub上で公開されているPRの内容を手動で反映させることで、GA4に対応した計測が可能になります。
また、環境変数JEKYLL_ENVの設定や_config.ymlへのトラッキングIDの記述も忘れずに行うことで、正しく動作するはずです。
今後、公式リリースでGA4対応が進む可能性もありますが、現状は上記の手順に従って対応するのが最適な方法となります。

以上が、GitHub PagesでMinimaテーマを使い、GA4を設定するための手順となります。皆さんのサイト運営にお役立ていただければ幸いです。

Discussion