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"参考記事
今回の移行作業に関しては、下記の記事を参考にさせていただきました