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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

[🐞] Google Tag Manager with Next JS not forwarding events to data layer which shows empty array [] #645

Open
KrishnaKumar56 opened this issue Nov 29, 2024 · 0 comments
Open

[🐞] Google Tag Manager with Next JS not forwarding events to data layer which shows empty array [] #645

KrishnaKumar56 opened this issue Nov 29, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@KrishnaKumar56
Copy link

KrishnaKumar56 commented Nov 29, 2024 •
edited
Loading

Describe the bug

Hello Everyone,
On my website, the integration of Google Tag Manager and third-party scripts loaded via GTM was impacting page performance by blocking the main thread. After analyzing the issue, I came across an library party town and tried to load tag manager using the module.

I am facing two issues over here

  1. Events are not forwarded into the data Layer array.
    party_town_issues1

  2. GTM Iframe causes CORS error even though I load it through [loadScriptsOnMainThread] props.
    party_town_issues

My question is there any one loaded GTM with party town on next JS without any error ?

Reproduction

No live URl. Tested in local environment.

Steps to reproduce

NextJS version: 11

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

  1. Package.json file - Added "partytown": "partytown copylib public/~partytown" in scripts.
  2. RUN command - npm run partytown.
  3. Public folder created with library files added.

In _document.tsx file
`import { Partytown } from '@builder.io/partytown/react';

<Head>
        <script
        dangerouslySetInnerHTML={{
            __html: `
            window.dataLayer = window.dataLayer || [];
            `,
        }}
        />
        <Partytown debug={true} forward={['dataLayer.push']} />
        <script 
            type="text/partytown"
            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_ID');
            `,}}
        />
    </Head>
    <body>
        <noscript>
            <iframe
                src={`https://www.googletagmanager.com/ns.html?id=GTM_ID`}
                height="0"
                width="0"
                style={{ display: 'none', visibility: 'hidden' }}
            />
        </noscript>
    </body>`

Browser Info

chrome

Additional Information

No response
@KrishnaKumar56 KrishnaKumar56 added the bug Something isn't working label Nov 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@KrishnaKumar56