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 🤩

Helpful?

If you think this is helpful 🎈
Don't keep it to yourself 🙊

Share it with your lovely followers at twitter 🗽

Feedback!

powered by  EventsCounter.com
lets connect viatwitter