Site icon CodeARIV

How to Add Google Analytics to a Next.js website

Syamlal CM

We know how important Analytics data is for the growth of a business or website. Let’s have a look at the ways to add Google Analytics to a Next.js website.

Prerequisites

To continue with this article, you must have basic knowledge of the Next.js framework and Google Analytics.

What we will learn

Here in this article, we will learn:-

  1. Setup a Google Analytics account for our website
  2. Creating a _document.js file
  3. Add code to track events

Setup a Google Analytics account for our website

We can easily set up a Google Analytics account for our website with the URL below.

https://analytics.google.com/analytics/web/#/a212549130p293139592/admin/account/create

After setting up, we will get a code to paste inside the <head> section of our website.

Just copy the MEASUREMENT ID (G-123456789) from this code.

Create a _document.js file in our Next.js app

Inside the pages directory, create a file _document.js and copy the code below. Note that you need to replace the MEASUREMENT ID with yours.

// pages/_document.js

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/icon?family=Material+Icons"
          />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />

          <script
            async
            src="https://www.googletagmanager.com/gtag/js?id=G-123456789"
          ></script>

          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-123456789', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

This will inject Google Analytics code into our Next.js website.

Add the code to track events

Now add some code inside our pages/_app.js file to track the events. So that the complete _app.js fie looks the same as below.

// pages/_app.js

import { useEffect } from "react";
import "../styles/globals.css";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      window.gtag("config", "G-123456789", {
        page_path: url,
      });
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

  return (
    <div>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

Test the working

Now we can see that Google Analytics is tracking the pageviews on our website.

Summary

Here we are going to end the quick guide to add Google Analytics to a Next.js website. We injected the Google analytics tracking code, added code to track custom events, and tested.

Exit mobile version