こんにちは。ミーティングテクノロジーという会社で会議ツールを開発している伊勢川です。
先日、@firebase/analytics: TypeError: gtagFunction is not a functionというエラーに出くわして、ネットでいい情報が見つからなかったので、その解決方法をメモしておきます。
事象
-
@firebase/analytics: TypeError: gtagFunction is not a functionというエラーがブラウザのコンソールに表示される - Google Analyticsのデフォルトのイベントは問題なく送信されるが、カスタムイベントは送信されない
解決方法
- angularfireを19.0.0以上に上げる場合は、firebase sdkのバージョンを11.2.0以上に上げる
package.jsonのdependenciesの抜粋
"@angular/fire": "^19.1.0",
"firebase": "^11.6.0",
調査の経緯
- Google Analyticsの一部の集計データが見られないと報告を受ける
- 調査してみると、ある日を境にカスタムイベントのデータだけが送られていないことに気づく
- githubの履歴を追ってみると、その日にリリースをした形跡がある
- コミットを一つ一つ見ていくと、どうやら@angular/fireのバージョンを18.0.1から19.0.0に上げている
- 19.0.0の不具合の可能性もあるため、よく調べもせずに19.1.0にバージョンを上げてみるが解消せず
- 18.0.1から19.0.0の差分をチェックしてみると、google analyticsの初期化に関するサンプルコードが追加されていた
- サンプルコードに従い、ScreenTrackingService、UserTrackingServiceを追加してみるが解消せず
- 切り分けのため、強制的にangular/fireのバージョンを18.0.1まで戻してみると解消
npm install @angular/fire@18.0.1 --legacy-peer-deps
- これはやはりangular/fireのバージョンが怪しいということで、18.0.1から19.0.0の差分をもう一度読み直す
- すると、firebase sdkのバージョンも一緒に上がっていることに気づく
- "firebase": "^10.12.4"だったものを、"firebase": "^11.6.0"に変えて晴れて問題解決
反省
- google analyticsにカスタムイベントを送っているクラスは、結合テストの結果が自動で検証しづらいため、モックを用いた単体テストだけを行っている。これはあんまり変えたくない
- ブラウザのコンソールのログをちゃんと見ずにリリースしてしまったｎよくなかった。とはいえ毎回目で見る運用は避けたいので、e2eでコンソールログを取得するかspyするようにしよう
- バージョンアップの際にangular/fireのドキュメントをちゃんと読んでなかった。「Bumped Angular, Firebase, and other dependencies」と書いてあり、これを見落としてなければもっと早く気付けたかもしれない