HugoにGoogleアナリティクスを導入する

HugoにGoogleアナリティクスを導入してみました。

測定IDを環境変数に設定したかったのでpartialを作成してHugoをカスタマイズすることにしました。

行った手順は以下になります。

  1. Googleアナリティクスでウェブサイトの設定を行う
  2. グローバル サイトタグ（gtag.js）をページに読み込むようにHugoをカスタマイズする

まず1.の手順は[GA4] アナリティクスで新しいウェブサイトまたはアプリのセットアップを行う - アナリティクス ヘルプを参照して行いました。

測定IDの確認

データストリームまで作成したら左下の歯車アイコンから管理を開いてデータストリーム一覧を表示、作成したデータストリームをクリックします。

step1

ウェブストリームの詳細に表示されている測定IDをこの後利用するのでメモしておきます。

step2

グローバル サイトタグを読み込むカスタマイズ

グローバル サイトタグ（gtag.js）を開いた部分に記載してあるHTMLを各ページに追加するように、これからHugoをカスタマイズしていきます。

step3

以下の内容でlayouts/partials/gtag.htmlを作成しました。

layouts/partials/gtag.html 
{{- with getenv "BLOG_G_TAGID" -}}
<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', '{{ . }}', { 'anonymize_ip': true });
</script>
{{- end -}}

このpartialは環境変数のBLOG_G_TAGIDに設定されている測定IDを参照してグローバル サイトタグを出力し、環境変数に設定がない場合は出力しません。

作成したgtag.htmlをhead内に読み込むように以下を追加します。

layouts/_default/baseof.html 
{{- partial "gtag" . -}}

自分の場合はbaseof.htmlにheadタグを記載しているのでそちらに追加しています。

またconfig.tomlのsecurity.funcsセクションのgetenvのホワイトリストにBLOG_ではじまる環境変数の読み取りを許可するように設定を追加します。

config.toml 
[security]
  [security.funcs]
    getenv = ['^HUGO_', '^BLOG_']
参考リンク

あとは「Google アナリティクス利用規約 – Google」にある通りGoogleアナリティクスを利用してアクセス解析を行っていることをプライバシーポリシーに追加します。