Add Google Analytics to a Next.js & React Website
Introduction
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!
Table of Contents
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.js in the components directory of your project:
$ cd components && touch googleAnalytics.js
This file will hold a couple of functions that we'll import directly into our components. We are adding them to their own file to make our code more organized and easier to manage.
Add this code to the file:
// googleAnalytics.js
 
import ReactGA from "react-ga"
 
export const initGA = () => {
  ReactGA.initialize("UA-xxxxxxxxx-1")
}
 
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.
Advertisement
Get $50 in Free Credit for 30 Days!
Try the simplest cloud server platform for developers & teams.
Sign Up Now
Add Analytics Functions to a Layout Component
If you don't have a layout.js file in your /components directory, create one now:
$ cd components && touch layout.js
Then, add this code to the file (or add code if you already have a pre-existing file):
// layout.js
 
import React, { Component } from "react"
 
import { initGA, logPageView } from "./googleAnalytics.js"
 
export default class Layout extends Component {
  componentDidMount () {
    if (!window.GA_INITIALIZED) {
      initGA()
      window.GA_INITIALIZED = true
    }
    logPageView()
  }
 
  render () {
    return (
      <div>
        {this.props.children}
      </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 componentDidMount() 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.
Using the layout.js File
To use the new layout.js component we created, we need to import it to one of our pages and wrap our page content with it.
For demonstration purposes, create or open a /pages/homepage.js file:
$ cd pages && touch homepage.js
And import the layout.js component and wrap your page content in it. It should look similar to this:
// /pages/homepage.js
 
import React, { Component } from "react"
 
import Layout from "../components/layout.js"
 
export default class extends Component {
  render () {
    return (
      <Layout>
        <div>Homepage content here.</div>
      </Layout>
    )
  }
}
Notice that the page content is wrapped inside the <Layout> component, which holds all the Google Analytics functionality we just built.
Using this setup, all of your pages will load Google Analytics when it's mounted.
Conclusion
If all went well, you should be all set up with getting Google Analytics configured with your Next.js and React application!
Let us know what you think in the comments section and happy coding!