Adding Google Analytics to your Next.js project

Adding Google Analytics to your code base is fairly easy. Most of the work is actually setting up Google Tag Manager and Google Analytics outside of your code.

Google Analytics setup

Go to Google Analytics. You'll want to click the Start measuring button like in the image below.

An image showing the Google Analytics start screen.

Create an account name and accept whatever data sharing settings you would like.

An image showing the next screen after clicking the start screen. You can enter your account name here.

For the property, all we need to do is set the name. You can also update the time zone and currency if you need to. The currency is used to attribute real money value back to events if you want to set that up, but for now we're going to ignore it.

An image showing the property creation screen.

Choose your platform type.

An image showing the platform selection screen for a property.

Give your data stream a name and a URL for Google Analytics to watch.

An image showing data stream setup for a property. You can set the name and url of the data stream.

Once we create the web stream, we'll be taken to a screen that shows the details about the web stream. You'll want to grab the Measurement ID, because we'll need it shortly.

An image showing the next screen after you create the data stream. You can get your Measurement ID that we will need later from this screen.

Google Tag Manager setup

Go to Google Tag Manager. Once you're here, you will need to create an account like the image below.

An image showing a Create Account button for Google Tag Manager.

Add an Account name and a Container name. Think of the account name as the folder for a collection of websites and the container a website within this folder. Then select a target platform for your container.

An image showing the new account screen. You can add your account name and your container name here.

On the left side of the UI. Click Tags. Once you're here, create a new tag.

An image showing how to go to create new tags in Google tag manager.

Choose the tag type Google Analytics.

An image showing how to choose a tag type for Google Analytics.

Choose Google tag.

An image showing how to create the Google Analytics tag from this type.

Now you want to name your tag, add the Measurement ID to the Tag ID in this tag and set the Trigger to be on all pages. Save the tag. Later on, if you decide to do more than just page views you can set up custom events and target specific pages.

An image showing the additional setup for creating a Google Analytics tag.

Next, look top right. You'll notice a Submit button and some text that says you have workspace changes. Before the tag starts to work you need to publish these changes. Click Submit.

An image showing the user where to find the tag submit button on the page.

On the publish screen, add a name for the version and a description. Click Publish. Your new tag or tags will now be live.

An image showing the user how to publish the tag or tags you just created.

The last step is grabbing the Google Tag Manager ID, which can be found next to the workspace changes like the image below.

An image showing the user where to find their Google Tag Manager ID.

Now all we need to do is add the ID from Google Tag Manager back into our code. The Google Tag Manager ID will go into gtmId.

Library imports

Let's import the third party library provided by Next.js. You can read more about it here.

npm install @next/third-parties@latest next@latest

Code setup

From here all we need to do is add Google Tag Manager to our layout.tsx file.

We'll need to import the GoogleTagManager component from the third party library and then include it within the html tag. Then add the Google Tag Manager ID to the gtmId attribute for the component.

import { GoogleTagManager } from '@next/third-parties/google';

...

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang='en'>
    <GoogleTagManager gtmId='GTM-XYZ' />
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

And that is basically it. You'll need to wait 1-2 days before you start seeing data in Google Analytics.

I would also like to note that you can add Google Analytics directly to Next.js via the third imports. However, I would recommend using Google Tag Manager. If you ever decide to add more external scripts to your site you can add them as tags to Google Tag Manager instead of cluttering up your code base.