Firebase-js-sdk: Firebase Analytics doesn't work for Web app

[agordeev]

[REQUIRED] Describe your environment

• Operating System version: macOS
• Browser version: Firefox 72.0.2 (64-bit)
• Firebase SDK version: 7.8.0
• Firebase Product: analytics

[REQUIRED] Describe the problem

I've added a web app in Firebase console to integrate Firebase Analytics:

The problem is Firebase Analytics doesn't show any data for the web app. Like the website has no visits at all. I tried few ways to integrate Analytics:

<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-analytics.js"></script>
<script>
  const firebaseConfig = {
    ...
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

<script src="/__/firebase/7.8.0/firebase-app.js"></script>
<script src="/__/firebase/7.8.0/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>

nothing worked.

Quite similar issue described here: https://stackoverflow.com/questions/58484726/firebase-analytics-not-showing-data-for-web-application with no answer.

By the way, I use custom domain.

[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.

[rommelpe]

Sorry to hear about your issues, @agordeev. Looking at your config, it doesn't seem to be an issue. The initial data logged usually takes up to 24 hours to display and 3-4 hours delay for the succeeding data.

If the issue persists after 24 hours, given that you've properly added Analytics SDK, you may check the following:

• Make sure that the correct “filters” are applied or clear any filters. This can often cause the report to show no data if it doesn't have any users that meet the criteria.

• Provide screenshot of DebugView. It enables you to see the raw event data logged by your app on development devices in near real-time

[hsubox76]

First of all, are you seeing any errors in the console, or in the Network tab?

Second, In the documentation linked above for DebugView, the Web tab tells you to install the Google Analytics Debugger Chrome extension that will let you set debug mode and view information that is (or isn't) being sent from that page. For a quicker and less user-friendly option, you can also look at your Chrome Dev Tools Network tab and check for a POST request to an endpoint that starts with https://www.google-analytics.com/g/collect? . If you find this, that means the client side code is correctly sending analytics data to the backend.

Finally, just in case, check to see if your firebaseConfig object has a measurementId field. This was newly added when we introduced analytics, and if you are reusing an older config it's possible you may not have it.

[agordeev]

@rommelpe @hsubox76 thanks for suggestions.

1. It's been a week since I integrated analytics. No data since then.
2. I've been checking StreamView, it's also empty.
3. I'm sorry, but I don't really want to install any extension. I believe that is not required to get analytics data from the website.
4. Console prints a warning:

A cookie associated with a cross-site resource at http://google.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

1. No POST requests made neither on Firefox nor Chrome.
2. My config has measurementId.

PS: Hmm, interesting.. It records events if I use Google Chrome. But still nothing for Firefox and Safari.

[hsubox76]

Do you get different results when you try this on localhost?

Edit: I've tried your first snippet (with my firebaseConfig) in Chrome and Firefox on localhost and they both show a visit in the "Users in last 30 minutes" panel in Analytics > Dashboard.

[agordeev]

Same result if I try on localhost: Chrome works, but others don't.

[hsubox76]

Hm, I've tried creating a raw index.html file with the exact code you've put in your first snippet (with my project config) and serving it locally with http-server and visiting it with Chrome, Firefox, and Safari, and all of them result in hits I see in my Firebase Console Analytics Dashboard. From the screenshot your app looks like a standard webapp.

Is there anything else you can think of that might be unusual about your environment? Private browsing? Iframes?

[agordeev]

No, that's a standard static one page website based on Bootstrap.

[neekey]

I'm having the same issue:

• No data from ga
• No data from debugView
• I'm testing with Chrome
• Tried both custom or domain by firebase

I'm using the automatic configure way to setup firebase:

<script src="/__/firebase/7.8.0/firebase-app.js"></script>
<script src="/__/firebase/7.8.0/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>

the measuurementId exists, I manually call firebase.analytics().logEvent('notification_received'); will trigger request to https://www.google-analytics.com/g/collect?

[neekey]

if I go to GA and manually create a new Web StreamView and use google tagjs:

<!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxx"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-xxxxxxx');
    </script>

I will be able to see the data show up in my GA

[glockjt]

I am getting this same issue, using this same config. It would be great to get some feedback on how to address this issue.

I'm using the automatic configure way to setup firebase:

<script src="/__/firebase/7.8.0/firebase-app.js"></script>
<script src="/__/firebase/7.8.0/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>

the measuurementId exists, I manually call firebase.analytics().logEvent('notification_received'); will trigger request to https://www.google-analytics.com/g/collect?

[hsubox76]

the measuurementId exists, I manually call firebase.analytics().logEvent('notification_received'); will trigger request to https://www.google-analytics.com/g/collect?

So just to confirm, it is sending a request to that endpoint? Would you be able to share the contents of that request, with any proprietary strings redacted?

For the second user, are you also seeing that network request sent?

[hsubox76]

I'm sorry, I haven't been able to reproduce this. I've tried it with an existing project and a new project. I created an index.html file that contains only this:

<script src="/__/firebase/7.8.0/firebase-app.js"></script>
<script src="/__/firebase/7.8.0/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
<script>
  firebase.analytics().logEvent('notification_received');
</script>

Then I

• created a new project in the Firebase console
• created a new Google Analytics project when prompted (instead of using an existing one)
• In the dir containing the index.html I ran firebase init and gave it the project ID of the project I just made
• ran firebase deploy --only hosting

When I went to the url created, I saw the POST to the /collect? endpoint and when I went to the Firebase console Analytics dashboard I saw 1 "users in the last 30 minutes".

Is there anything different that you can think of? For example:

• Did you use an existing or new Firebase app? If existing, did you have to add Analytics to it?
• Did you use an existing GA project? (one of the prompts when creating a new Firebase project)
• Is there any special circumstance about the hosting? Custom domain, multiple sites in one project?
• Does this page include any other scripts or libraries?
• Any ad blocker or tracking blocker extensions?
• Browser? User above mentioned that Chrome works but not Firefox or Safari.

I would like to track down what's going on here but since I can't reproduce it, we need to narrow down what the cause could be.

[nickharder88]

I believe the issue is that in this documentation, it isn't apparent that you have to add this line after loading /__/firebase/init.js,

<script>
  firebase.analytics().logEvent('notification_received');
</script>

Once I added that, analytics started working. I didn't even add the logEvent('notification_received'); call, simply adding firebase.analytics(); will work.

[edpin]

I was having the same problem, but @nickharder88's solution above worked for me. Thanks!

[rupeshpadhye]

I am also facing similar issue , I tried to user firebase analytics in chrome extension. Initially I don't see any analytics XHR calls.
After I added following statement , I saw the server request
firebase.analytics().logEvent('notification_received');

But even after 24 hours I don't see any data on dashboard.

[hsubox76]

Just want to clear it up for everyone: I only put logEvent('notification_received') in the example because I was replying to a user using that in their sample code.

In order to initialize Analytics you only need the line firebase.analytics(), as mentioned here: https://firebase.google.com/docs/analytics/get-started?platform=web#start_logging_events

I can ask the docs team to try to make it more prominent.

As for not seeing it in the dashboard, if the POST request to the collect? endpoint is being sent, then it should be working on the client side and there may be some trouble on the server side, which I can report to that team if data fails to show up for over a week. Basically, sometimes there are delays in service for short periods of time, and then the data starts showing up again, and I don't think the team can debug it if it's not broken at the time they look at it.

[rupeshpadhye]

@hsubox76 when i initialise analysis with firebase.analytics() , I don't see any POST request in network tab

[hsubox76]

Sorry, I was trying to address the general idea that the logEvent('notification_received') is needed.

Unfortunately, Firebase Analytics is not currently supported in Chrome Extensions. See the Supported Environments page for more info on where features are supported:
https://firebase.google.com/support/guides/environments_js-sdk

[google-oss-bot]

Hey @agordeev. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[agordeev]

@hsubox76 what kind of info are you expecting? I'm still experiencing this on Firefox.

[hsubox76]

See comment above for how I tried to reproduce it, and further questions whose answers might help me reproduce it: https://github.com/firebase/firebase-js-sdk/issues/2600#issuecomment-596695691

Any help in reproducing this in a fresh environment would be great. If I'm not able to reproduce it and no one can think of any further ideas for now that might reproduce it, I won't be able to make any progress pinpointing what is wrong and will close the issue. Don't worry, anyone can always add a comment if they have any new information or can put together a minimal repro that always exhibits this problem. But I would need new information, because comments along the lines of "I am also experiencing this problem" do tell us about the impact, which is important, but don't help us reproduce and debug.

Edit: Also after feedback from some of the additional commenters, I do have an action item to update the Analytics "Getting Started" docs to make sure the firebase.analytics() initialization command is more prominent. I understand this isn't the problem with the original post though.

[RWOverdijk]

I'm having the exact same issue.

The GA addon doesn't log anything.

Not sure if it matters but:

• My stack is expo with react native web.
• I am calling firebase.analytics()
• Adding firebase.analytics().logEvent('notification_received'); doesn't solve it
• I'm testing on localhost.
• The config has been set correctly.
• The GA plugin doesn't show anything on brave but...

It works in google chrome. Events are being logged. it doesn't work in any other browser. Not even other chromium based browsers like Brave or Edge are working.

What other info can we provide to help resolve this?

[tenjojeremy]

Logs are not being recorder.

import firebase from 'firebase/app'
import 'firebase/analytics'

import config from './config'

firebase.initializeApp(config)

firebase.analytics()
firebase.analytics().logEvent('login')

Environment:

• chrome
• google analytics debugger installed
• localhost
• web app

[AaliaLokhandwala]

I have a similar issue. I have initialized firebase and the initial setup is in place.
I can also see events in the local build on debug view.
However, when trying to run a production build with a URL, events are not logged.
Please help!

[tenjojeremy]

@AaliaLokhandwala can you please share your case that works locally ?

[AaliaLokhandwala]

Hi,

I initialized firebase and imported analytics and put some trackers on my
web application. When I use localhost and debug view using the Google
extension all the events are logged successfully.

However when the web application is hosted to a url, the events are not
logged anymore

Thanks for all your help,

Aalia Lokhandwala

On Mon, Apr 27, 2020, 9:07 PM Jeremy Tenjo [e-mail] wrote:

@AaliaLokhandwala https://github.com/AaliaLokhandwala can you please
share your case that works locally ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-js-sdk/issues/2600#issuecomment-620063357,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AJOJUSVYVAVFCFP7G3RLICDROWRDVANCNFSM4KQWX7YA
.

[tenjojeremy]

@AaliaLokhandwala can you share a code snippet 🙏?

[AaliaLokhandwala]

Sure this is the code snippet @tenjojeremy :
`import firebaseConfig from './firebaseConfig
import firebase from 'firebase/app'
import 'firebase/analytics'

firebase.initializeApp(firebaseConfig)
const firebaseAnalytics = firebase.analytics()`

[RWOverdijk]

@hsubox76 What info do you need for this issue? I mean, to satisfy the label "needs-info"?

I can share my code with you (in a closed environment of course) if that helps? I'm available for a call for example to walk through this and help find the cause.

[johngrimsey]

I just had this issue until I disabled the uBlock Origin adblocker extension. Just incase somebody else forgets about that... 🤦‍♂️

[hsubox76]

I have set up a few tools to help debug, and also updated the documentation.

1. I have updated the Firebase Analytics Getting Started documentation to make it clear that you must initialize analytics with firebase.analytics(), which hopefully clears up confusion for some users.

2. To help debug different environments I set up a website using Firebase hosting and Firebase automatic configuration: https://ch-autoconfigure.web.app/ Go there, using the browser and environment you are seeing issues on, and follow the instructions to determine whether or not the page is sending the analytics POST request. All the code for that page is in index.html.

   You may want to copy the setup yourself for various reasons. If so, here's the repo for that page: https://github.com/hsubox76/firebase-analytics-cdn-test

   • If this page works for you in some browsers/OS but not others, please let me know which (and double check that your browser's adblock/privacy settings are not deliberately blocking it).
   • If this page does not work in any browsers or OS, including Chrome on Mac (our main dev environment) please let me know the time. Perhaps there was a backend outage.
   • If you set this up in your own project (changing nothing except the hosting settings

3. I created a separate repo for using Firebase Analytics through the NPM-installed packages (not CDN script tags). You can use this to build and serve locally, to determine if the problem might be something in your OS or something else specific to your dev environment that we did not have when developing and testing.

   That repo is here, with instructions on how to build and serve: https://github.com/hsubox76/firebase-analytics-minimal

   • As with the CDN page, once you start this locally, you can see if it works in different environments. You can also deploy it to your own hosting sites and see if it works or breaks on a particular host.
   • You can also start adding small amounts of code, or build steps, that you have in your own project, until one of these additions breaks it, in which case that will be really helpful to send along to us to help us narrow down what's not working. By starting with this minimal project and only adding just what is needed to break it, we can eliminate a lot of chasing down unrelated code.

The purpose of these two repos is that they're minimal and confirmed to work in our dev environment.

• If it doesn't work in one of your environments, we can use that info to narrow it down to an environment incompatibility.
• If it does work and your code doesn't, you can use it to compare and do some kind of bisect debugging to narrow down which difference might be causing the problem.
• If it doesn't work in any environment for you, but does work a few days later, or did work a day ago, this points to a temporary backend outage, and we'd like to know the dates and times for those.

I definitely want to sort out any Analytics bugs that are going on, but it's very tricky because of all the factors that could be involved. I hope some of this will be useful in rooting out extraneous factors and narrowing down the real bugs, which we can then get to fixing!

[agordeev]

@hsubox76 Thank you for your effort! It was uBlock Origin who blocked the requests.

[RWOverdijk]

check that your browser's adblock/privacy settings are not deliberately blocking it

This. I'm using Brave and it's not having it. So Google Analytics is essentially useless for our platform then?

[kevinlearnsthings]

Super helpful thread. Thank you all! @hsubox76, do you know if Firebase has any plan to support analytics for Chrome Extensions or if anyone's created a workaround?

We're migrating an app over to Firebase at the moment and this is our last thing to figure out before giving the project a big green light. We currently use Google Analytics.

[LennardSchwarz]

Super helpful thread. Thank you all! @hsubox76, do you know if Firebase has any plan to support analytics for Chrome Extensions or if anyone's created a workaround?

We're migrating an app over to Firebase at the moment and this is our last thing to figure out before giving the project a big green light. We currently use Google Analytics.

I would be very interested in this as well. I want to use Firebase to A/B test features in a Chrome browser extension and I need analytics to work for this.