How to properly use Google Tag script in Next.js?

Question

I read How to load Google Tag Manager with next/script component (Next.js 11)? and I also read this doc page.

But none of them solved my problem.

I want to include Google Tag on many of my sites that are developed using nextjs. Thus I have creatd a simple reusable component:

import Script from 'next/script'

const GoogleTag = ({ identifier }) => {
    if (!identifier || !identifier.startsWith('G-')) {
        throw new Error('Google tag id is not correct;');
    }
    return <>
        <Script
            src={`https://www.googletagmanager.com/gtag/js?id=${identifier}`}
            strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
            {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){window.dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', '${identifier}');
        `}
        </Script>
    </>
}

export default GoogleTag;

And I use it in each of my sites, in the _app.js file, this way:

import Head from 'next/head';
import GoogleTag from '../Base/GoogleTag';

export default function MyApp({ Component, pageProps }) {

return (
        <>
            <Head>
                <GoogleTag identifier='G-9XLT855ZE0' />
            </Head>
            <div>
                application code comes here
            </div>
        </>
    )
}

But I don't see Google Tag script being loaded in the Chrom's Dev Tools, int Networks tab.

next/script should not be used inside next/head.

juliomalves
– juliomalves

2021-12-03 21:19:34 +00:00
Commented Dec 3, 2021 at 21:19 — juliomalves
– juliomalves, Commented Dec 3, 2021 at 21:19

MarioG8 · Accepted Answer · 2021-12-03 13:14:54Z

3

To properly use the google tag in your next.js app, You should add the GTM script to _document.js in the Head section.

example code _documents.js, source.

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

import { GA_TRACKING_ID } from '../lib/gtag'

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

To set up google analytics page view for single page app, and other methods of using GT in next.js. You can visit this source1, source2.

edited Dec 3, 2021 at 13:14

answered Dec 3, 2021 at 13:01

MarioG8

6,1014 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hossein Fallah Over a year ago

What's the difference between _app.js and _document.js from the point of <Head> component? Aren't they both the same?

MarioG8 Over a year ago

@HosseinFallah No they aren't the same ! stackoverflow.com/questions/51040669/… . Try the method I sent you, use the example as documentation, I checked and it works. Good Luck and Best regards!

Collectives™ on Stack Overflow

How to properly use Google Tag script in Next.js?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related