How to implement Google Tag Manager using the next/script component in Next.js 11?

Question

How to implement Google Tag Manager using the next/script component in Next.js 11?

Version 11 of Next.js recently introduced a new approach with the Script component offering various strategies.

To avoid duplicate tags, it is advised to implement Google TagManager using the afterInteractive strategy.

In my experimentation:

// _app.js

import Script from 'next/script';

class MyApp extends App {
  public render() {
    const { Component, pageProps } = this.props;

    return (
      <>
        <Script strategy="afterInteractive">
          {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':` +
            `new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],` +
            `j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=` +
            `'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);` +
            `})(window,document,'script','dataLayer','GTM-XXXXXXX');`}
        </Script>
        <Component {...pageProps} />
      </>
    );
  }
}

export default MyApp;

The current implementation successfully loads Google Tag Manager, however, it inserts the same script on each page navigation leading to duplicate tags being generated.

Is there a more effective way to utilize the new Script component?

javascript next.js google-tag-manager

Answer 1

Answer №1

It's important to assign an id to your <Script> element when it contains inline content (without a src attribute).

By doing so, you can easily track whether it has already been rendered to avoid duplications.

This guideline is outlined in the eslint rule connected to Next:

next/script components with inline content need to have an id attribute specified for tracking and script optimization purposes.

For more details, refer to: https://nextjs.org/docs/messages/inline-script-id

An example solution would be as follows:

    <Script id="gtm-script" strategy="afterInteractive">{`...`}</Script>

Furthermore, it is recommended to incorporate eslint into your Next project:
You can either execute next lint command or install eslint next config using the following command:

yarn add -D eslint eslint-config-next

Then, create a .eslintrc.json file in your project root directory with at least this configuration:

{
  "extends": ["next/core-web-vitals"]
}

Explore more about Next.js eslint configuration here: Information about next.js eslint configuration.

Answer 2

It's important to assign an id to your <Script> element when it contains inline content (without a src attribute).

By doing so, you can easily track whether it has already been rendered to avoid duplications.

This guideline is outlined in the eslint rule connected to Next:

next/script components with inline content need to have an id attribute specified for tracking and script optimization purposes.

For more details, refer to: https://nextjs.org/docs/messages/inline-script-id

An example solution would be as follows:

    <Script id="gtm-script" strategy="afterInteractive">{`...`}</Script>

Furthermore, it is recommended to incorporate eslint into your Next project:
You can either execute next lint command or install eslint next config using the following command:

yarn add -D eslint eslint-config-next

Then, create a .eslintrc.json file in your project root directory with at least this configuration:

{
  "extends": ["next/core-web-vitals"]
}

Explore more about Next.js eslint configuration here: Information about next.js eslint configuration.

Answer 3

Answer №2

My solution involved dissecting the GTM script.

I placed the initial dataLayer object on the window in the _document page.

// _document.js

import Document, { Head, Html, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charSet="utf-8" />

          <script
            dangerouslySetInnerHTML={{
              __html:
                `(function(w,l){` +
                `w[l] = w[l] || [];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});` +
                `})(window,'dataLayer');`,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

The GTM script is loaded using the Script component (which should not be used on the _document page)

// _app.js

import Script from 'next/script';

class MyApp extends App {
  public render() {
    const { Component, pageProps } = this.props;

    return (
      <>
        <Script src={`https://www.googletagmanager.com/gtm.js?id=GMT-XXXXXXX`} />
        <Component {...pageProps} />
      </>
    );
  }
}

export default MyApp;

Answer 4

My solution involved dissecting the GTM script.

I placed the initial dataLayer object on the window in the _document page.

// _document.js

import Document, { Head, Html, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charSet="utf-8" />

          <script
            dangerouslySetInnerHTML={{
              __html:
                `(function(w,l){` +
                `w[l] = w[l] || [];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});` +
                `})(window,'dataLayer');`,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

The GTM script is loaded using the Script component (which should not be used on the _document page)

// _app.js

import Script from 'next/script';

class MyApp extends App {
  public render() {
    const { Component, pageProps } = this.props;

    return (
      <>
        <Script src={`https://www.googletagmanager.com/gtm.js?id=GMT-XXXXXXX`} />
        <Component {...pageProps} />
      </>
    );
  }
}

export default MyApp;

Answer 5

Answer №3

Make sure to include an "id" parameter in your inline scripts for Next to efficiently manage script loading.

Although the documentation touched on it, this detail was overlooked in the initial release.

A patch was subsequently introduced to address this issue, so updating your Next setup should resolve it.

Find the Patch here - https://github.com/vercel/next.js/pull/28779/files/11cdc1d28e76c78a140d9abd2e2fb10fc2030b82

Join the Discussion Thread - https://github.com/vercel/next.js/pull/28779

Answer 6

Make sure to include an "id" parameter in your inline scripts for Next to efficiently manage script loading.

Although the documentation touched on it, this detail was overlooked in the initial release.

A patch was subsequently introduced to address this issue, so updating your Next setup should resolve it.

Find the Patch here - https://github.com/vercel/next.js/pull/28779/files/11cdc1d28e76c78a140d9abd2e2fb10fc2030b82

Join the Discussion Thread - https://github.com/vercel/next.js/pull/28779

Answer 7

Answer №4

When working with newer versions of NextJS (13-14), there is now a more streamlined approach available through the @next/third-parties library:

To get started, simply run

npm install @next/third-parties@latest next@latest

or

yarn add @next/third-parties@latest next@latest

In your pages/_app.jsx/.tsx or app/layout.tsx/.jsx, include the following line:

import { GoogleTagManager } from '@next/third-parties/google'

Insert
```
<GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID} />
```
into your return statement (within the _app/layout file)
Remember to add NEXT_PUBLIC_GTM_ID to your environment variables or replace {process.env.NEXT_PUBLIC_GTM_ID} with your actual GTM id

Answer 8

When working with newer versions of NextJS (13-14), there is now a more streamlined approach available through the @next/third-parties library:

To get started, simply run

npm install @next/third-parties@latest next@latest

or

yarn add @next/third-parties@latest next@latest

In your pages/_app.jsx/.tsx or app/layout.tsx/.jsx, include the following line:

import { GoogleTagManager } from '@next/third-parties/google'

Insert
```
<GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID} />
```
into your return statement (within the _app/layout file)
Remember to add NEXT_PUBLIC_GTM_ID to your environment variables or replace {process.env.NEXT_PUBLIC_GTM_ID} with your actual GTM id

How to implement Google Tag Manager using the next/script component in Next.js 11?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Express.js feature "app.use() mandates the use of middleware functions"

The use of dangerouslySetInnerHTML causes the page layout to stretch, expand, or grow in size

Issue with passing boolean parameter in Javascript not functioning properly

working with JSON array information

Create a function within jQuery that triggers when an option in a select field is chosen

Expand the video comparison slider to occupy the entire width and height

NodeJS module loading issue

Execute an asynchronous function in Javascript, then output the returned data to the console

Filter a nested array in AngularJS and retrieve the parent object as the result

Sorting through a collection by using a nested array

What is the best way to receive a response from the foo.onload = function() function?

AngularJS Multi-select Dropdown Filter Logic

A beginner's guide to integrating AWS Textract with React/NextJS

Display the bash script results on an HTML webpage

Sending data from PHP to JavaScript using JSON encoding through POST requests

What is the method for incorporating parameters into an array filter?

The instance of the Javascript Object Prototype losing its reference

Communication breakdown between components in Angular is causing data to not be successfully transmitted

Is there a way to remove the "next" button from the last page in a table?

Utilizing multiple Next.js parameters in combination with Supabase for creating dynamic routes