NETWORK ENGINEER BLOG

Tips and Reviews for Engineers

Web Application に GA4 を実装する

Firebase で作成した Web Application に GA4(Google Analytics 4)を適用する手順について、ちょっとハマってしまったのでメモです。
Firebase web code lab で作成した Web アプリケーションに、以下のように、Index.html に SDK を読み込むように設定したのですが、機能しませんでした。*1

<!-- Import and configure the Firebase SDK -->
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
<!-- If you do not want to serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
<script src="/__/firebase/8.2.1/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="scripts/main.js"></script>

調べたところ、以下の記事に答えがありました。ありがとうございます。

【重要】アップデートされたGoogle Analytics 4にはトラッキングIDが存在しない【2020年10月以降ブログを始める方は要注意】
出典:静かに暮らしたい

Google Analytics 4 にイベントデータを送信するための API(gtag.js)を <head> の先頭に埋め込む必要があるようです。
f:id:FriendsNow:20210116175124p:plain

詳細は以下をご参照ください。
developers.google.com

以上

*1:設定は、こちらを参考にしました。