はじめに #
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を空白とする。
googleAnalytics = ""
Partial Templatesにトラッキングコードを貼付 #
次に、Partial Templatesにトラッキングコードを貼り付ける。Partial TemplatesとはHTMLファイルの断片であり、Hugoをビルドするときに、HTMLファイル内にコピーされる。
まず、以下のファイルを作成する。
root/layouts/partials/google/analytics.html
このファイルにGAで取得したトラッキングコードを貼り付ける。
<!-- 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
このファイルに以下を記述する。
<!-- Analytics -->
{{ if not .Site.IsServer }}
{{ partial "google/analytics" . }}
{{ end }}
このファイルでは、google/analytics.htmlを呼ぶように記載している。
また、if not .Site.IsServerと記述することで、Hugoをローカルで実行したとき（すなわち、hugo serverコマンドを実行したとき）には、トラッキングコードをHTMLに出力せず、hugoコマンドでHTMLファイルの実体を生成したときのみ出力するようになっている。
以上で、最新のGAのトラッキングコードをHugoサイトに埋め込めるようになった。
