How can I load Google Tag Manager to a next.js app, AFTER the app is fully loaded?

Asked 1/2, 2022 at 10:59 Answered 16/4, 2022 at 7:27

javascript reactjs next.js google-tag-manager dynamic-import

I'm building a next.js application and would like to load Google Tag Manager (GTM) only AFTER the entire page is loaded. The goal behind this is to improve the website performance.

Has anyone figured out a way how I can run third-party JS code (like GTM) only after the application has fully loaded?

I'm currently adding using the 'conventional' way to inject GTM to my next.js app (source) by adding the <script> tag into the <Head> and the <noscript> tag into the <body> tag in the _document.js file:

<Head>
      {/* Google Tag Manager */}
      <script
        dangerouslySetInnerHTML={{
          __html: `(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');`
        }}
      />
          {/* End Google Tag Manager */}
...
...
</Head>

<body style={{ backgroundColor: theme.palette.primary.background }}>
       {/* Google Tag Manager (noscript) */}
       <noscript
          dangerouslySetInnerHTML={{
            __html: '<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>'
          }}
      />
      {/* End Google Tag Manager (noscript) */}

Lombard answered 1/2, 2022 at 10:59 Comment(1)

I think it might be easier to just use an NPM package for this, for example: github.com/XD2Sketch/next-google-tag-manager – Workbag 11/7, 2023 at 13:50

How are you measuring performance?

Straight from the Next.js docs: https://nextjs.org/docs/basic-features/script#afterinteractive, you want to do this:

<Script
  strategy="afterInteractive"
  id="your-id"
  dangerouslySetInnerHTML={{
    __html: `
    (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-XXXXXX');
  `,
  }}
/>

afterInteractive simply puts the script before the closing body tag, so it loads after the page is interactive.

You might be better off placing the <noscript> tag in _document.tsx, it's tidier.

I've written a fairly in-depth article on how to do this: https://morganfeeney.com/how-to/integrate-google-tag-manager-with-next-js

Placard answered 16/4, 2022 at 7:27 Comment(0)

Here is the code example below to achieve lazy loading for Google Tag Manager scripts.

You can use the built-in Script component provided by Next Js.

import Script from "next/script";

<Script strategy="lazyOnload" dangerouslySetInnerHTML={{ __html: `(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');`, }} />

Shuffleboard answered 1/2, 2022 at 11:33 Comment(2)

I tried doing so already but when debugging that setup on the Google's Tag Assistant I find out the the GTM tag is not set up correctly. Did your proposed solution work for you? – Lombard 1/2, 2022 at 15:50

Yes it should work correctly if you placed the scripts in the _document.js on the Head. You can also search for Next Js Official examples from their GitHub. – Shuffleboard 5/2, 2022 at 5:44

Although not a trivial topic, you can try the Effect Hook which can run some additional code after React has updated the DOM. https://reactjs.org/docs/hooks-effect.html

Caroncarotene answered 1/2, 2022 at 11:3 Comment(0)

Recommended topics

Hot tags