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

user_18089626 0
Viewed 2541

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) */}
google-tag-manager next.js reactjs dynamic-import javascript
3 Answers

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

user_17939620

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