Google Tag Manager

45-60 minAdvanced

Integrate Google Tag Manager (GTM) into a Next.js application using the Google Tag Manager component.

Prerequisites

GTM Container ID (GTM-XXXXXX)

Beginner Recommended

Next.js Third Parties

Using @next/third-parties.

1

Installation

1

Install the official library: npm install @next/third-parties.

2

Implementation

1

Add the <GoogleTagManager> component to your root layout.

Example

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

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

Verification Checklist

Use the Tag Assistant Companion extension in Chrome to verify tags are firing.
Check the Network tab for requests to gtm.js.