Search code examples
reactjsgoogle-analyticsgoogle-tag-managerfirebase-analyticsreact-gtm-module

Difference google analytics object and dataLayer in React.js

I have in my .env fiel the field REACT_APP_MEASUREMENT_ID=G-XXXXXXXX

I am using react-gtm-module and Google Tag Manager 4 (and still also Universal analytics) and I initialize in my App.js:

   useEffect(() => {
            TagManager.initialize({ gtmId: 'GTM-XXXXXX' });

        analytics.logEvent('screen_view', {
            firebase_screen: 'Home',
            firebase_screen_class: 'MainPage',
        })
    }, [analytics])

However, the analytics object comes from firebase.analytics(app) that I initialized in the firebase.js file... has that analytics object from fire/analytics anything to do with the google tag manager or the datalayer object, or with google analytics at all or is that something different?

I am using that analytics object in my components just as the datalayer object, and it also gives me the same kind ob datalayer object in google tagassistant, e.g:

  setGameFinished(gameFinished => (gameFinished = true))
            analytics.logEvent('game_finished', {
                score: `${correctAnswerCount} of ${quizData.length}`,
            })

gives me dataLayer.push({event: "game_finished", eventModel: {score: "2 of 4", send_to: ""}, gtm.uniqueEventId: 23}) in google analytics tagassistant (debug window).

But is it the same? I think I might have messed something up there ;). Can someone explain me the difference?

Solution

  • Difference between Firebase and GTM? First of all, Firebase is an SDK. To be used in native apps. JS-driven apps (except react native, I believe) are supposed to use gtag.js. Gtag is a way to track data directly to GA4. And for Universal analytics, they use the analytics.js lib.

    So, again: Firebase SDK was meant to track apps and that data goes to the Firebase service. Soon after introducing firebase, Google realized it wasn't a very comfortable thing to use, so they rolled out GA4 with a very similar to Firebase data model, and since the data model is so close, they made it easy to sync Firebase instance with a GA4 instance. Also, they decided not to bother with a new SDK for the native apps and went with firebase for ga4.

    Google Analytics (a slightly different thing from firebase) has had its history of bad architectures as well, but now we have two analytics libraries, analytics.js that is meant to be deprecated in a year or so with Universal Analytics and ga4 that is meant to replace it despite all the bugs it brings. Ga4 uses the gtag.js lib. But that's only for web. This will only work in apps that allow unsecure external scripts execution, so, like, browsers. Electron-driven apps, too.

    Firebase SDK allows you to send events directly to your Firebase endpoint and that makes the data available for analysis or further ETL.

    Now, GTM, unlike the other libs, is not meant to just send the payloads to the endpoint. It's meant to add a middle man. Basically, GTM deploys a collection of user logic, so in GTM users can grab whatever you're pushing in the dataLayer array, rearrange it, change it and send it to wherever. And wherever can be anything, it can be ga4, can be ga ua, can be facebook or any other endpoint. GTM, as any other tag management system ultimately executes custom javascript on pages where it's loaded.

    There's also GTM for native apps. And that thing is largely useless. It can't really do anything and requires being loaded on every build. It also loses the ability to execute code, so no hotfixing or independent tracking implementation is not possible. Honestly, mobile GTM is about as helpful as the GTM loaded within the no script tag. Native GTM does not provide enough use to justify the spread of business logic and added dependency. It was made just so that Google could claim that it's cross-platform. Same about the no-script: just for the company to be able to claim that it doesn't depend on JS completely.

    Good, now that we're done with the context of what's happening, if you're using react for front-end, then you don't need anything except GTM. GTM is able to load all the libraries it needs for tracking without your intervention and send events as needed, but someone needs to build logic in GTM for whatever is being pushed to the DL. You don't need firebase, having GTM (dataLayer) as the only touchpoint between analytics and front-end is the best practice.

    If you're doing react native for a native app, then it's the opposite - you likely don't need GTM. But sync with your implementation specialists or whoever owns the GTM account in the company.