Adding Google Analytics to your Next.js and React Project

December 26, 2020

Rafael Segat

We'll be using the utility npm package called react-ga that abstracts the Google Analytics library. With this library, we can add the script to each of our Next.js pages and instruct the Google Analytics JavaScript API to run on each page load.

Before moving forward, you should have a Next.js application created and a Google Analytics account for your website.

Let's get started!

Install React-GA Npm Package
Add React-GA Logic
Add Analytics Functions to a Layout.js Component
Using The Layout.js File

Install React-GA NPM Package

First, we need to add the react-ga NPM package to our project. This package will do a lot of the heavy lifting for us.

You can add it with one of the below commands (NPM or Yarn):

NPM:

npm install react-ga --save

Yarn:

yarn add react-ga

The react-ga package will now be added to your project's dependencies.

Add React-GA Logic

Now we need to create an abstraction layer on top of react-ga to put all our tracking logic in one place.

Create a new file called GoogleAnalytics.tsx in the components directory of your project:

Add this code to the file:

GoogleAnalytics.tsx

import ReactGA from "react-ga"

export const initGA = () => {
  ReactGA.initialize("UA-9881791-29")
}

export const logPageView = () => {
  ReactGA.set({ page: window.location.pathname })
  ReactGA.pageview(window.location.pathname)
}

We added a few things hear, so let's go through each piece.

First, we imported the react-ga package we installed in the previous step.

Then, we created two API functions we will export and use in our React components:

initGA: initializes ReactGA with the initGA function using the unique Google Analytics id. If you haven't already, make sure you paste your site's unique id into that section.
logPageView: called on each pageview and tells the Google Analytics script to collect the data.

We can now import these functions to our React components.

Add Analytics Functions to a Layout.tsx Component

If you don't have a layout.tsx file in your /components directory, create one now:

Then, add this code to the file (or add code if you already have a pre-existing file):

Layout.js

import Head from "next/head";
import Navigation from "./Navigation";
import { initGA, logPageView } from "./GoogleAnalytics";
import { useEffect } from "react";

type Props = {
  children: React.ReactNode;
};
export default function Layout({ children }: Props) {
  // componentDidMount
  useEffect(() => {
    initGA()
    logPageView()
  }, []);
  return (
    <div className="root">
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="manifest" href="/site.webmanifest" />
        <link rel="apple-touch-icon" href="/icon.png" />
        <meta name="theme-color" content="#fff" />
      </Head>
      <nav>
        <Navigation />
      </nav>
      <main>{children}</main>
    </div>
  );
}

The key thing we did in this file is import our initGA and logPageView functions we created in the last section and called them in the useEffect lifecycle hook function. This means the Google Analytics code will be ran everytime the Layout component is mounted.

In the render() function, the child components are returned inside the div. All the tracking is done by the Google Analytics JavaScript API using the layouts.js functions and ReactGA NPM package.

Check on Google Analytics

Commit and push all your changes. Then, deploy the new changes and login to your Google Analytics dashboard and go to 'Realtime' menu.

On Realtime you should see at least 1 user active.

rafael-segat-google-analytics-image

Cool! All done!

Table of Contents