[🐞] Google Tag Manager NextJS forward events coming as blank []

FarhanAtAppyHigh commented 8 months ago

Describe the bug

Appreciate your work on this package, but I'm encountering an issue.

I tried setting up Partytown to load and execute Google Tag Manager scripts in service workers following the official documentation: link.

Issue 1: While the documentation is well-maintained regarding forwarding events to properly fire Google events (link), there's no mention of how to add forward events specifically for Next.js cases in the experimental documentation. I attempted to manually add forward events with the following code in the head tag, but the forward key is still empty in the console when I try to log it. The reason seems to be that the events are not firing properly:

<Script>
    {`
          partytown = {
            forward: ['dataLayer.push', 'fbq']
          };
    `}
</Script>

Any suggestion on how to add forward properly, when using strategy="worker" experimental nextjs flow.

Issue 2: When I set the strategy to 'lazyOnLoad' and check _google_tagmanager and _google_tagdata in the console, they appear as expected, indicating that the script is executing properly. However, when I switch the strategy to 'worker', _google_tagmanager and _google_tagdata variables are not appearing. Are these variables initialized in service workers only? Is this the expected behavior?

Reproduction

No live URl right now!

Steps to reproduce

NextJS version: 12

install dependancy: npm install "@builder.io/partytown"

changed the nextjs config as: module.exports = { experimental: { nextScriptWorkers: true, }, }

Load scripts in _document.tsx:

 <Script
      src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_FIREBASE_MEASURMENT_ID}`}
      strategy="worker"
  />

  <Script strategy="worker">
      {`
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());

     gtag('config', '${process.env.NEXT_PUBLIC_FIREBASE_MEASURMENT_ID}');
`}
  </Script>

<Script>
    {`
          partytown = {
            forward: ['dataLayer.push', 'fbq']
          };
    `}
</Script>