Hugo で Google アナリティクス用のトラッキングコードを埋め込む (googleAnalytics)

2023-05-28

Google Analytics を使用すると、Web サイトのアクセス情報を多角的に分析できるようになります。ここでは、Hugo で作成する Web サイトに、簡単に Google Analytics 用のコードを埋め込めるようにしてみます。

☝️ Google Analytics 4 (GA4) への移行

Google は従来 Google Analytics (Universal Analytics) を提供していましたが、2023 年 7 月以降は、最新バージョン Google Analytics 4 (GA4) しか使用できなくなります。ただし、乗り換えは簡単で、設定するトラッキング ID を GA4 用のものに変更するだけです。 Analytics ID の先頭部分を見ると、どちらのバージョンを使用しているかが分かります。

（旧）Universal Analytics の ID … UA-12345678-1
（新）Google Analytcs 4 (GA4) の ID … G-12345ABCDE

トラッキング ID をコンフィグファイルで設定する

まずは、Google Analytics の管理画面から、「プロパティの追加」を実行し、分析したい Web サイトのアドレスを追加しておきます（Google Analytics のアカウントを持っていない場合は、先にアカウントから作成しておく必要があります）。そのとき発行されるトラッキング ID（G-12345ABCDE のような ID）が、その Web サイトへのアクセスを判別するための識別情報となります。この ID は、Web サイトごとに別のものを使用するので、Hugo のコンフィグファイルで設定するのがよいでしょう。

Hugo には、コンフィグファイル用のパラメータとして、あらかじめ googleAnalytics というパラメータが用意されています。下記のような感じで、Google Analytics のサイトで発行したトラッキング ID を設定しましょう。

config.toml

baseURL = "https://example.com/"
languageCode = "ja-jp"
title = "まく日記"
theme = "maku"

googleAnalytics = "G-12345ABCDE"

上記のように設定すると、テンプレートファイルの中から、.Site.GoogleAnalytics でトラッキング ID を参照できるようになります。

トラッキングコード (JS) を自動で埋め込むようにする

Google Analytics を有効にするには、各ページの head 要素の先頭に、次のような トラッキングコード を埋め込む必要があります（参考: gtag.js を使用してアナリティクスのトラッキングを設定する）。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-12345ABCDE"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-12345ABCDE');
</script>

ここでは、Hugo のパーシャルテンプレートを使い、上記の HTML コードを各ページに埋め込むようにしましょう。 G-12345ABCDE のようなトラッキング ID を指定する部分は、コンフィグファイルの googleAnalytics パラメータで指定した値で置換するようにします。

layouts/partials/analytics.html

{{ if not .Site.IsServer }}
{{ with .Site.GoogleAnalytics }}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{ . }}');
</script>
{{ end }}
{{ end }}

☝️ ワンポイント上記テンプレートの 1、2 行目では、ローカルな Hugo サーバでテストしている場合や、googleAnalytics が設定されていない場合に、トラッキングコードを出力しないように制御しています。

作成したパーシャルテンプレートは、下記のようにテンプレートファイルからインクルードします（ここでは、ベーステンプレート (baseof) からインクルードしています）。

layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="ja">
<head>
  {{- partial "analytics" . -}}
  <meta charset="UTF-8">
  ...省略...
</head>
<body>
  ...省略...
</body>
</html>

これで、すべてのページに Google Analytics のトラッキングコードが埋め込まれるようになります。

（おまけ）Hugo 組み込みのテンプレート

実は、Hugo は組み込みの Internal Template として、Google Analytics のトラッキングコードを埋め込むためのテンプレートを用意しています。任意のテンプレートファイルの中で、

{{ template "_internal/google_analytics.html" . }}  <!-- 同期バージョン -->
{{ template "_internal/google_analytics_async.html" . }}  <!-- 非同期バージョン -->

のように記述するだけで、簡単にトラッキングコードを埋め込むことができます。ただし、組み込みのテンプレートは、ローカルサーバー動作時のコード出力抑制には対応していませんし、Google の変更に柔軟に対応することもできないので、できればパーシャルテンプレートは自作してしまった方がよいでしょう。

2023-05-28