g00ceyの技術ブログ

Google Analytics4に切り替えてくれって表示されていたので、切り替えを行いました。

結論

Qiitaの記事Hugoで記事内に画像を貼り付ける方法 - Qiitaも参照しました。
このブログに関してはHugo Theme Bootstrap4 Blog | Hugo Themesを使用してるので、それに合うように修正を行いました。

方針・前提条件

• Hugo Theme Bootstrap4 Blog | Hugo Themesをテーマとして使用している。
• 旧Analyticsのjsに関しては読み込ませないようにする。

環境

• nginx
• HUGO 0.76.1

対応内容

下記を作成
layouts/partials/analytics.html

{{ if not .Site.IsServer }}
{{ with .Site.GoogleAnalytics }}
<!-- Global site tag (gtag.js) - Google Analytics -->
<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 }}

下記をthemesから持ってきて修正
layouts/partials/head-custom.html

{{- partial "analytics" . -}}

そして、旧Analyticsのjsを出力している個所を除去するため、themesからコピー後、下記の項目を除去 layouts/_defaults/baseof.html

 {{ template "_internal/google_analytics_async.html" . }}

補足

なお、GoogleAnalyticsのIDについては、config.tomlの「googleAnalytics」から取得します。
Internal Templates | Hugo

最後に

baseof.htmlからgoogle_analytics_asyncを除去するのは若干悩ましいです。
というのも、これについては、HUGOがgoogle analytics 4に対応した場合は、こちらを有効にするべきだろうし。
悩ましいですが、変にjs取ってくれるとせっかく高速なページであるのにもかかわらず遅くなるので、記述についは除去しました。