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

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) */}

Solution 1:^[1]

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');`, }} />

Solution 2:^[2]

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

Solution 3:^[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Appy Mango
Solution 2	Teo
Solution 3	Morgan Feeney

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]