こんにちは。ミーティングテクノロジーという会社で会議ツールを開発している伊勢川です。

先日、@firebase/analytics: TypeError: gtagFunction is not a functionというエラーに出くわして、ネットでいい情報が見つからなかったので、その解決方法をメモしておきます。

事象

@firebase/analytics: TypeError: gtagFunction is not a function というエラーがブラウザのコンソールに表示される
Google Analyticsのデフォルトのイベントは問題なく送信されるが、カスタムイベントは送信されない

解決方法

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」と書いてあり、これを見落としてなければもっと早く気付けたかもしれない