GTM (Google Tag Manager)

When running a website, it is essential to utilize various tools. Applying these tools often requires adding meta data or JavaScript to the site. While it is possible to manage this using a CMS, using a versatile tool like Google Tag Manager allows for more flexible and efficient operations.

This document outlines the steps to apply Google Tag Manager to a Next.js project.

Next.js Pages Router

Here, we introduce a sample using the Next.js Page Router. For the latest information, please refer to the Next.js official site.

Third Party Libraries - Google Tag Manager - Pages Router

Let’s create a sample project.

Create a Next.js project.
Terminal window
```
npx create-next-app@latest
```
Answer the prompts to create a Pages Router project as shown below.
Next, install the package @next/third-parties@latest.
Terminal window
```
npm install @next/third-parties@latest
```

Add code to /pages/_app.tsx to make it available globally.

import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import { GoogleTagManager } from '@next/third-parties/google';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <GoogleTagManager gtmId="GTM-XYZ" />
    </>
  );
}

When you start the project, you can confirm that the Google Tag Manager code has been added.
To manage the GTM key using environment variables, create a .env.local file and write the following:
/.env.local
```
NEXT_PUBLIC_GOOGLE_TAG_MANAGER=<your API key here>
```

To load the key written in .env.local, modify the following file:

export default function App({ Component, pageProps }: AppProps) {
  return <>
   <Component {...pageProps} />
   <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER || ""} />
 </>

The sample code introduced above can be referenced from the following repository.

haramizu / Next.js-sample - google-tag-manager-pages

Next.js App Router

Here, we introduce a sample using the Next.js App Router. For the latest information, please refer to the Next.js official site.

Third Party Libraries - Google Tag Manager - App Router

Create a Next.js project.
Terminal window
```
npx create-next-app@latest
```
Answer the prompts to create a Pages Router project as shown below.
Next, install the package @next/third-parties@latest.
Terminal window
```
npm install @next/third-parties@latest
```

Add code to /app/layout.tsx to make it available globally.

import { GoogleTagManager } from '@next/third-parties/google';
import type { Metadata } from 'next';
import localFont from 'next/font/local';
import './globals.css';

const geistSans = localFont({
  src: './fonts/GeistVF.woff',
  variable: '--font-geist-sans',
  weight: '100 900',
});
const geistMono = localFont({
  src: './fonts/GeistMonoVF.woff',
  variable: '--font-geist-mono',
  weight: '100 900',
});

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        {children}
      </body>
    </html>
  );
}

When you start the project, you can confirm that the Google Tag Manager code has been added.
To manage the GTM key using environment variables, create a .env.local file and write the following:
/.env.local
```
NEXT_PUBLIC_GOOGLE_TAG_MANAGER=<your API key here>
```

To load the key written in .env.local, modify the following file:

return (
  <html lang="en">
    <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER || ""} />
    <body
      className={`${geistSans.variable} ${geistMono.variable} antialiased`}
    >
      {children}

The sample code introduced above can be referenced from the following repository.

haramizu / Next.js-sample - google-tag-manager-app

Other Implementations

Previously, I introduced the implementation of GTM in Next.js using a package called react-gtm-module.

react-gtm-module

There are other packages available for integrating GTM, but the steps provided by Next.js are the simplest, so I will omit the details of other implementations.

Summary

The implementation of Google Tag Manager is already provided in the official Next.js documentation. Please refer to the official steps in addition to this document.

References

Third Party Libraries - Google Tag Manager - Pages Router

Third Party Libraries - Google Tag Manager - App Router