HugoにGoogle Analyticsのトラッキングコードを挿入する(googleAnalytics)

HugoにGoogle Analyticsのトラッキングコードを挿入する方法について説明します。

追跡IDを構成ファイルに設定する

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

Hugoは構成ファイルのパラメータとして、あらかじめgoogleAnalyticsパラメータを提供している。次のようにGoogle Analyticsサイトで発行した追跡IDを設定する。
config.toml

baseURL = "https://www.devkuam.com/"
languageCode = "ko-kr"
title = "私のブログ"
theme = "devkuma"

googleAnalytics = "G-AB1CD2EFGH" # サンプルコード

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

トラッキングコード(JS)を自動挿入するよう設定する

Google Analyticsを使用するには、各ページのhead要素の前に次のような追跡コードを含める必要がある。

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

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

ここではHugoの部分テンプレートを使用し、上記のHTMLコードを各ページに含める。G-AB1CD2EFGHのようなトラッキング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は、Google Analyticsの追跡コードを含むInternal Templateを内蔵テンプレートとして提供している。

任意のテンプレートファイル内で次のように書くだけで、簡単に追跡コードを挿入できる。

{{ template "_internal/google_analytics.html" . }}  <!-- 同期版 -->
{{ template "_internal/google_analytics_async.html" . }}  <!-- 非同期版 -->

ただし、内蔵テンプレートはローカルサーバー動作時のコード出力抑制には対応しておらず、Googleの変更にも柔軟に対応できない可能性があるため、できれば部分テンプレートを作成しておく方がよい。