Integrating Firebase Analytics with a React Web Application

Question

I've inherited a web application that's been built with React and already uses the Firebase SDK. I have been asked to add Firebase Analytics to the project, but I can't find any documentation to describe how you do it in a React web application.

I can see the following are defined in the package.json file;

"filestack-js": "^3.14.0",
"filestack-react": "^3.1.0",
"firebase": "^7.14.2",
"firebase-tools": "^8.4.1",

and there's some Firebase configuration in the .env files of the project, to which I've added the FIREBASE_MEASUREMENT_ID, see below;

REACT_APP_HTML_TITLE="sdfsdfsdf"
REACT_APP_FIREBASE_API_KEY="Asdfsdfsdf"
REACT_APP_FIREBASE_AUTH_DOMAIN="sdfsdfsdf"
REACT_APP_FIREBASE_DATABASE_URL="sdfsdfsdf"
REACT_APP_FIREBASE_PROJECT_ID="sdfsdfsdf"
REACT_APP_FIREBASE_STORAGE_BUCKET="sdfsdfsdf"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="sdfsdfsdf"
REACT_APP_FIREBASE_APP_ID="sdfsdf"
REACT_APP_FIREBASE_MEASUREMENT_ID="G-sdfsdfsdf"

Is there anything I need to do, or should the Firebase SDK automatically handle setting up Analytics in the app?

Answer 1

You need to initialize analytics in your firebase config file where you initialize Firebase

  import firebase from 'firebase/app'
  import 'firebase/firestore'
  import 'firebase/auth'
  import 'firebase/storage'
  import 'firebase/analytics'
  import 'firebase/functions'

  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics()

  export default firebase

Note that you need to import analytics from Firebase:

  import 'firebase/analytics'

And initialize it like this:

 firebase.analytics()

You only need to do this once inside firebase config file and the only package you need in package.json is firebase which you already have:

"firebase": "^7.14.2"