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"