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

£5+
£5+
Morgan Feeney
0 ratings

🚀 The step-by-step guide you wanted but could never find

There's no official documentation on how to Integrate Next.js with Google Tag Manager, the purpose of this guide is to fill that gap with real-world examples that can be learned from and adapted.

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

Steps 1-5

Initialize GTM in Next.js

• How and where to add GTM scripts using _app.tsx, _document.tsx and <Script/> component
• Create environment variables
• Check scripts have been initialized

Push data to the dataLayer for page views

• How to utilise React useEffect(), Next.js & pageProps to drive data to the dataLayer
• How fire pageView correctly when using <Link/> (client-side routing)

Create custom events that fire on interaction

Easy to follow working examples that can be adapted include:

• Page navigation
• Product list
• Form input

Structured code for tracking data page by page

Bring it all together with production ready code:
• You get a useful utility function, set-up in a way that will keep your codebase tidier
• You get a utility that removes persistent data
• You learn you how to convert data from one shape to another
• You learn how to use TypeScript and unit tests to help keep your sanity

Use Tag Assistant to debug and prove what you've done works

This final step has a healthy number of screen-shots that I've take whilst going through all the previous steps that show you what you should see when connecting with and debugging using Tag Assistant.


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

Each step has a readme, is clearly written, and refers to working code, and sample code. I've included handy screen-shots for any nuances that are easier to explain with an image.

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

You'll also learn how to clear annoying persistent data.

  • You'll get access to production ready code that can be adapted to your own use-cases or used as-is.

  • Size
    2.28 MB
  • Next.js
  • TypeScript
  • JSX
  • React
  • Easy-to-follow instructions
  • You'll get access to production ready code that can be adapted to your own use-cases or used as-is.
  • Size2.28 MB
  • Next.js
  • TypeScript
  • JSX
  • React
  • Easy-to-follow instructions
Powered by

Checkout

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

Enter your info to complete your purchase

Card

or pay with
You'll be charged US$5.