会社テックブログの Google Analytics 見てると「エンゲージメント-ページとスクリーン」などのいい感じのレポートあるなあと思って、自分のブログのレポート見るとそんなのない。もう GA4 という新しい Analytics がローンチされて、既存の UA-XXXXX のトラッキング ID を使用しているプロパティはそのうち使えなくなるというのを知りました。
はてなブログはまだ GA4 に正式対応してなかったので、設定の <head>要素にメタデータを追加 のところでこんなグローバルサイトタグを追加しました。
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); </script>
そしてつい先日、はてなブログが GA4 に対応したアナウンスがありました。
グローバルサイトタグのままでもいいのかもしれませんが、公式の設定の方がいいに違いないと思って早速設定。
旧トラッキング ID もまだ残してます。ブログはこれで移行完了。
kondoumh.com のホームページは、Hugo で作っています。
旧 GA は Hugo の config.toml で UA-XXX のトラッキング ID を設定するだけで簡単でした。移行してから一度も Hugo のバージョンアップをしておらずかなり古いバージョンを使っているのですが、この辺の issue を見ると最新版でも GA4 にはまだ対応していないっぽいです。
ただ自前でグローバルサイトタグを head に埋め込めばいけるはずということで、使ってるテーマ Ananke のテンプレートをいじりました。
layouts/partials/analytics.html にグローバルサイトタグのテンプレートを追加。config.toml から読み込んだ G-XXX の ID を展開するように設定。
{{ 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 では G-XXX の ID を指定します。
googleAnalytics = "G-XXXXXXXXXX"
Ananke は layouts/_default/baseof.html で _internal/google_analytics_async.html を呼び出していてこれが GA4 に対応していない模様。
hugo/google_analytics_async.html at master · gohugoio/hugo · GitHub
ということで、この呼び出しを追加した analytics.html に置き換えます。
- {{ template "_internal/google_analytics_async.html" . }} + {{- partial "analytics" . -}}
これで、サイトをビルド・デプロイするとヘッダーにグローバルサイトタグの JavaScript が埋め込まれました。
以上でブログとホームページの GA4 への移行作業が完了しました。
