FR: Firebase Analytics support in Expo

[robbie-c]

Update April 2020

Go read this: https://blog.expo.io/using-firebase-analytics-with-expo-222ca84e4d33

Original Post:

[REQUIRED] Describe your environment

• Expo version: 33
• Firebase SDK version: 7.1.0
• Firebase Product: analytics

[REQUIRED] Describe the problem

Steps to reproduce:

expo.io

Adding the JS code below to add firebase analytics does not work in expo

import * as firebase from "firebase";
import "firebase/analytics";
export const firebaseApp = firebase.initializeApp({
  // config here
});
export const firebaseAnalytics = firebaseApp.analytics();

Adding some hacks allows it to work a bit better. (The browser polyfill because it tries to add a script tag to head, and the IndexedDB stuff because it assumes that IDBIndex exists. Some of this stuff works in debug mode in expo because the JS runs in Chrome on the host, which makes this particularly annoying to reproduce)

import "@expo/browser-polyfill";
import { Platform } from "react-native";
import { SQLite } from "expo-sqlite";
import * as firebase from "firebase";

if (Platform.OS !== "web") {
  document.head = document.body;
  Object.getPrototypeOf(document.head).setAttribute = document.head.setAttributeNS;
  document.head.setAttribute = document.head.setAttributeNS;

  // IndexedDB hackery begins
  Object.setPrototypeOf =
    Object.setPrototypeOf ||
    function(obj, proto) {
      obj.__proto__ = proto;
      return obj;
    };
  if (global.window.navigator.userAgent === undefined) {
    global.window.navigator = { ...global.window.navigator, userAgent: "" };
  }
  global.window.openDatabase = SQLite.openDatabase;
  require("indexeddbshim");
  global.shimIndexedDB.__setConfig({ checkOrigin: false });
}

require("firebase/analytics");
export const firebaseApp = firebase.initializeApp({
  // config
});
export const firebaseAnalytics = firebaseApp.analytics();

But when I log an analytics event I get the following error:

[TransactionInactiveError: A request was placed against a transaction which is currently not active, or which is finished]

This is as far as I got before giving up.

This would be incredibly useful to have working. Expo is hugely popular, and https://github.com/react-community/create-react-native-app is archived and now points to expo. Right now the only way to use Firebase Analytics with react-native is to eject, which is orders of magnitude more development effort to work with that the expo managed workflow for small teams / startups.

[adc91]

I'm with the same problem. I developed an application for a client entirely with Expo in the same version of the SDK you mentioned and I need to install Firebase to follow up and later use analysis and I come to find out that we have to expel only from expo.

That was not going to be a problem if the push notifications were not entirely based on Expo :(

Hopefully add support for this functionality in Expo as it would be of great help.

[robbie-c]

I'd recommend not ejecting if your only concern is using Firebase. Life inside a managed expo app is really nice compared to ejecting. My project has gone from managed -> ejected -> managed, because managed life is just so much more convenient.

Expo has first-party support for segment analytics, and if you're a startup you can get it for free for 2 years https://segment.com/industry/startups/

See here for the docs https://docs.expo.io/versions/latest/sdk/segment/

Looks like you can connect segment to firebase as well, although I haven't tried it yet. I'd rather have used firebase from the beginning but until there's library support it's just a massive hassle, and having tried it I'd advise against it for RN apps for the time being. With that said it's obviously something that Google are devoting a lot of time and energy to, so I hope this comment becomes out of date soon.

[Nicosan-K]

I'm with the same problem too. I developed an application for entirely with Expo. The project has also a web Application that is configured with Google Analytics. Using Segment or other tools, will split the analytics data in to places.

I have attempted to configure in a Managed expo React Native application. When importing firebase.analytics(), I get same error. "Can't find variable: IDBIndex"

Support for Expo would be greatly appreciated.

The has been progress with: https://firebase.google.com/support/release-notes/js#version_700_-_september_26_2019, "Added support for Analytics on web apps".

Is the Node support in the roadmap?

[smontlouis]

Same issue.

I'm using Firestore, Firebase storage, Firebase Auth, but can't use analytics.
I'm using expo-analytics which is using Google analytics for web. Not the best solution, but it's working great so far ( real time users, country, os, etc)

[orinamio]

Same issue! Sigh. Hopefully, this can be fixed.

[smuxx]

Same issue when importing firebase/messaging... is there a workaround or expo doesn't support cloud messaging yet?

[Flaxinnovations]

We are using FCM for Push Notifications (https://docs.expo.io/versions/latest/guides/using-fcm/) which does give you some Firebase Analytics (default set of events such as first_open, os_update, etc.)

This only works for Android so getting the firebase-js-sdk compatible with iOS + Expo would help a lot.

[Feiyang1]

FirebaseAnalytics For Web doesn't work in non browser environments(including React native in general) because it relies on gtag.js which requires dom and cookie access for session and user management.
Unless gtag.js changes to support non browser environments, but I'm skeptical that it will happen anytime soon, or ever.

As an alternative, you can take a look at react-native-firebase - https://rnfirebase.io/
It's a community driven project that provides a javascript API into the native Firebase SDKs including Analytics.

Hope it helps!

[robbie-c]

Hi @Feiyang1 thanks for your response!

Unfortunately https://rnfirebase.io/ https://github.com/invertase/react-native-firebase is not relevant for Expo projects, as it requires native iOS or Android libraries to work.

I know the Expo team have made efforts in the past to integrate it, but they didn't have much success and that work is now deprecated https://blog.expo.io/using-firebase-in-expo-e13844061832 . The official advice is now to use the JS SDK, which as you know doesn't work in a non-browser environment for Analytics.

Obviously I would love for this to work in my own project, but also this seems like it's affecting quite a few people. Expo is the default quickstart for React-Native https://facebook.github.io/react-native/docs/getting-started and GitHub reckons it's used in 100k projects they host https://github.com/expo/expo (which is a third of all of the 290k reported for RN https://github.com/facebook/react-native )

[yuzhakovvv]

@robbie-c we were looking for a way to integrate Firebase Analytics into Expo App with SDK 33 as well. After some digging we have a solution in Expo that doesn't require any thirdparty packages.

Preparations:

1. Register in Firebase Console
2. Create a Project

Android:
Works for SDK 33 & SDK 34

1. In Firebase Console select Android App setup
2. On one of the steps it will generate a google-services.json file
3. Download this file and put into your Project directory
4. Add it into your app.json config to android.googleServicesFile: "./google-services.json" (Source: Expo Docs - https://docs.expo.io/versions/v34.0.0/workflow/configuration/#android)
5. Make expo build:android
6. Download .apk and open it on an Android smartphone
7. Test that Android section in Firebase Console shows data

NOTE: Originally we did this for Expo Push Notifications (https://docs.expo.io/versions/v34.0.0/guides/using-fcm/#client-setup), so Analytics was already there

iOS:
Works for SDK 34, doesn't for SDK 33 (!!!)

1. In Firebase Console select iOS App setup
2. On one of the steps it will generate a GoogleService-Info.plist file
3. Download this file and put into your Project directory
4. Add it into your app.json config to ios.googleServicesFile: "./GoogleService-Info.plist" (Source: Not Documented Expo Field - https://forums.expo.io/t/add-firebase-sdk-analytics-googleservice-info-plist-ios/28530)
5. Make expo build:ios
6. Download .ipa and upload it into TestFlight and open it on an iOS smartphone
7. Test that iOS section in Firebase Console shows data

NOTE: ios.googleServicesFile field is not documented in Expo Docs, but in SDK 34 it works great. So we had to update from SDK 33 to 34. Not sure about next SDKs, but I've created an issue in Expo: expo/expo#6379

[okeybond]

@robbie-c we were looking for a way to integrate Firebase Analytics into Expo App with SDK 33 as well. After some digging we have a solution in Expo that doesn't require any thirdparty packages.

Preparations:

1. Register in Firebase Console
2. Create a Project

Android:
Works for SDK 33 & SDK 34

1. In Firebase Console select Android App setup
2. On one of the steps it will generate a google-services.json file
3. Download this file and put into your Project directory
4. Add it into your app.json config to android.googleServicesFile: "./google-services.json" (Source: Expo Docs - https://docs.expo.io/versions/v34.0.0/workflow/configuration/#android)
5. Make expo build:android
6. Download .apk and open it on an Android smartphone
7. Test that Android section in Firebase Console shows data

NOTE: Originally we did this for Expo Push Notifications (https://docs.expo.io/versions/v34.0.0/guides/using-fcm/#client-setup), so Analytics was already there

iOS:
Works for SDK 34, doesn't for SDK 33 (!!!)

1. In Firebase Console select iOS App setup
2. On one of the steps it will generate a GoogleService-Info.plist file
3. Download this file and put into your Project directory
4. Add it into your app.json config to ios.googleServicesFile: "./GoogleService-Info.plist" (Source: Not Documented Expo Field - https://forums.expo.io/t/add-firebase-sdk-analytics-googleservice-info-plist-ios/28530)
5. Make expo build:ios
6. Download .ipa and upload it into TestFlight and open it on an iOS smartphone
7. Test that iOS section in Firebase Console shows data

NOTE: ios.googleServicesFile field is not documented in Expo Docs, but in SDK 34 it works great. So we had to update from SDK 33 to 34. Not sure about next SDKs, but I've created an issue in Expo: expo/expo#6379

Thanks, @yuzhakovvv for this - I get an issue when using this, however. My setup is
`import * as firebase from 'firebase/app';
import 'firebase/analytics';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/database';
import 'firebase/storage';

const firebaseConfig = {
apiKey: "XXXXX",
authDomain: "XXX",
databaseURL: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX",
measurementId: "XXX"
};

firebase.initializeApp(firebaseConfig);

export default firebase;`

Then

import * as firebase from "firebase"; try { firebase.analytics().logEvent('we_are_here'); } catch (e) { console.log(e) }
I am getting
`document is not defined

Stack trace:
node_modules/@firebase/analytics/dist/index.cjs.js:222:17 in insertScriptTag
node_modules/@firebase/analytics/dist/index.cjs.js:464:12 in Object.factory [as analytics]
node_modules/@firebase/app/dist/index.rn.cjs.js:190:66 in FirebaseAppImpl._getService
node_modules/@firebase/app/dist/index.rn.cjs.js:457:34 in FirebaseAppImpl.firebaseAppImpl. [as analytics]
node_modules/@firebase/app/dist/index.rn.cjs.js:436:19 in Object.serviceNamespace [as analytics]
container/main/home/HomePage.js:133:21 in HomePage.componentDidMount$
node_modules/regenerator-runtime/runtime.js:45:39 in tryCatch
node_modules/regenerator-runtime/runtime.js:271:21 in Generator.invoke [as _invoke]`

What am I doing wrong, please?

[VallVall]

@robbie-c we were looking for a way to integrate Firebase Analytics into Expo App with SDK 33 as well. After some digging we have a solution in Expo that doesn't require any thirdparty packages.
Preparations:

1. Register in Firebase Console
2. Create a Project

Android:
Works for SDK 33 & SDK 34

1. In Firebase Console select Android App setup
2. On one of the steps it will generate a google-services.json file
3. Download this file and put into your Project directory
4. Add it into your app.json config to android.googleServicesFile: "./google-services.json" (Source: Expo Docs - https://docs.expo.io/versions/v34.0.0/workflow/configuration/#android)
5. Make expo build:android
6. Download .apk and open it on an Android smartphone
7. Test that Android section in Firebase Console shows data

NOTE: Originally we did this for Expo Push Notifications (https://docs.expo.io/versions/v34.0.0/guides/using-fcm/#client-setup), so Analytics was already there
iOS:
Works for SDK 34, doesn't for SDK 33 (!!!)

1. In Firebase Console select iOS App setup
2. On one of the steps it will generate a GoogleService-Info.plist file
3. Download this file and put into your Project directory
4. Add it into your app.json config to ios.googleServicesFile: "./GoogleService-Info.plist" (Source: Not Documented Expo Field - https://forums.expo.io/t/add-firebase-sdk-analytics-googleservice-info-plist-ios/28530)
5. Make expo build:ios
6. Download .ipa and upload it into TestFlight and open it on an iOS smartphone
7. Test that iOS section in Firebase Console shows data

NOTE: ios.googleServicesFile field is not documented in Expo Docs, but in SDK 34 it works great. So we had to update from SDK 33 to 34. Not sure about next SDKs, but I've created an issue in Expo: expo/expo#6379

Thanks, @yuzhakovvv for this - I get an issue when using this, however. My setup is
`import * as firebase from 'firebase/app';
import 'firebase/analytics';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/database';
import 'firebase/storage';

const firebaseConfig = {
apiKey: "XXXXX",
authDomain: "XXX",
databaseURL: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX",
measurementId: "XXX"
};

firebase.initializeApp(firebaseConfig);

export default firebase;`

Then

import * as firebase from "firebase"; try { firebase.analytics().logEvent('we_are_here'); } catch (e) { console.log(e) }
I am getting
`document is not defined

Stack trace:
node_modules/@firebase/analytics/dist/index.cjs.js:222:17 in insertScriptTag
node_modules/@firebase/analytics/dist/index.cjs.js:464:12 in Object.factory [as analytics]
node_modules/@firebase/app/dist/index.rn.cjs.js:190:66 in FirebaseAppImpl._getService
node_modules/@firebase/app/dist/index.rn.cjs.js:457:34 in FirebaseAppImpl.firebaseAppImpl. [as analytics]
node_modules/@firebase/app/dist/index.rn.cjs.js:436:19 in Object.serviceNamespace [as analytics]
container/main/home/HomePage.js:133:21 in HomePage.componentDidMount$
node_modules/regenerator-runtime/runtime.js:45:39 in tryCatch
node_modules/regenerator-runtime/runtime.js:271:21 in Generator.invoke [as _invoke]`

What am I doing wrong, please?

we didn’t succeed in connecting analytics in this way, the way about which @yuzhakovvv told is working for 34+

[okeybond]

@VallVall i am using expo version 35, please can you inform me what i am doing wrong in the snippet?

[VallVall]

@VallVall i am using expo version 35, please can you inform me what i am doing wrong in the snippet?

delete all your code with firebase

just add .plist file in project and add this in app.json => expo.ios.googleServicesFile: "path to .plist file"

check in development mode if you have any errors, then the application is assembled, analytics should work when the application starts

this is works for analytics for ios

for android: app.json => expo.android.googleServicesFile: "path to .json file"

[okeybond]

@VallVall thanks, how do you log custom events though?

[VallVall]

@VallVall thanks, how do you log custom events though?

we had the task of tracking how many users are visiting the application, how we understand the files that are needed for googleServicesFile cause a function inside the native code that sends a request to the server about analytics

we don't log anything

[cockycarrillo]

@VallVall i am using expo version 35, please can you inform me what i am doing wrong in the snippet?

delete all your code with firebase

just add .plist file in project and add this in app.json => expo.ios.googleServicesFile: "path to .plist file"

check in development mode if you have any errors, then the application is assembled, analytics should work when the application starts

this is works for analytics for ios

for android: app.json => expo.android.googleServicesFile: "path to .json file"

It´s works but, how can i put the ecommerce track events o custom events. If Some one can tell me.
it shows info but i cant customize the track.

[TwistedMinda]

Still not working in npm firebase 7.5.2
Getting error: "Can't find variable: IDBIndex" when trying to import "firebase/analytics"

So it won't be possible to run firebase.analytics().logEvent() from Expo?
Should we use expo-analytics to handle events instead?

[alxhotel]

Still not working... :(

[NRKirby]

@yuzhakovvv

I'm working through the steps you outlined on 26 Nov 2019 although I'm not clear on how to complete setting this up in Firebase console. Step 3 is Add Firebase SDK and this looks geared toward React Native

Can you, or anyone else who's managed to get this working, advise what I should do at this step please?

@VallVall

[iragsdale]

I am running into similar problems, would be great if there were a clear solution. Thanks!

[TwistedMinda]

This is not possible to use events logging from Firebase analytics when using Expo. Expo team is working on it, please refer to : https://expo.canny.io/feature-requests/p/support-for-firebase-analytics

[chrisamador]

In case anyone finds this thread but is having issues on web. For our Gatsby SSR web app, we were able to fix this issue by doing a dynamic import of the package.

if (typeof window !== "undefined") {
  import(/* webpackChunkName: "firebase-analytics" */ "@firebase/analytics");
}

instead of

import "@firebase/analytics";

[TwistedMinda]

In case anyone finds this thread but is having issues on web. For our Gatsby SSR web app, we were able to fix this issue by doing a dynamic import of the package.

if (typeof window !== "undefined") {
  import(/* webpackChunkName: "firebase-analytics" */ "@firebase/analytics");
}

instead of

import "@firebase/analytics";

Who would have problem with importing it on web ? No one. The problem only comes when you use Expo.

[chrisamador]

In case anyone finds this thread but is having issues on web. For our Gatsby SSR web app, we were able to fix this issue by doing a dynamic import of the package.

if (typeof window !== "undefined") {
  import(/* webpackChunkName: "firebase-analytics" */ "@firebase/analytics");
}

instead of

import "@firebase/analytics";

Who would have problem with importing it on web ? No one. The problem only comes when you use Expo.

Server side rendering a web application will cause this problem to happen as well. We ran into it, it is how we found this thread.

[cemo]

I think in 3-4 days, hope today, expo will be released. New release supports firebase/analytics.

[felipecruz91]

Hi @cemo !

It's great to hear that Firebase Analytics is coming to the new Expo SDK version :)

So... I guess that explains why I have the following error if I try to use Firebase Analytics?

[Unhandled promise rejection: Error: You attempted to use a firebase module that's not installed on your Android project]by calling firebase.app().

[adriaanbalt]

Update on this being added?

[cemo]

https://blog.expo.io/expo-sdk-37-is-now-available-dd5770f066a6 :)

It is released.

Here is the related firebase post

https://blog.expo.io/using-firebase-analytics-with-expo-222ca84e4d33

This issue can be closed.

[AurangsEmpire]

Yes Use https://blog.expo.io/using-firebase-analytics-with-expo-222ca84e4d33

[yuzhakovvv]

@NRKirby @iragsdale just skip this step

[actuallymentor]

This issue can be closed.

I'm not so sure about that. Many developers are using the js based firebase npm package and want to be able to:

import  firebase from 'firebase/app'
import 'firebase/analytics'
const app = firebase.initializeApp( {} )
app.analytics()

The SDK v37 method is a great start, but people are landing here because of the IDBIndex error.

I'm not sure if full js based support is desirable or on the road map at all though.

[gpbaculio]

not working on sdk 37 on testflight, localhost works though