How to add google analytics to your Next.js application

Prefer to watch a video? This tutorial is now available on YouTube.

To add google analytics to your Next.js application, first add a new environment variable. You may also need to add this variable where you are hosting your site.

GOOGLE_ANALYTICS="<your ga tag goes here>"

Then, either in your _app.js, or if you have one, _document.js file, add the following in the Next.js Head tag:

<Script
  strategy="lazyOnload"
  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS}`}
/>

<Script id="ga-script" strategy="lazyOnload">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '${process.env.GOOGLE_ANALYTICS}', {
      page_path: window.location.pathname,
    });
        `}
</Script>

And there you have it, you have added google analytics to your Next.js application!