Integrate Google Tag Manager (GTM) with Next.js step-by-step

🚀 The step-by-step guide I wanted, but couldn't find.

There's no official documentation on how to Integrate Next.js with Google Tag Manager, this handy guide fills that gap with real-world examples which can be used and adapted.

The download is a boilerplate in itself that I would be happy building on. It contains not only the integration that you can experiment with and see in action, with client-side routing setup for you, but also a Next.js setup with Typescript, utility functions, Jest config, eslint config, and Typescript config.

Steps 1-5

Master the art of initializing GTM in Next.js

• Explore the effective implementation of GTM scripts using _app.tsx, _document.tsx and <Script/> component
• Learn to set up environment variables
• Ensure correct initialization of scripts

Become proficient in driving data to the dataLayer for page views

• Harness the power of React useEffect(), Next.js & pageProps for efficient data management
• How to fire pageView correctly when using <Link/> (client-side routing)

Develop custom events that fire on interaction

I provide easy-to-understand examples that can be modified to suit your needs:

• Page navigation
• Product list
• Form inputs

Structured code for tracking data page by page

Get your hands on production-ready code to:
• Tidy up your codebase with the help of practical utility functions
• Learn to remove persistent data with a handy utility
• Transform data shapes and learn to leverage TypeScript and unit tests for maintaining code sanity

Sharpen your debugging skills with Tag Assistant

The final step is packed with numerous screen-shots captured while undergoing all the previous steps. It provides a clear view of what to expect when connecting and debugging with Tag Assistant.

You'll learn to connect to a container and observe the data being relayed to Tag Manager from a non-technical user's perspective.

If you sign up for the 1 hour pair-programming, I require you to have the following in place in order for things to run smoothly:

- A stable internet connect
- Your codebase should be already setup, and in a workable state
- A tag manager account we can use for connecting to and de-bugging

We'll go about setting up GTM in _app.tsx and then go through the process of connecting locally, and viewing the data being pushed into the GTM container. We'll get the bare-bones in place together, so you can continue with the development.

Motivation

When I first started working in this area I was surprised to find none of the guides I found went into the amount of detail that I cover in my step-by-step guide, there was no single definitive guide on how to do it. What motivated me further towards creating the course was that the official Next.js examples don’t provide real-world insights. They only demonstrate how to track 1 thing, what page a user landed on. For a real day-to-day use-case this is never enough!

Save yourself time and effort

Every step is supported by a readme, clearly articulated instructions, working code, and sample code. I've also included intuitive screenshots to demonstrate more complex points.

You’ll save a lot of time, I’ve been there working to a fixed deadline with no experience of the quirks of Single Page Applications and GTM — this is the guide I needed when I was starting out, that's why I wrote it.

Once you’ve learnt what I teach everything will make sense and you’ll realise that it’s not that scary. Even if it doesn't make sense at first, through trial and error and my working code examples. you'll work it out.

You’ll gain specialist skills that your peers probably won’t have picked up, learning how to set up and configure GTM can be tedious and puts a lot of people off picking it up. I’ve done the running around for you, all you have to do is learn from me.

BONUS

Get the added benefit of learning how to clear persistent data that often proves to be annoying.