Google Tag Manager
intermediate
5 min read4 steps679 views

How to Install GTM on Next.js and React Apps

For Next.js, use the `@next/third-parties` package or add GTM scripts to your root layout. For React SPAs, install via `react-gtm-module` or add scripts to your index.html. The key challenge with SPAs is that GTM's default Page View trigger only fires on the initial load. Use History Change triggers

Installationinstall gtm nextjs react

Quick Summary

For Next.js, use the @next/third-parties package or add GTM scripts to your root layout. For React SPAs, install via react-gtm-module or add scripts to your index.html. The key challenge with SPAs is that GTM's default Page View trigger only fires on the initial load. Use History Change triggers in GTM to capture client-side route changes.

Process Flow

Interactive diagram — drag to pan, scroll to zoom

Step-by-Step Guide

Follow these 4 steps to complete this guide

1

Next.js (App Router)

Install @next/third-parties: `npm install @next/third-parties`. In your root layout.js, import and add the GoogleTagManager component with your GTM ID.
2

Next.js (Pages Router)

Add the GTM head script to `_document.js` in the Head component. Add the noscript iframe to the body.
3

React (Create React App / Vite)

Add GTM scripts directly to public/index.html, or use the react-gtm-module package.
4

Handling SPA Navigation

SPAs do not trigger traditional page loads on route changes. In GTM, create a History Change trigger to fire tags when the URL changes. Set your GA4 Page View tag to fire on both 'All Pages' and 'History Change' triggers.

Was this guide helpful?

Your feedback helps us improve our guides