Implementing Google Tag Manager in NextJS

What is NextJS?

Next.js is a React framework used for building fast, scalable, and SEO-friendly web applications. NextJS brings a range of valuable features to your website:

Better SEO – Pages load faster and are easier for search engines to read, helping improve your rankings.
Faster Page Load Times – Websites feel snappier, reducing bounce rates and keeping visitors engaged.
Higher Conversion Rates – Speed and smooth user experience directly impact sales and sign-ups.
Scalability – Whether you're launching a campaign landing page or running a full e-commerce site, it handles traffic spikes effortlessly.
Better User Experience – Smooth navigation and optimised images make interactions enjoyable.

I was really pleased to find that the NextJS team have created a set of helper components for loading Google Services into your app.

In this article, I'm going to show you how to use the Google Tag Manager component to load Google Tag Manager into your NextJS application. With that said, let's get started!

Install the package

The helper components are part of a special library called `@next/third-parties`. The library also brings a collection of utilities that improve the experience of loading some Google services into your application.

To install the package, use your preferred package manager to install `@next/third-parties` into your NextJS project. I'm using npm for this example, so please adjust the command accordingly for yarn, pnpm etc.

npm install @next/third-parties@latest

Loading GTM

Your next steps depends on what router you have opted to use in NextJS. I'll provide an example for both the pages router and the app router.

App Router

To load Google Tag Manager across every route in your app, you should add the component directly to the global `layout` file and provide the GTM container ID.

jsx

// app/layout.jsx

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

export default function RootLayout({ children }) {
	return (
		<html lang="en">
			<GoogleTagManager gtmId="gtm-id-here" />
			<body>
				{children}
			</body>
		</html>
	)
}

If you only want to load GTM on a specific page, then you can include the component in a specific page file.

jsx

// app/page.jsx

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

export default function LandingPage() {
	return (
		<>
			...
			<GoogleTagManager gtmId="gtm-id-here" />
		</>
	)
}

Page Router

To load Google Tag Manager across every route in your app, you should add the component directly in the `_app` file and provide the GTM container ID.

jsx

// pages/_app.js

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

export default function App({ Component, pageProps }) {
  return (
    <>
		<Component {...pageProps} />
		<GoogleTagManager gtmId="gtm-id-here" />
    </>
  )
}

However, if you only want to load GTM on a specific page, then you can include the component in a specific page file.

jsx

// pages/landing-page.jsx

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

export default function LandingPage() {
	return (
		<>
			...
			<GoogleTagManager gtmId="gtm-id-here" />
		</>
	)
}

That's it! Your site is now connected to Google Tag Manager 🎉

NextJS Developers for Hire

Need help with your NextJS application? Our team of experienced React developers can assist with new features, bug fixes, and ongoing maintenance. Click here to get in touch with us today!