15. Firebase Analytics

Today, we'll add Firebase Analytics to our blog.
For this we'll use firebase and gatsby-plugin-firebase.

Install

Install the plugin using below command

npm install firebase gatsby-plugin-firebase

Configure

• Add the following configuration under plugins list in gatsby-config.js file.

{
    resolve: "gatsby-plugin-firebase",
    options: { 
    credentials: {
        apiKey: process.env.REACT_APP_FIREBASE_WEB_API_KEY,
        // authDomain: "<auth-domain>",
        // databaseURL: "<db-url>",
        projectId: process.env.REACT_APP_FIREBASE_WEB_PROJECT_ID,
        // storageBucket: "<storage-bucket>",
        // messagingSenderId: "<msg-sender-id>",
        appId: process.env.REACT_APP_FIREBASE_WEB_APP_ID,
        // measurementId: "<-measurement-id>"
      }
    }
},

Because i'll be using firebase only for analytics purpose for now, therefore i've commented out irrelevant options.

If you notice above, we are reading the firebase config values from the environment.
As per Gatsby docs, variables defined in the .env.* files won't be available in Node.js scripts. So i added below to gatsby-config.js to access them while configuring firebase plugin.

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

• Add the following import to gatsby-browser.js in project root

import "firebase/analytics" 

Tracking Events

For tracking, I've added below to the Layout.js

import firebase from "gatsby-plugin-firebase"

useEffect(() => {
    firebase
      .analytics()
      .setCurrentScreen(window.location.pathname)
    firebase
      .analytics()
      .logEvent(title)
  }, []);

---

Following are the GitHub commits which represents what we've done in this post 🤩

• commit 1 - Adds firebase analytics