Google analytics on my React app with firebase SDK

Question

I used Google Analytics a lot for many sites...

I'm just releasing a first app with Firebase (Firestore + Firebase SDK with reactjs).

Then, I activated GA from my Firebase dashboard... but I cannot see any activity !

I probably need not to add plugin like "autotrack" ?

import 'autotrack';
ga('create', 'UA-XXXXX-Y', 'auto');

It's not clear because, it's impossible to find out the track ID (UA-XXXXX-Y) from my dashboard !

Do I really need it ? Where can I find it ?

Answer 1

I did't correctly initialized Analytics... With firebase it's not a track ID but a measurementId

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

app.initializeApp({
   //other config
  measurementId : process.env.REACT_APP_MEASUREMENT_ID,
  appId : process.env.REACT_APP_DEV_ID
})

//put inside your constructor
app.analytics()

This will solve the following error:

Error: firebase__WEBPACK_IMPORTED_MODULE_8___default.a.analytics is not a function react

Documentation : https://firebase.google.com/docs/analytics/get-started?platform=web

Answer 2

The previous answer should be corrected like this:

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

app.initializeApp({
   //other config
  measurementId : process.env.REACT_APP_MEASUREMENT_ID,
  appId : process.env.REACT_APP_DEV_ID
})

//put inside your constructor
app.analytics()

This will solve the following error:

Error: firebase__WEBPACK_IMPORTED_MODULE_8___default.a.analytics is not a function react

Answer 3

My issue was the same as listed above:

Error: firebase__WEBPACK_IMPORTED_MODULE_8___default.a.analytics is not a function react

But the resolution was that I forgot to import the analytics module: import 'firebase/analytics';

Answer 4

If you are using Typescript:

// On index.tsx
import { initializeApp } from 'firebase/app';
import { initializeAnalytics } from 'firebase/analytics';

const firebaseConfig = {
 ... your config object ...
};

const app = initializeApp(firebaseConfig);
initializeAnalytics(app);

Answer 5

Firebase gone through a lot of new updates. Change imports like this;

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/analytics';