Process Flow
Animated overview of the full workflow
TL;DR
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.
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