HugoでGoogle Analytics 4を利用する

はじめに

様々なサイトに導入されているGoogle Analyticsですが、2020年より新たにGoogle Analytics 4(以下GA4)が、導入されました。しかしHugoでは、標準ではまだ対応していません。(これを書いているときの最新バージョンは0.80です)しかし、HugoではGA4を簡単に利用することができます。

GA4を導入する

GoogleAnalytics にアクセスし、GA4のIDを取得します。その方法はここでは省略します。GA4のIDはG-xxxxxxxxxxのようにGから始まります。UAから始まっている場合は、従来のIDです。
IDが取得出来たら、Hugoのフォルダtheme/layoutの適当なところに新規HTMLファイルを作成し、以下のように追記します。

analytics-gtag.html

1<!-- Global site tag (gtag.js) - Google Analytics 4-->
2<script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.GoogleAnalytics }}"></script>
3<script>
4    window.dataLayer = window.dataLayer || [];
5    function gtag() { dataLayer.push(arguments); }
6    gtag('js', new Date());
7
8    gtag('config', '{{ .Site.GoogleAnalytics }}');
9</script>

次に、configファイルに移動し、GoogleAnalyticsのIDを設定します。ymlの場合は、以下のようになります。

1GoogleAnalytics: G-xxxxxxxx

最後にこれらの設定を読み込みます。theme/layouts/partials/head.htmlのファイルの一番下のほうにある外部ファイルの読み込みを修正します。google_analytics_asyncは従来のgoogle analyticsなので消します。逆に、先ほど作成したファイルのパスを下のように追記します。

1～省略～
2{{- template "_internal/google_analytics_async.html" . }} <!--Delete-->
3{{- template "{path to file}/analytics-gtag.html" . }} <!--Add GA4-->
4{{- template "_internal/google_news.html" . }}
5{{- template "partials/templates/opengraph.html" . }}
6{{- template "partials/templates/twitter_cards.html" . }}
7{{- template "partials/templates/schema_json.html" . }}
8～省略～

以上で完了です。
適当なページを作り、アクセスした状態で、Google Analyticsのリアルタイムを確認して下さい。ユーザーが確認できれば、成功です。

はじめに#

GA4を導入する#

はじめに

GA4を導入する