firebase / firebase-js-sdk

Firebase Javascript SDK
https://firebase.google.com/docs/web/setup
Other
4.82k stars 884 forks source link

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

Open marcoancona opened 4 years ago

marcoancona commented 4 years ago

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 commented 4 years ago

I found a few problems with this issue:

Feiyang1 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

Nope


From: Nikolaj Selvik notifications@github.com Sent: Saturday, February 8, 2020 10:55:45 AM To: firebase/firebase-js-sdk firebase-js-sdk@noreply.github.com Cc: Sharma, Rahul RahulDutt.Sharma@monotype.com; Manual manual@noreply.github.com Subject: Re: [firebase/firebase-js-sdk] Firebase Analytics (Web) does not work on Electron (#2243)

@Feiyang1https://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 GitHubhttps://protect-us.mimecast.com/s/ElKHCR60nPh6BW4cP6tg4, or unsubscribehttps://protect-us.mimecast.com/s/iyKVCVOkr7TJ9yqtJjvEM.

hsubox76 commented 4 years ago

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 commented 4 years ago

Thanks for this information.

I will try contacting them


From: Christina Holland notifications@github.com Sent: Wednesday, February 12, 2020 3:27:04 AM To: firebase/firebase-js-sdk firebase-js-sdk@noreply.github.com Cc: Sharma, Rahul RahulDutt.Sharma@monotype.com; Manual manual@noreply.github.com 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 libraryhttps://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 GitHubhttps://protect-us.mimecast.com/s/bUR7C1wnqGSgEVDcpRce2, or unsubscribehttps://protect-us.mimecast.com/s/5IaUC2kor7trEMJs2D13U.

marcoancona commented 4 years ago

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 commented 4 years ago

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 notifications@github.com Sent: Wednesday, February 12, 2020 5:40:18 AM To: firebase/firebase-js-sdk firebase-js-sdk@noreply.github.com Cc: Sharma, Rahul RahulDutt.Sharma@monotype.com; Manual manual@noreply.github.com 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 GitHubhttps://protect-us.mimecast.com/s/WlKwCn5oXgswmZxfJKtpc, or unsubscribehttps://protect-us.mimecast.com/s/yBOFCo20Kjh9vV8SV31dC.

membla commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

hsubox76 commented 4 years ago

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 commented 4 years ago

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?

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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

will-aira commented 1 month ago

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 commented 1 month ago

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

haoxi911 commented 1 month ago

@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 commented 1 month ago

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