Hugoサイトに最新版のGoogle Analyticsのタグを埋め込む

※記事内に商品プロモーションを含むことがあります。

はじめに

Hugoで生成するサイトでアクセス数を測定するためには、Google Analytics (以下GAとする) などの外部サービスを利用する必要がある。このサイもGAを利用している。

サイトに埋め込むGAは外部のJavaScriptファイルを呼ぶようになっており、2021年1月現在の最新のコードではgtag.jsを呼ぶ。一方、旧式のコードではanalytics.jsを呼ぶ。

問題は、最新のHugo Ver. 0.79.0/extended でもanalytics.jsにしか対応していないことである。現在、GAで発行可能なトラッキングコードはgtag.jsを利用するものだけであり、デフォルトのHugoではGAを使えないことになる（一部のHugoのテーマではgtag.jsに対応しているかもしれないが、このサイトで使用しているZZoテーマでは未対応である）。

この記事ではZZoテーマを対象として、gtag.jsを呼ぶトラッキングコードを貼り付け方法を示す。他のテーマでも参考にされたい。

トラッキングコードを追加する方法

以下の手順でトラッキングコードを追加する。

config.tomlからタグの設定を削除
Partial Templatesにトラッキングコードを貼付

config.tomlからタグの設定を削除

まず、以下にある設定ファイルにGAタグを設定していないことを確認する。
root/config/_default/config.toml
ここで、rootはHugoのサイトを作成したフォルダである。

設定している場合、旧式のanalytics.jsを呼ぶタグが自動的に生成されてしまうので、以下のようにgoogleAnalyticsを空白とする。

1

googleAnalytics = ""

Partial Templatesにトラッキングコードを貼付

次に、Partial Templatesにトラッキングコードを貼り付ける。Partial TemplatesとはHTMLファイルの断片であり、Hugoをビルドするときに、HTMLファイル内にコピーされる。

まず、以下のファイルを作成する。
root/layouts/partials/google/analytics.html

このファイルにGAで取得したトラッキングコードを貼り付ける。

1
2
3
4
5
6
7
8
9


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

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

G-TCXXXXXXXXはサイトによって異なる文字列になる。

次に、以下のファイルを作成する。
root/layouts/partials/head/custom-head.html

このファイルに以下を記述する。

1
2
3
4


<!-- Analytics -->
{{ if not .Site.IsServer }}
  {{ partial "google/analytics" . }}
{{ end }}

このファイルでは、google/analytics.htmlを呼ぶように記載している。
また、if not .Site.IsServerと記述することで、Hugoをローカルで実行したとき（すなわち、hugo serverコマンドを実行したとき）には、トラッキングコードをHTMLに出力せず、hugoコマンドでHTMLファイルの実体を生成したときのみ出力するようになっている。

以上で、最新のGAのトラッキングコードをHugoサイトに埋め込めるようになった。