Google Tag Manager in Next.js 14 Tutorial

Google Tag Manager (GTM) is a powerful tool used by marketers and website administrators to manage and deploy various tags on their websites without having to manually edit the website code each time. Tags are snippets of code or tracking pixels that are added to a website to collect data and send it to third-party tools, such as analytics platforms, advertising networks, or marketing automation systems.

Integrating Google Tag Manager (GTM) into a Next.js project involves adding components which can be imported from the @next/third-parties library developed by Vercel.

Install next/third-parties library

We will need to install the next/third-parties library, which offers a collection of components within which we can find the Google Tag Manager component.

npm i @next/third-parties

Import Google Tag Manager

After successfully downloading the library, we can go ahead and import the GTM component, this needs to be done in the app/layout.tsx file.

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

Get your GTM ID

If your GTM account is already created, you should be able to see this dashboard:

Here we can find the GTM ID on the top right side of the dashboard, for this tutorial I have created a test account. As you can see my ID is GTM-MXXNKV2B, copy the ID, and since this is not the only information, we need from the Tag Manager dashboard, we need to go to Admin.

Here you need to select Install Google Tag Manager and it will open a sidebar with instructions on how to install GTM, unfortunately, these steps are only for basic HTML projects, the process is a bit different when using Next.js, so just keep that window open we’re going to come back later.

Add the GTM Component

Now that you have your GTM ID you can pass it as prop to your component.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="Your ID Goes Here" />
      <body>{children}</body>
    </html>
  )
}

Add the <noscript> Tag

Let’s go back to the GTM portal and copy the tag shown in the second step.

GTM Installation Instructions, last step

Due to the tag being intended for traditional HTML, we need to update some attributes, let’s update the style for the iframe, so it ends up like this.

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=YourIdGoesHere"
height="0" width="0" style={{ display: "none", visibility: "hidden" }}></iframe></noscript>

Notice that both tags contain the GTM ID.

Commit Changes to Production

Now that your project is set up you can commit the changes to the production environment, by now you should already have your website on your custom domain.

Test Your Website

If you have followed all the steps correctly, now you will see the result, go to your GTM portal and enter your website’s URL.

Keep in mind that it needs to be a real and valid URL, then hit enter or test, it should take some seconds, this will scan your website and detect if the tag was set up. If everything went fine you should be able to see a green check mark.

Congrats! You have successfully installed Google Tag Manager on your website.

Conclusion:

Integrating Google Tag Manager (GTM) into a Next.js project offers developers a convenient solution for tracking user interactions and optimizing marketing efforts without direct code alterations. By seamlessly incorporating GTM and strategically placing the container snippet, developers can efficiently monitor crucial data points, empowering informed decisions to enhance website performance and user experience.

Thanks for reading, I decided to create this tutorial because I recently worked on a project where my client asked me to set up GTM for him, and while I was checking the Next.js documentation I noticed there were some gaps, so I decided to do my bit, I hope you find this helpful.

Here you can find the YouTube video.