Firebase Analytics not sending events on Chrome when embaded inside of iframe

[arczewski]

[REQUIRED] Describe your environment

Operating System version: Windows
Browser version: Chrome 86
Firebase SDK version: 8.0.0
Firebase Product: Analytics

[REQUIRED] Describe the problem

Application build with Unity WebGL and binded with js sdk don't send statistic when hosted in facebook iframe.
Localy hosted build is working properly and is able to connect to Google Tag Manager.
When launched from Facebook we can see (using Google Analytics extension) analytics logs in console but proxy/browser network tab doesn't show anything.

This problem doesn't occur on Chrome 80, Firefox and Edge(currently only noticed on Chrome 86).

Steps to reproduce:

Unity WebGL app with Firebase JS SDK published on Facebook.
Initialize sdk and publish any event.

We can provide access to app with this problem on facebook.

[google-oss-bot]

I found a few problems with this issue:

• I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.
• This issue does not seem to follow the issue template. Make sure you provide all the required information.

[hsubox76]

1. Do you see any errors or warnings in the console from Firebase Analytics?
2. If possible, can you make an app that does not use or import Firebase at all and uses just gtag.js instead, to send the same events to the same measurementId? And let me know if that works or fails?

(2) would be really helpful if possible because Firebase Analytics is just a wrapper around gtag.js, so if gtag.js works by itself, we can narrow it down to a problem in our wrapper code that I can further look at. If gtag.js does not work by itself, it indicates something about the Facebook iframe is preventing gtag from doing its thing.

[arczewski]

1. There is no warnings/errors in the console.
2. Today I will try with gtag.js and see if it is working.

[arczewski]

I replaced firebase analytics with gtag. Results are the same.
Chrome/Chromium based Edge - is somehow blocking request to gtag if placed in facebook iframe.
Chrome/Chromium based Edge - when localy hosted and not in iframe request are visible in proxy/browser network tab.
Firefox - works localy and in facebook iframe. Gtag and firebase are working correctly in Firefox/request are visible in proxy/network tab.

https://tagmanager.google.com/ - works only when hosted localy. Do not work when app is placed in facebook iframe on both Chrome and Firefox.

[arczewski]

I think I found a solution. The problem is with this year Chrome cross-site cookie handling.
Due to hosting app in an facebook iframe - cookie_flags: 'max-age=7200;secure;samesite=none' is required for request to pass thru. I'm able to override gtag initialization and push this setting after firebase initial initialization but I wonder if there is a way of passing it in firebase intial config instead of recreating gtag -
gtag('config', 'ID', { cookie_flags: 'max-age=7200;secure;samesite=none' });

[hsubox76]

Thanks for figuring this out. Considering a separate use case for setting config mentioned in #3988 , perhaps it is worth providing a method for setting gtag config params before Analytics initialization (on firebase.analytics().settings()) or during initialization (a param to firebase.analytics()).

[hartonoda]

hi @arczewski would be grateful if you share on how do you override that gtag inizialization and push this setting?
window.firebase.initializeApp(firebaseConfig)
window.firebase.analytics()

did you do it after this code? thank you

[mariogarranz]

I was struggling with this issue for days. We were losing a lot of data from desktop browsers on the analytics for our Facebook Instant Game (it was reflected on Facebook Analytics, but not on Firebase) and it was very hard to tell why.

Adding

gtag('config', 'ID', { cookie_flags: 'max-age=7200;secure;samesite=none' });

Just after firebase.analytics(); seems to have fixed the issue (at least now I can see POST requests being sent from my browser, which I could not see before).

[TheSecurityDev]

Thank you so much for pointing me in the right direction! For anyone else wondering how to fix this on the NodeJS library, just initialize it like so:

Edit: As pointed out, this is for any browser context. I was using NodeJS for my backend, so I got mixed up there.

import { initializeAnalytics } from "firebase/analytics";
const analytics = initializeAnalytics(yourFirebaseApp, {config: { cookie_flags: "max-age=7200;secure;samesite=none" });

[hsubox76]

Not sure about the Node comment as Analytics isn't supported in Node, but in any browser context, that's the correct syntax. Now that this feature's been added I will close this issue with a link to the reference documentation for initializeAnalytics. If you drill down enough into the params, it will show you what gtag config options are available, plus you can also use any custom params or other params accepted by a standard gtag('config', ...) call.

https://firebase.google.com/docs/reference/js/analytics#initializeanalytics