📖

GatsbyでGoogle Analytics 4が動かなかった

3 min read

初学者の学習メモです。

インターン先のGatsby製LPでGoogle Tag Managerを使っていたが、GA4でのデータ収集がうまくできていなかったので修正した。

原因と対処法

  1. 古いGatsbyプラグインを使っていた
    → gatsby-plugin-google-analyticsではなく、gatsby-plugin-gtagを使おう
  2. GA3からGA4に移行するに当たり、Tracking IDの変更をしなくてはいけなかった
    → 'UA-...'ではなく'G-...'を設定しよう

調査過程

Chromeの拡張機能でエラー内容を調査してみる。

https://chrome.google.com/webstore/detail/tag-assistant-legacy-by-g/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=en

1 Errorを確認。

通信がうまくいってないらしい。

公式ガイドを参照。設定がうまく行ってないんだろうなーという感じ。

https://support.google.com/tagassistant/answer/3059154?hl=en#http_response

Missing HTTP Response denotes that, while the Google Analytics code was detected in the page source, the script itself did not execute. Each time the Google Analytics script executes, we expect an HTTP Response carrying the tracking request to Google’s servers.
This means that the Google Analytics code is not implemented properly on the page and no data will be collected.
Recommended Action: Reinstall the Google Analytics snippet by removing the current iteration, copy a new version from the Analytics interface, and insert that version into the site.

そこで、Gatsby側でどういう風にTag Managerが設定されているかを確認。

関連しそうなプラグインを2つ発見。それぞれの公式ページを見ると、google-analyticsの方でgoogle-gtagの方に言及している。

https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/

Upgrade note
This plugin uses Google’s analytics.js file under the hood. Google has a guide recommending users upgrade to gtag.js instead. There is another plugin gatsby-plugin-gtag which uses gtag.js and we recommend it.

どうやらgtag.jsに移行することが推奨されていて、gatsbyではそれ用にgatsby-plugin-gtagを使うようにとのこと。つまりこの2つのプラグインはカニバっているらしい。
参考程度に調べてみると、それらしい記事を複数発見。

https://shinshin86.hateblo.jp/entry/2021/01/19/125846
https://kikunantoka.com/2021/01/01--update-google-analytics/
gatsby-plugin-google-analyticsの方をuninstallして、gatsby build && gatsby serveでgtagの挙動を確認してみる。

gtagは良さそうだけど、Google Analyticsが無いことになっている?

もともとGA4に変えたタイミングで発生した問題だったので、GAの方も調査してみることに。
すると、どうやらGA4ではTracking IDが従来の'UA-...'とは異なるらしいということを公式ガイドで発見。規格が違うらしい?

https://support.google.com/analytics/answer/9539598

If you don't see a Tracking ID, you have a Google Analytics 4 property. (Google Analytics 4 properties do not have a Tracking ID.)

てなわけでConsoleで確認してみると、ほんとだ、'G-...'の測定IDなるものを発見。

こいつをgatsby-config.jsで設定してgatsby build && gatsby serveすると...

無事、リアルタイムアクセスデータが反映された!

Discussion

ログインするとコメントできます