Using Angularfire with GTM

[elinake]

Firebase is integrated with Google Tag Manager, which means that I can add my GTM Container ID to Angular project, and have Firebase-generated measurement id added to head at runtime as gtag. In GTM I connect the Firebase-generated measurement id to my GTM application as a configuration tag, like explained here: https://www.analyticsmania.com/post/google-analytics-4-user-id/

With Angular Fire, if I replace measurement id in firebase config with the GTM Container ID, I get warning message @firebase/analytics: The measurement ID in the local Firebase config (GTM-XXXXXXX) does not match the measurement ID fetched from the server (G-XXXXXXXXXX). To ensure analytics events are always sent to the correct Analytics property, update the measurement ID field in the local config or remove it from the local config.

Events I log with Angularfire logEvent are sent correctly to the server and I can see them in Firebase debug view. However, as far as I can see, there is no way to use GTM Preview. Regardless of do I have GTM container id or Firebase measurement id in Angularfire config, I see only firebase measurement id in Preview mode, and it does not get any hits.

Another way I found is to use this library angular-google-tag-manager and a framework-agnostic way to push datalayer events: window.dataLayer.push({'event': 'new_subscriber'});. This way I see both GTM Container id and Firebase generated measurement id in GTM preview, GTM gets the hits correctly from everything pushed to datalayer, and Firebase console logs all events from datalayer correctly. (To clarify, GTM Container ID is not a gtag, but the way to fetch the gtags from the GTM project.)

In short, Firebase + GTM + Angular works, Firebase + AngularFirebase + Angular works, but Firebase + GTM + AngularFirebase + Angular does not. It's a bit confusing, especially because when Google Analytics debugger Chrome extension is on, it shows that AngularFire logEvent indeed uses data layer to push events. So my understanding is that AngularFire does use data layer, but is unable to connect the measurement id to GTM Container id.

Versions: Firebase: 9.6.6 Angular: 12.2.0 Angularfire: 7.2.1

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[AnthonyNahas]

I am facing the same issue