Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[馃悶] Google Tag Manager NextJS forward events coming as blank [] #577

Open
FarhanAtAppyHigh opened this issue Apr 5, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@FarhanAtAppyHigh
Copy link

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_tag_manager and google_tag_data in the console, they appear as expected, indicating that the script is executing properly. However, when I switch the strategy to 'worker', google_tag_manager and google_tag_data 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>

Browser Info

Chrome

Additional Information

No response

@FarhanAtAppyHigh FarhanAtAppyHigh added the bug Something isn't working label Apr 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant