Cannot track screen name in React SPA

[florianmonfort]

Creating an issue here for tracking purposes and in case someone else has found a solution to this problem.

[REQUIRED] Describe your environment

• Operating System version: NA
• Browser version: Chrome, Edge
• Firebase SDK version: 7.21.0
• Firebase Product: Analytics (auth, database, storage, etc)

Steps to reproduce:

Events --> screen_view --> Filter by Stream = Web --> User engagement table --> Select screen name

What happens is, Firebase is always only registering in the Dashboard the screen_name as the page title in browser, instead of using the screen_name set in the code:

In DebugView:

In Dashboard:

-->

Relevant Code:

Our JS implementation to import:

    <script>
      // Your web app's Firebase configuration
      var firebaseConfig = {
        apiKey: "XXXXXX",
        authDomain: "XXXXXX",
        databaseURL: "XXXXXX",
        projectId: "XXXXXX",
        storageBucket: "XXXXXX",
        messagingSenderId: "XXXXXX",
        appId: "XXXXXX",
        measurementId: "XXXXXX",
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      window.firebaseAnalytics = firebase.analytics();
    </script>

Our JS implementation to track each screen:

      function firebaseTrack(data, event = "screen_view") {
        if (window.firebaseAnalytics) {
          firebaseAnalytics.logEvent(event, data);
        }
      }
      firebaseTrack({ screen_name: "My bookings" });

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

I'll try to reproduce when I can, but if you are able to do it quickly: does this work if you use gtag alone instead of Firebase Analytics? Would be a quick way to see if it's a problem with the Firebase SDK or with Google Analytics itself.

[florianmonfort]

I'll try to reproduce when I can, but if you are able to do it quickly: does this work if you use gtag alone instead of Firebase Analytics? Would be a quick way to see if it's a problem with the Firebase SDK or with Google Analytics itself.

Hello @hsubox76 , we managed to successfully send the event correctly in DebugView using gtag method alone, we will deploy it to production as a test to get more data to see if the Firebase Dashboard will reflect it and come back to you within 1 or 2 days.

Thank you for your help!

[florianmonfort]

I'll try to reproduce when I can, but if you are able to do it quickly: does this work if you use gtag alone instead of Firebase Analytics? Would be a quick way to see if it's a problem with the Firebase SDK or with Google Analytics itself.

Hello @hsubox76 ,

After successful test we published the change to production to see if there would be any change to our tracking, and it seems we still see the incorrect data in our dashboard:

[hsubox76]

Just to be clear: gtag() and firebase.analytics() both work in a development environment if you look at it in DebugView but not in production if you look at it in the regular dashboard?

Do you only look at the regular dashboard after deploying to production? Analytics gets events more or less in real time so I usually don't use DebugView and check events in the live dashboard even when I'm working in a dev environment on localhost. I'm just asking because it seems like there might be something about how you set up debug mode vs whatever you do differently to create the production deployment.

Can you share any more details about how you set up your local dev environment, for example, I'm guessing you use the Chrome extension to make sure it writes events to DebugView? And what do you change before deploying to production?

[florianmonfort]

@hsubox76 hi,

Just to be clear: gtag() and firebase.analytics() both work in a development environment if you look at it in DebugView but not in production if you look at it in the regular dashboard?

Yes, correct.

Do you only look at the regular dashboard after deploying to production? Analytics gets events more or less in real time so I usually don't use DebugView and check events in the live dashboard even when I'm working in a dev environment on localhost. I'm just asking because it seems like there might be something about how you set up debug mode vs whatever you do differently to create the production deployment.

We look at both. DebugView always works, dashboard never, no matter whether we use staging or production environment.

Can you share any more details about how you set up your local dev environment, for example, I'm guessing you use the Chrome extension to make sure it writes events to DebugView? And what do you change before deploying to production?

We look at the dashboard in both settings. We have a "staging" and a "production" environment for our application, during deployment we do not change anything and actually the behavior is exactly the same on both instances when turning on the debug mode using the Chrome extension. We also did not add any specific code to switch between a Debug or Production code, they are exactly the same.

[hsubox76]

So I think this is a gtag issue and it may be a problem with gtag not playing well with SPAs. I did a quick search and found this, which I think might be the same issue?

https://stackoverflow.com/questions/63248034/using-gtag-with-spas-screen-view-vs-page-view-and-how-page-path-fits

The suggested solution here was to set send_page_view to false. I think it's got something to do with it not sending screen_view if page_view has already been sent? Because it assumes every page is one screen? Not totally sure.

As it happens, someone has previously asked how to set send_page_view to false for Firebase Analytics, in one of the issues on our repo:

#3988

So there's a workaround for that. Looking into a possible future change to allow users to set custom gtag config params.

[florianmonfort]

So I think this is a gtag issue and it may be a problem with gtag not playing well with SPAs. I did a quick search and found this, which I think might be the same issue?

https://stackoverflow.com/questions/63248034/using-gtag-with-spas-screen-view-vs-page-view-and-how-page-path-fits

The suggested solution here was to set send_page_view to false. I think it's got something to do with it not sending screen_view if page_view has already been sent? Because it assumes every page is one screen? Not totally sure.

As it happens, someone has previously asked how to set send_page_view to false for Firebase Analytics, in one of the issues on our repo:

#3988

So there's a workaround for that. Looking into a possible future change to allow users to set custom gtag config params.

Hello @hsubox76 ,

We've done the test using send_page_view = false, and the data is still wrong in Firebase Console:

[hsubox76]

This might be a silly question but have you set app_name already before sending all these events? It's required for screen_view events and I don't see it in your code, but perhaps you've set it previously in a config call as is suggested here. https://developers.google.com/analytics/devguides/collection/gtagjs/screens If so is there any chance the config call was delayed or somehow gets overwritten? Is the app_name set to the wrong string (DiningCity I think) that you're seeing? If that's the case and you're doing everything else correctly, maybe we can narrow the bug to the app_name being sent instead of the screen_name.

[florianmonfort]

This might be a silly question but have you set app_name already before sending all these events? It's required for screen_view events and I don't see it in your code, but perhaps you've set it previously in a config call as is suggested here. https://developers.google.com/analytics/devguides/collection/gtagjs/screens If so is there any chance the config call was delayed or somehow gets overwritten? Is the app_name set to the wrong string (DiningCity I think) that you're seeing? If that's the case and you're doing everything else correctly, maybe we can narrow the bug to the app_name being sent instead of the screen_name.

Hello @hsubox76 , yes we had (to answer your previous question).

I have some news that we finally managed to make the tracking work correctly, by using the following code:

const useGtag = true; export default function (data, event = "screen_view") { if (useGtag && window.gtag) { let screenName = data["screen_name"]; if (screenName) { data["page_title"] = screenName; data["firebase_screen"] = screenName; data["firebase_screen_class"] = screenName; } window.gtag("event", 'screen_view', data); return; }

I'm not sure if that answers exactly what was going on in the first place, but I hope that if there is any actual issue in the SDK or gtag that it would help you figure out what it is.

[hsubox76]

Thanks for the info, it does look like those event params are necessary for Firebase Analytics to check screen views, per this page, which doesn't include a Web example. https://firebase.google.com/docs/analytics/screenviews#java

I think it got overlooked because screen_view is considered more of a mobile app event than web, I'll look into what we should do (maybe provide constants for these fields, as the other platforms do, and some documentation).

[florianmonfort]

@hsubox76 I believe this would be a good idea. I understand that from the "traditional" way of thinking about web pages it wouldn't seem to self evident however now we're being asked on Firebase constantly to add a Web "app", and we also code our website as an "app" as well using React, so I think Firebase needs to consider web truly like an app and that needs to be reflected in the testing and documentation for SDKs and so on.

Otherwise for companies like ours, things get real confusing.