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

£0+
£0+
Morgan Feeney
0 ratings

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

Get it FREE today

Initialize GTM in Next.js

• How and where to add the GTM scripts using _app.tsx, _document.tsx and the <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 push data into the dataLayer
• How to get pageView to fire on page load and when 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

This step focuses on bringing it all together with production ready code:

• I provide a useful utility function that can you'll use globally, set-up in a way that keeps the codebase tidy
• I provide a utility to remove persistent data
• I show you how to convert data from one shape to another
• I demonstrate 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
  • Language
    Javascript/Typescript/tsx
  • Framework
    Next.js
  • You'll get access to production ready code that can be adapted to your own use-cases or used as-is.
  • Size2.28 MB
  • LanguageJavascript/Typescript/tsx
  • FrameworkNext.js
Powered by

Checkout

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

Enter your info to complete your purchase