HugoのGoogle AnalyticsをGA4対応

Migrating Google Analytics to GA4

 Posted on March 27, 2023
* 本ページはプロモーションが含まれています

Hugoで構築しているサイトをGA4へ移行 

私の環境では、BeautifulhugoとMainroadのテーマを利用しているので、これに限ったカスタマイズとなります
また、GoogleAnalyticsのGA4のコードは取得済みを前提としているので、GoogleAnalyticsの説明は割愛します

Beautifulhugo 

head.htmlをrootフォルダへコピーし修正する 

$ pwd
/hugo

$ cp themes/beautifulhugo/layouts/partials/head.html layouts/partials/.

head.html (変更点のみ) 

-    {{ template "_internal/google_analytics_async.html" . }}
+    {{- partial "analytics" . -}}

/layouts/partials/analytics.htmlを下記の内容で作成 

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

config.tomlにGA4コード記入 (変更点のみ) 

googleAnalytics = "G-XXXXXXXXXX"

Mainroad 

執筆時のmainroadのテーマでは、analyticsの読み込みはlayout/_default/baseof.htmlで行われ、下記のコードを見るとGA4に対応しているように思える

{{- if not .Site.IsServer }}
		{{- if hasPrefix .Site.GoogleAnalytics "G-" }}
		{{ template "_internal/google_analytics.html" . }}
		{{- else }}
		{{ template "_internal/google_analytics_async.html" . }}
		{{- end }}
	{{- end }}

しかし、なぜかGA4の設定をしてもデータが受信できなかった

上記のbeautifulhugoとほぼ同様の作業だが、違うのはanalyticsを読み込むファイルがhead.htmlがbaseof.htmlになっているだけ

baseof.htmlのGoogleタグ内を修正 

{{- if not .Site.IsServer }}
-		{{- if hasPrefix .Site.GoogleAnalytics "G-" }}
-		{{ template "_internal/google_analytics.html" . }}
-		{{- else }}
-		{{ template "_internal/google_analytics_async.html" . }}
-		{{- end }}
+	{{- partial "analytics" . -}}
 	{{- end }}

config.tomlにGA4コード記入 (変更点のみ) 

googleAnalytics = "G-XXXXXXXXXX"

参考記事 

今回の移行作業に関しては、下記の記事を参考にさせていただきました

Google 

See also