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:

Command Copy npm install react-ga --save

Yarn:

Command Copy 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:

Command Copy 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 Copy 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 .

: initializes with the function using the unique Google Analytics id. . 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.js Component

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

Command Copy 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 Copy 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:

Command Copy 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 Copy 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!

If you're looking for something cool to build using the Next.js framework, we have a free course that walks you through building a coding blog with a custom CMS (Content Management System).

In the course, additional things like connecting your Next.js application to a REST API, getting your website indexed by search engines, and configuring Google Analytics are covered.

Thanks for reading and happy coding!