Google Tag Manager
intermediate
8 min read682 views

How to Install GTM on Next.js and React Apps

For Next.js (App Router), use the @next/third-parties library: import GoogleTagManager from '@next/third-parties/google' and add <GoogleTagManager gtmId='GTM-XXXXXXX' /> to your root layout. For React SPAs, use a package like react-gtm-module or add the GTM snippets to your index.html. Critical for

Setup & Fundamentalsgtm nextjs react

Quick Summary

For Next.js (App Router), use the @next/third-parties library: import GoogleTagManager from '@next/third-parties/google' and add to your root layout. For React SPAs, use a package like react-gtm-module or add the GTM snippets to your index.html. Critical for SPAs: standard GTM page view triggers do not fire on client-side navigation. Use History Change triggers in GTM or push custom events to the data layer on route changes to track page views correctly across your application.

Overview

For Next.js (App Router), use the @next/third-parties library: import GoogleTagManager from '@next/third-parties/google' and add to your root layout. For React SPAs, use a package like react-gtm-module or add the GTM snippets to your index.html. Critical for SPAs: standard GTM page view triggers do not fire on client-side navigation. Use History Change triggers in GTM or push custom events to the data layer on route changes to track page views correctly across your application.

See our complete guide library for detailed coverage of account setup, tracking implementation, campaign creation, audience building, creative best practices, and optimisation strategies across all platforms.

Frequently Asked Questions

Common questions about this topic

Was this guide helpful?

Your feedback helps us improve our guides