HUGO terassaテーマにGA4の設定をする手順

Google Analytics 、Google Tag Managerの設定

両のアカウントを作成し、Gタグを発行する。
手順は以下を参照。
　→ https://www.sakurasaku-labo.jp/blogs/google-analytics-4

HUGO terassaテーマに発行したGタグを設定する

①config.tomlのgoogleAnalyticsパラメータに、発行したGタグを記載する。

②layouts/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 }}

{{ if not .Site.IsServer }}
{{ with .Site.GoogleAnalytics }}
で、ローカルでHugoを立ち上げた時、GoogleAnalyticsが作成されていない時は、
HTMLにGoogle Analyticsのscriptを出力しない様に設定出来る。

③layouts/head.htmlを公式テーマから落としてきて、headタグ内に {{ partial "analytics" . }} を追記、
　analytics.htmlを全ページで読み込めるようにする。

以上でGA4の導入完了。