背景

HugoTohaというテーマで作成したHTMLの中で、Google analyticsを設定したかったので試してみた。

何が問題なのか?

Hugoの最新バージョンはまだGoogle AnalyticsGtagに対応していない。 そこで、今回Tohaを用いてGtagどのように実装できるか試してみた。

やったこと

  • 早速ですが結論を記載する

/themes/toha/layouts/partials/scripts.html に下記の内容を追記した。

<!-- Global site tag (gtag.js) - Google Analytics -->

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

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

{{ end }}
  • {{ if not .Site.IsServer }}hugo serverで起動しているときはjavascriptが動作しないようにしている。本番環境だけで動作するようにしている。
  • その他はGtagを利用している