Google Analytics 4 がJekyllサイトでエラーになる原因と解決方法

こんにちは、若手エンジニアのYUKIです。

この記事では、
「Google Analytics 4 がJekyllサイトでエラーになる原因と解決方法」について紹介します。

今回は以下のことを前提に説明していきます。

Github PagesでJekyllサイトを運用している
Jekyllテーマはデフォルトの状態 theme: minima
Google Analytics 4 を使用している
Google Tag Assistantを使用している

1. JekyllでGoogle Analyticsを設定する従来の方法

本来、JekyllサイトでGoogle Analyticsの計測IDを設定するのはとても簡単です。
Jekyllフォルダ直下にある_config.ymlに

google_analytics: UA-〇〇〇〇〇〇〇〇

というふうに計測IDを設定をしてbuildするだけで、サイトページのGoogle Analyticsが機能するようになります。

しかし、最新のGoogle Analytics 4の計測ID（G-で始まる文字列）をこの方法で設定しても、エラーになってしまいます。

※下記はGoogle Tag Assistantが検出したエラー

2. 正常に動作しない原因

Google Analytics Javascriptについて

Google Tag Assistantで以下のようなエラーが検出されました。

Invalid or missing web property ID

このエラーの詳細を確認したところ、以下のような説明が書かれていました。

The Google Analytics web property ID is not properly set within the Google Analytics JavaScript.
The web property ID is used to associate the Google Analytics request to a specific Analytics website profile.
Failing to properly set the Google Analytics web property ID will prevent pageviews from associating to your Analytics website profile.

これによると、サイトページの、Google Analyticsを埋め込んで送信するためのJavascriptに、 Google Analyticsの計測IDが正しく設定されていない。ということが書かれています。

下図がそのJavascript部分です。（サイトページの meta タグに記述されています）

Jekyllのデフォルトのテーマが生成するJavascript

色々と調べたところ、どうやらこのJavascript部分の記述が、Google Analytics 4に対応していないことが原因でした。

Jekyllのデフォルトのテーマ minima が自動で生成するJavascriptが、 Google Analytics 4に対応したJavascriptでなければ正常に動作しないみたいです。

そのため、_config.ymlでテーマをtheme: minimaと指定している限りはこの問題は解決できません。

※下記あたりが情報源です
・https://github.com/jekyll/minima/issues/561
・https://github.com/pages-themes/minimal/issues/88#issuecomment-784116273

3. 解決方法

以下は、Jekyllのデフォルトのテーマminimaを使用して自動でサイトを構築していた場合の解決方法です。

方法は簡単です。 _config.ymlにリモートリポジトリで開発が進んでいるテーマを指定するようにします。（Google Analytics 4に対応できるように開発側の方々がJavascriptを修正してくれています。）

【参考】

・リモートリポジトリに存在するminimaテーマのソース
　https://github.com/jekyll/minima

・Google Analytics 4に対応したJavascriptの該当ソース
　https://github.com/jekyll/minima/blob/master/_includes/google-analytics.html

手順

※_config.yml の修正

まずプラグインを追加

plugins:
  - jekyll-remote-theme

次にテーマを指定します

remote_theme: jekyll/minima

元の設定はコメントアウトか削除します

#theme: minima

Google Analytics 4の計測IDを指定します

google_analytics: G-〇〇〇〇〇〇〇〇

最後にbuildすれば、リモートリポジトリのminimaテーマをもとにサイトが構築されます。
※注意点としては、デフォルトで設定していたminimaテーマとはデザインや機能が少し異なる場合があります。

サイトページにアクセスして、Google Tag Assistantが正常であれば問題なく動いています。

ちなみに変更後のJavascriptは下記のようになっています。

今回の内容は以上となります。本記事が解決の手助けになれば幸いです。

目次

1. JekyllでGoogle Analyticsを設定する従来の方法

2. 正常に動作しない原因

Google Analytics Javascriptについて

Jekyllのデフォルトのテーマが生成するJavascript

3. 解決方法

手順