How to Add Google Tag Manager in Next.js 15 App Router (Official & Simple Method)

Learn how to integrate Google Tag Manager into your Next.js 15 App Router project using the official @next/third-parties package. This guide walks you through the latest and easiest method, no manual script tags, just clean integration.

Posted by@Sujal Vanjare

Published on @August 22, 2025

Updated on @September 18, 2025 1:58 PM

Adding Google Tag Manager to your Next.js 15 app router is incredibly simple. You don’t need to mess with scripts or long chunks of code. Instead, we’ll use Next.js official Google Tag Manger component and your Google Tag Manager ID. Let’s get started

Google Tag Manager Setup Guide

Step 1: Create Your Google Tag Manager Account

1.a.i.
Visit tagmanager.google.com
2.b.ii.
Log in using your Google account (Gmail or Workspace).
3.c.iii.
Once logged in, you’ll either see your existing GTM accounts or an empty dashboard.
4.d.iv.
Click the “Create Account” button (highlighted in sky blue).
5.e.v.
You’ll now go through two steps:
- Set up your Account
- Set up your Container

google tag manager account create filled form

What’s the Difference Between Account and Container?

Account: Represents your business or organization.
Container: Holds all the tags you’ll install on your website.

For example, if you're managing sites for two different businesses, create separate GTM accounts and each with its own container.

Fill Out the Setup Form

Account Name: Use your business or company name.
Country: Choose your location.
Container Name: Name it after your website.
Target Platform: Select Web.

Click Create, accept the Terms of Service, and wait a few seconds.

You’ll see a popup modal with installation scripts—just close it. We only need the GTM ID.

If you're stuck, watch this YouTube video

straight to the point YouTube video to create google tag manager account.

Step 2: Copy Your Google Tag Manager ID

1.a.i.
Go to the Google Tag Manager dashboard.
2.b.ii.
Click your account, then select your container.
3.c.iii.
In the top-right, copy your GTM ID (starts with GTM-XXXXXX).

Add Google Tag Manager to Next.js 15 App Router

Step 1: Install the next js third parties Library

Use your terminal:

For npm

Bash

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

For pnpm

Bash

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

For more details read the official documentation

Step 2: Add Google Tag Manager to your main layout file

Next, you’ll need to add the Google Tag Manager component to your app/layout.jsx or if you are using typescript then app/layout.tsx

For JavaScript use this :

JavaScript

import { GoogleTagManager } from "@next/third-parties/google";
import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      {process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID &&
        process.env.NODE_ENV === "production" && (
          <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID} />
        )}
    </html>
  );
}

src/app/layout.jsx

For TypeScript use this :

TypeScript

import { GoogleTagManager } from "@next/third-parties/google";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
      {process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID &&
        process.env.NODE_ENV === "production" && (
          <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID!} />
        )}
    </html>
  );
}

src/app/layout.tsx

Key Points why we added conditions here:

The GoogleTagManager component is only loaded in production mode (process.env.NODE_ENV === "production"). This ensures no data is sent during development.
The NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID environment variable stores your Google Tag Manager ID.

Step 3: Add Your GTM ID to Environment Variables

1.a.i.
Create a .env.local file in the root of your project (if it doesn’t already exist).
2.b.ii.
Add the following line to the file:

Plain Text

NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-XXXXXXX

.env.local file

Replace GTM-XXXXXXX with the ID you copied from your Google Tag Manager account.

Why Use Environment Variables?

Storing your Measurement ID in an environment variable makes it easy to update without modifying your code.
It also keeps sensitive information out of your codebase.

Step 4: Test Your Setup

1.a.i.
Deploy Your Next.js Project:
- Make sure to update the environment variable (NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID) with your Measurement ID before deployment.
- Deploy your project to your hosting platform (e.g., Vercel, Netlify, or any other).
- Alternatively, you can test it locally in production mode by running
  Bash
  npm run build
  after build is completed run the build using this command
  Bash
  npm run start
2.b.ii.
Check Real-Time Tracking (Only if you've added Google Analytics inside Google Tag Manager. If not, refer to the blog linked in the Related Blogs section.)
- Visit your website in a new browser tab or incognito window.
- Open your Google Analytics dashboard and navigate to the Real-Time section.
- Confirm that your website traffic is being tracked by checking for active users or pageviews.
3.c.iii.
Troubleshooting:
- If no data appears, double-check the following:
  - Ensure the NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID environment variable is correctly set.
  - Verify that the GoogleTagManager component is only running in production mode (process.env.NODE_ENV === "production").
  - Clear your browser cache or try accessing the site from a different device.

Wrapping Up

You’ve now successfully integrated Google Tag Manager into your Next.js 15 app using the latest and official method. No more adding raw script tags—this way is faster, safer, and cleaner.