Setting up Firebase Analytics in a GatsbyJS application

ReactJS|MAY 1, 2024|21 VIEWS
With Gatsby being a Static Site Generator, adding functionality that uses browser globals can break the Node.js build step. This is the case for Firebase Analytics, so adding it to a Gatsby project can be a little tricky. In this article, I’ll show you how to add Firebase Analytics to a Gatsby project the correct way.
Table of Contents
Dependencies
Firebase Setup
Gatsby Setup
Usage

Dependencies

To get started, Install Firebase and Gatsby plugin for firebase.

npm install firebase gatsby-plugin-firebase

or

yarn add firebase gatsby-plugin-firebase

Firebase Setup

Head over to console.firebase.google.com and create a new project if you haven’t already. Make sure you enable Analytics. Next up, add Firebase as a web app. Once the app is set up, you can head over to the project’s settings to see the Firebase web configuration. You will need these values for the next step.

Gatsby Setup

For the next step, You’ll need to set up the environment variable. We start by creating the file .env where we will be storing our environment variables. Remember to add this file to .gitignore if you don’t want your variables to be tracked by git.

GATSBY_FIREBASE_API_KEY=...
GATSBY_FIREBASE_AUTH_DOMAIN=...
GATSBY_FIREBASE_DATABASE_URL=...
GATSBY_FIREBASE_PROJECT_ID=...
GATSBY_FIREBASE_STORAGE_BUCKET=...
GATSBY_FIREBASE_MESSAGING_SENDER_ID=...
GATSBY_FIREBASE_APP_ID=...
GATSBY_FIREBASE_MEASUREMENT_ID=...

The next step is to register the Gatsby plugin In the gatsby-config.js file.

require("dotenv").config();

module.exports = {
  plugins: [
    ...otherPlugins,
    {
      resolve: "gatsby-plugin-firebase",
      options: {
        features: {
          auth: false,
          database: false,
          firestore: false,
          storage: false,
          messaging: false,
          functions: false,
          performance: false,
          analytics: true,
        },
        credentials: {
          apiKey: process.env.GATSBY_FIREBASE_API_KEY,
          authDomain: process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
          databaseURL: process.env.GATSBY_FIREBASE_DATABASE_URL,
          projectId: process.env.GATSBY_FIREBASE_PROJECT_ID,
          storageBucket: process.env.GATSBY_FIREBASE_STORAGE_BUCKET,
          messagingSenderId: process.env.GATSBY_FIREBASE_MESSAGING_SENDER_ID,
          appId: process.env.GATSBY_FIREBASE_APP_ID,
          measurementId: process.env.GATSBY_FIREBASE_MEASUREMENT_ID,
        },
      },
    },
  ],
};

Next up, add the following import to both gatsby-browser.js

import firebase from "gatsby-plugin-firebase";
import "firebase/analytics";

export const onClientEntry = () => {
  firebase.analytics();
};

Usage

Now that your Firebase Analytics is properly set up, you can start using it. This is an example of how you can track a page visit:

import React, { useEffect } from "react";
import firebase from "gatsby-plugin-firebase";

const Home = () => {
  useEffect(() => {
    firebase.analytics().setAnalyticsCollectionEnabled(true);
  }, []);

  return (
    <section>
      <h1>Hello, Firebase!</h1>
    </section>
  );
};

export default Home;