Gatsbyで作っているブログのGoogle AnalyticsをGA4に対応させる

コンテキスト

いままでのGoogle Analyticsの終了に伴いGoogle Analytics 4 (GA4)に移行するように，と去年から通知されていたので，重い腰を上げてこのブログで使っているGoogle AnalyticsをGA4に移行しました．

このブログはGatsbyを使っていて，gatsby-plugin-google-gtagというプラグインを使えば対応はできそうでしたが，このプラグインがNode v16に対応していなかったので，Nodeとライブラリのアップデートも行いました．

ちなみに，ブログのソースはGitHubのプライベートリポジトリで管理し，Netlifyでビルド＆デプロイしています．

Nodeとライブラリの最新化

Nodeのバージョン指定はpackage.jsonと.node-vesionで書いていたので，これをv18に変更しました．

package.json

-    "node": "16.x"
+    "node": "18.x"

.node-version

-v16
+v18

ライブラリはとりあえず全部アップデートして，ビルドや表示に問題がないか動作確認しました．ローカルのNodeバージョン管理はnodebrewを使っているので，nodebrewコマンドで切り替えています．

yarn upgrade-interactive --latest
nodebrew use v18
rm -rf node_modules
yarn
gatsby clean && gatsby build

Google Analyticsのプラグインを変更

今まで使っていたgatsby-plugin-google-analyticsはGA4には対応していないので， gatsby-plugin-google-gtagを代わりに使います．

yarn remove gatsby-plugin-google-analytics
yarn add gatsby-plugin-google-gtag

Gatsbyの設定ファイルで，新しいプラグインと新しいGA4用のGoogleタグIDに変更しました． gatsby-plugin-google-gtagの設定では，trackingIdではなくtrackingIdsである点に注意が必要です．

gatsby-config.js

-      resolve: `gatsby-plugin-google-analytics`,
+      resolve: `gatsby-plugin-google-gtag`,
       options: {
-        trackingId: 'UA-30311805-4',
+        trackingIds: ['G-F0L17HWQ2X'],

課題

これでGA4でデータが参照できるようになりましたが，2点課題が残りました．（雰囲気でGoogle Analyticsを使っているが故の課題・・・．）

Optimize ID

GoogleタグではOptimize IDというものがあるらしく，gatsby-plugin-google-gtagの設定にも含まれているのですが，何に使われるものなのかよく理解していないので，まだ設定を入れていません．

今までの収集データとの統合

新しくGA4で取得したデータは見られるようになったのですが，今まで収集したデータが別画面になっていて，これらをマージして見る方法がわかっていません．

コンテキスト

Nodeとライブラリの最新化

Google Analyticsのプラグインを変更

課題

Optimize ID

今までの収集データとの統合

refs