Firebase Analytics (Web) does not work in Non-browser Envs

[marcoancona]

• Operating System version: macOS Mojave
• Browser version: Electron 5.0.10
• Firebase SDK version: 7.1.0
• Firebase Product: Analytics

Describe the problem

Steps to reproduce:

On Electron, Analytics seems to load correctly but no events, sessions or users are logged.

Relevant Code:

Include Firebase using the script tag (as importing the module from NPM fails due to gRPC).

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.1.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.1.0/firebase-analytics.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-firestore.js"></script>
<script>
	firebase.initializeApp({
		...
	});
	firebase.analytics()
</script>

While Firebase seems to load, and a new googletagmanager gets installed on the page, not analytics events seem to reach Firebase dashboard.

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

[Feiyang1]

It's a limitation on gtag.js which Firebase Analytics depends on and uses cookies to manage sessions and users. Electron has document.cookies, but It seems that it is implemented/accessed differently, and gtag.js can't access it.

So unfortunately it means Firebase Analytics is not going to work in Electron.

[marcoancona]

I see. Then I will have to continue relying on the "classic" Google Analytics with Measurement Protocol. Hopefully, Google Analytics web+apps will support that as a data source at some point. It's a pity because a user-based analytics makes more sense for an Electron app (like for mobile apps) than the current session-based analytics.

[membla]

@Feiyang1 Do you have any links or leads on more information regarding this? As of now, we can't use Firebase Analytics in either the the main process (as Firebase node sdk doesn't support Analytics) or in the renderer, due to this. Great shame.

[rahul-dutt-sharma]

Nope

…

________________________________ From: Nikolaj Selvik <[email protected]> Sent: Saturday, February 8, 2020 10:55:45 AM To: firebase/firebase-js-sdk <[email protected]> Cc: Sharma, Rahul <[email protected]>; Manual <[email protected]> Subject: Re: [firebase/firebase-js-sdk] Firebase Analytics (Web) does not work on Electron (#2243) @Feiyang1<https://protect-us.mimecast.com/s/XQXaCQW2m6iQrPvfPqo0G> Do you have any links or leads on more information regarding this? As of now, we can't use Firebase Analytics in either the the main process (as Firebase node sdk doesn't support Analytics) or in the renderer, due to this. Great shame. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<https://protect-us.mimecast.com/s/ElKHCR60nPh6BW4cP6tg4>, or unsubscribe<https://protect-us.mimecast.com/s/iyKVCVOkr7TJ9yqtJjvEM>.

[hsubox76]

Hi, to clear up any confusion, Firebase Analytics is a wrapper around the gtag.js library. Any expansion of its capabilities depend on gtag.js adding those capabilities. I don't know of any plans right now to support use of gtag.js in non-browser environments, but as it is a separate team, I don't want to speak for them.

Basically, any ability to do this is contingent on changes that would need to be made in a separate library that we do not maintain.

[rahul-dutt-sharma]

Thanks for this information. I will try contacting them

…

________________________________ From: Christina Holland <[email protected]> Sent: Wednesday, February 12, 2020 3:27:04 AM To: firebase/firebase-js-sdk <[email protected]> Cc: Sharma, Rahul <[email protected]>; Manual <[email protected]> Subject: Re: [firebase/firebase-js-sdk] Firebase Analytics (Web) does not work on Electron (#2243) Hi, to clear up any confusion, Firebase Analytics is a wrapper around the gtag.js library<https://protect-us.mimecast.com/s/fxVgCYEnxytY6rJu0xNYZ>. Any expansion of its capabilities depend on gtag.js adding those capabilities. I don't know of any plans right now to support use of gtag.js in non-browser environments, but as it is a separate team, I don't want to speak for them. Basically, any ability to do this is contingent on changes that would need to be made in a separate library that we do not maintain. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<https://protect-us.mimecast.com/s/bUR7C1wnqGSgEVDcpRce2>, or unsubscribe<https://protect-us.mimecast.com/s/5IaUC2kor7trEMJs2D13U>.

[marcoancona]

What about Measurement Protocol?
If Firebase Analytics is based on the same underlying data of the classic Google Analytics, what prevents simply sending raw hit data?

[rahul-dutt-sharma]

I would like to chime in, I used heap by making the file protocol a standard scheme, this allowed heap to treat electron file:/// based ui as a webpage. Without this heap would not create cookies and hence wont work Firebase analytics had a simialr issue where it would not start even. By doing the above it makes the cookies and does some requests to load and start but never fully start If the problem is a simple check for browser agent then, this should be enhancable

…

________________________________ From: Marco Ancona <[email protected]> Sent: Wednesday, February 12, 2020 5:40:18 AM To: firebase/firebase-js-sdk <[email protected]> Cc: Sharma, Rahul <[email protected]>; Manual <[email protected]> Subject: Re: [firebase/firebase-js-sdk] Firebase Analytics (Web) does not work on Electron (#2243) What about Measurement Protocol? If Firebase Analytics is based on the same underlying data of the classic Google Analytics, what prevents simply sending raw hit data? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<https://protect-us.mimecast.com/s/WlKwCn5oXgswmZxfJKtpc>, or unsubscribe<https://protect-us.mimecast.com/s/yBOFCo20Kjh9vV8SV31dC>.

[membla]

@marcoancona My understanding is that Firebase/App+Web GA properties uses v2 of the GPM, which is undocumented and thus potentially subject to changes or it simply never being made available for use as an open protocol. I think there is a definite lack of clarity surrounding the technical details of the Google/Firebase analytics offerings as of right now that should be adressed.

References:

https://www.thyngster.com/technical-overview-of-new-appweb-properties/
https://www.simoahava.com/analytics/getting-started-with-google-analytics-app-web/

[membla]

Hi, to clear up any confusion, Firebase Analytics is a wrapper around the gtag.js library. Any expansion of its capabilities depend on gtag.js adding those capabilities. I don't know of any plans right now to support use of gtag.js in non-browser environments, but as it is a separate team, I don't want to speak for them.

Basically, any ability to do this is contingent on changes that would need to be made in a separate library that we do not maintain.

Are the Firebase Analytics for C++, iOS, Android and Unity also just wrappers of the gtag.js library? I would have reckoned they used the v2 GPM protocol referenced in my above comment directly.

[rahul-dutt-sharma]

has this been resolved by “Using Firebase in Electron: Tips and Tricks” by Christina Holland https://link.medium.com/7JbbcIhXm4 ?

[hsubox76]

No, as mentioned in the third paragraph of that article, Firebase is not officially supported for use in Electron. That is a guide with some tips for making as much of it work as possible.

For questions about potential use of Measurement Protocol, see this comment in another issue:

First, the key part of your question, about the use of Measurement Protocol v2: It is not currently stable and that team is still in the process of working out all the use cases they plan to support. Because of this, we can't officially incorporate its use into the Firebase JS SDK at this time. If you or anyone wants to create a community solution based on it, the fact that it is still in progress and not yet officially supported should be taken into consideration.

The user who opened that issue also links to some code they wrote to supply their desired functionality using the unsupported Measurement Protocol API, if you also want to try that route, given the tradeoff of it being unsupported and liable to change.

Finally, to clear up any confusion, the mobile SDKs do not use gtag.js or Measurement Protocol, but platform-specific APIs for interacting with Analytics.

[Pitouli]

Based on this answer, it seems you can make Google Analytic work on non-browser environment: https://stackoverflow.com/questions/3591847/google-analytics-from-a-file-url/47251006#47251006

Would it be possible to configure Firebase Analytic the same way?

Even better, would it be possible to have Firebase Analytic doing it itself?

• for userId, it would simply hash the user uuid from Firebase Auth (and automatically switch value when a user connect or disconnect. And use localStorage if Firebase Auth is not used or no user is connected)
• for storage analytics when offline, it would use local storage
• for checkProtocolTask, it would default to "null"
• for pageView, it would probably still be the responsibility of the dev to notify Firebase Analytic of a page navigation, because I can't see a "standard" way to do it...

This would be awesome!

And if it is not possible to use Firebase Analytic SDK in Cordova, is there any issue with using the GTag Library? Considering that my "Firebase Analytic" is linked with my "Google Analytic", what are the functional differences between using FA and GA? Would it impact Firebase Remote Config for example (particularly its ability to use Analytic criteria for the conditions)?

Thanks!

[Brijeshlakkad]

I had solved the problem of using GA4 in electron using expressJS and loading the URL of that to the created window.

Now, I want help to persist user session regarding this:
Every time an application opens user will have to login again as node.js will render the index again.

I have tried to use https://firebase.google.com/docs/auth/admin/manage-cookies and implemented required things at Firebase Functions. But still, the user session is not persistent.

[SGokulakrishnan]

Hi I have impleted the electron-firebase npm & configurations in my electron app .. While deploying the rules to firebase , it is asking the Cloud functions Admin role ... But I have already assigned the role to the corresponding service account

[alex-drocks]

I read a couple of issues related to Electron while I was trying to use the firestore realtime updates within my Electron desktop app. After more than 3 hours I concluded that Firestore realtime updates are incompatible with an Electron Browser window (the renderer process). I am able to use a one-time document or collection fetch, but the realtime updates using onSnapshot() don't work. In fact, I am able to confirm that that the onSnapshot unsubscribe function is assigned correctly, but the data observer never gets called, no matter what I tried.

[petrvecera]

For us - the analytics are working in the "dev mode" but not in packaged mode. We implemented Mixpanel instead of FB Analytics but would be great to unify our apps under one platform.

I found out this library https://github.com/expo/electron-cookies but it looks like it's very outdated and I am not able to run it.

[haoxi911]

@petrvecera What I am doing is I started a local web server using express.js, then having main window to load index.html from http://localhost:xxx/index.html, then Firebase Analytics works.

const server = app.listen(info.port, '127.0.0.1', () => {

  // the actual port local server is listening on
  info.port = (server?.address() as AddressInfo)?.port;

  // create main window and load contents from local server
  electronApp.whenReady().then(() => restoreOrCreateWindow());

  resolve();
});

// serve static files for renderer process
const path = join(__dirname, '../../renderer/dist');
app.use(express.static(path));

// load index.html to main window
const pageUrl = new URL(`http://localhost:${serverInfo.port}/index.html`).toString();
await browserWindow.loadURL(pageUrl);

[mahnunchik]

Universal Analytics will soon be turned off, but there is still no way to use the Firebase/GA4 module in Node.js...

[will-aira]

Universal Analytics will soon be turned off, but there is still no way to use the Firebase/GA4 module in Node.js...

Where do you see that? When will Universal Analytics not work anymore?

[will-aira]

@haoxi911 Do you mind to provide a full example on this? I am new to Electron app. Thank you.

[haoxi911]

@will-aira Here is the code I am using. Basically, it starts a local express.js server, so that you could have BrowserWindow loading localhost:[port] URL to access the UI.

As you may know, by default, Electron would load the UI via a local path (e.g. C:\xxx\index.html), and it seems the gtag.js in firebase/analytics doesn't like it. Once you load the UI via localhost:[port], gtag.js is not complaining anymore and you should be good to go.

import { BrowserWindow, app as electronApp } from 'electron';
import { join } from 'path';
import type { Application } from 'express';
import type { AddressInfo } from 'net';
const express = require('express');

let myPort = 0; // variable to save the port.

const app: Application = express();
const server = app.listen(0, '127.0.0.1', () => {

  // the actual port has been assigned
  myPort = (server?.address() as AddressInfo)?.port;

  // create main window and load contents from local server
  electronApp.whenReady().then(async () => {

    const browserWindow = new BrowserWindow({    
      width: 1000, 
      height: 696,
      webPreferences: {
        preload: join(__dirname, '../../preload/dist/index.js'), // path to your preload script
      },
    });

    browserWindow.on('ready-to-show', () => {
      browserWindow.show();
    });

    const pageUrl = new URL(`http://localhost:${myPort}/index.html`).toString();
    try {
      await browserWindow.loadURL(pageUrl);
    } catch (error) {
      // error handling here
    }

  });

}).on('error', (e) => {
  // error handling here
});

// this is for serving the renderer layer via HTTP
const path = join(__dirname, '../../renderer/dist');
app.use(express.static(path));

[will-aira]

@haoxi911 thank you, I will give it a try.