📖

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

2021/12/13に公開

Gatsby.js

Google Analytics

tech

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

原因と対処法

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

調査過程

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

1 Errorを確認。

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

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

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が設定されているかを確認。

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

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つのプラグインはカニバっているらしい。
参考程度に調べてみると、それらしい記事を複数発見。

gatsby-plugin-google-analyticsの方をuninstallして、gatsby build && gatsby serveでgtagの挙動を確認してみる。

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

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

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