Google tag assistant "No tags found" after switching <Script> strategy from "afterInteractive" to "worker" in Next JS

356 Views Asked by At

I'm trying to optimize the below use of Google Tag Manager script in my Next Js application, and I came across this next/script strategy to load scripts called worker which instantiate's partytown.

Based on Partytown's documentation "Partytown is best suited for third-party scripts such as Google Tag Manager or Facebook Pixel, since they’re only handling user events and lazily posting data to their services in the background."

But when I use the strategy "worker", google tag assistant was not able to find my GTM tag. Please advice me on a workaround to find a way to make this work, or any other suggestions to avoid gtm blocking my main thread during intial page load.

I'm using the next/script tag in a HOC wrapper for all my websites pages. It was working fine with strategy="afterInteractive" and does not work now for "worker"

My current Next Js version: "~12.1.6",

Code when google tag assistant worked:

 {gtm && (
        <Script
          strategy="afterInteractive"
          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}');
          `,
          }}
        />
      )}

Google tag assistant "No tags found" after changing strategy to worker:

 {gtm && (
        <Script
          strategy="worker"
          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}');
          `,
          }}
        />
      )}

I tried using strategy="lazyOnload" and it is also resulting in "No tags found"

0

There are 0 best solutions below