Scripts not being intercepted on a client-side transition #74

housseindjirdeh · 2022-02-12T18:42:20Z

Hi folks! I'm noticing an interesting issue adding Partytown to a Next.js app and I'm not sure if it's intended behavior or if I'm just doing something wrong 😅.

Consider a basic Next.js application with two routes that have the <Partytown/> React component included in its head along with a 3P script with type="text/partytown":

Page 1:

import { Partytown } from "@builder.io/partytown/react";

const Home = () => {
  return (
    <>
      <Head>
        <Partytown debug={true} logScriptExecution={true} />
        <script
          src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"
          type="text/partytown"
        />
      </Head>
      <Link href="/about">About</Link>
    </>
  );
};

Page 2:

import { Partytown } from "@builder.io/partytown/react";

const About = () => {
  return (
    <>
      <Head>
        <Partytown debug={true} logScriptExecution={true} />
        <script
          src="https://connect.facebook.net/en_US/sdk.js"
          type="text/partytown"
        />
      </Head>
      <Link href="/">About</Link>
    </>
  );
};

When I reload either of the two pages where the Partytown snippet gets injected server-side, the script seems to be intercepted by the service worker correctly and I see that it gets executed via the debug logs:

However when I navigate from one page to the other via a client-side transition, the script on the second page doesn't seem to be fetched or executed. Here's a video that shows how the script on the second page doesn't load on a client-side navigation but does during an SSR reload:

Screen.Recording.2022-02-12.at.2.49.17.PM.mov

Similarly, if I remove the script in Page 1 and then navigate to Page 2 where the Partytown snippet should get injected and instantiated client-side, it doesn't seem to work as well 🤔.

I set up a reproduction here: https://codesandbox.io/s/mystifying-goldberg-o12j7?file=/pages/index.js. Please let me know if you need any more details and/or if I can help debug where the potential issue may be happening.

The text was updated successfully, but these errors were encountered:

valse · 2022-02-26T23:49:11Z

Hi, I have the same question too: I successfully loaded the GTM script on my custom Next.js Document page and, at start, the pageview event is triggered as expected.

I tried, then, to push the pageview event client side, listening on "routeChangeComplete" router event but the command is never forwarded to the service worker:

useEffect(() => {
    const pageview = (url) => {
      dataLayer.push({
        event: "pageview",
        page: url,
      })
    }

    router.events.on("routeChangeComplete", pageview)

    return () => {
      router.events.off("routeChangeComplete", pageview)
    }
}, [router.events])

danielroe · 2022-03-10T14:32:49Z

We're encountering the same with Nuxt. I think implementing with MutationObserver might be a straightforward approach?

itsmnthn · 2022-03-27T17:44:36Z

I faced this same issue while implementing this with Nuxt2. Initial event works well but using window.dataLayer.push(event) doesn't trigger GTM request for that event.

I've created simple implementation here nuxt2-partytown-demo

If this issue is fixed then I'm planning to write a module/plugin for Nuxt2 to implement Partytown

itsmnthn · 2022-03-27T18:36:01Z

I ran gtag integration test locally and it seems button click is not sending event as it suppose to send { event: 'button-click', from: 'partytown' }

test/integration/gtag at https://github.com/BuilderIO/partytown/blob/main/tests/integrations/gtm/index.html`

Also tried live test https://partytown.builder.io/tests/integrations/gtm/ with same problem.

Is this expected behaviour and I am not understanding something or there is problem?

CruScanlan · 2022-03-31T04:43:43Z

I am getting the same issue. I cannot find a way to send a page view event to the Partytown GTM script from the main thread in Next.js.

itsmnthn · 2022-03-31T17:02:26Z

Check this demo nuxt2-partytown-demo I tried using hidden input on main thread and dispatchEvent('change') on button click and listen the same input change event in text/partytown gtag script and use gtag('pageView', 'about') but with no luck.

doing window.dataLayer.push inside partytown script where gtag is initialised works only once, letter it just doesn't send new event after it.

valse · 2022-03-31T20:26:40Z

Hi, I finally found how to use GA with Partytown and Next.js.... here my post about it: I'd like to try with GTM too.

wardpeet · 2022-04-07T17:22:53Z

@adamdbradley what's would be the correct approach here to help implement?

Create mutation observer that listens to newly created script tags with type text/partytown and route them through partytown.
Create a function that you can call to inject partytown tags?

One would be the most automated one, where you don't have to think about implementation details as a end-user. The second option would be more on the framework side, where you can do the logic with a Script component.

mrakus-sofomo · 2023-10-17T20:04:44Z

This is because the Playwright component mounts a snippet to the header, this snippet, only checks once for the existence of the text/partytown scripts, when the document is loaded. The logic does not rerun when page transition happens.
https://github.com/BuilderIO/partytown/blob/main/src/lib/main/snippet.ts#L156

Edit: I've scratched around a bit more and it seems that the worker uses requestAnimationFrame, to detect the next scripts. I'll try to debug it some more, I'm annoyed by this bug, especially since it's been open for so long.

gioboa · 2023-10-17T21:00:54Z

Thanks for your help @mrakus-sofomo
let's try to solve this issue

mrakus-sofomo · 2024-03-26T18:38:37Z

@gioboa Is this issue still present in nextjs worker script?
https://nextjs.org/docs/pages/building-your-application/optimizing/scripts#offloading-scripts-to-a-web-worker-experimental

gioboa · 2024-03-26T22:12:48Z

@gioboa Is this issue still present in nextjs worker script? https://nextjs.org/docs/pages/building-your-application/optimizing/scripts#offloading-scripts-to-a-web-worker-experimental

I guess so. I didn't solve it yet

adamdbradley added enhancement New feature or request help wanted Extra attention is needed labels Mar 23, 2022

tyhopp mentioned this issue Aug 1, 2022

feat(gatsby,gatsby-script): Do not use context for script collection gatsbyjs/gatsby#36246

Merged

danielroe mentioned this issue Dec 16, 2022

GTM with partytown does not work nuxt-modules/partytown#104

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scripts not being intercepted on a client-side transition #74

Scripts not being intercepted on a client-side transition #74

housseindjirdeh commented Feb 12, 2022 •

edited

valse commented Feb 26, 2022

danielroe commented Mar 10, 2022

itsmnthn commented Mar 27, 2022

itsmnthn commented Mar 27, 2022

CruScanlan commented Mar 31, 2022

itsmnthn commented Mar 31, 2022 •

edited

valse commented Mar 31, 2022 •

edited

wardpeet commented Apr 7, 2022

mrakus-sofomo commented Oct 17, 2023 •

edited

gioboa commented Oct 17, 2023

mrakus-sofomo commented Mar 26, 2024

gioboa commented Mar 26, 2024

Scripts not being intercepted on a client-side transition #74

Scripts not being intercepted on a client-side transition #74

Comments

housseindjirdeh commented Feb 12, 2022 • edited

valse commented Feb 26, 2022

danielroe commented Mar 10, 2022

itsmnthn commented Mar 27, 2022

itsmnthn commented Mar 27, 2022

CruScanlan commented Mar 31, 2022

itsmnthn commented Mar 31, 2022 • edited

valse commented Mar 31, 2022 • edited

wardpeet commented Apr 7, 2022

mrakus-sofomo commented Oct 17, 2023 • edited

gioboa commented Oct 17, 2023

mrakus-sofomo commented Mar 26, 2024

gioboa commented Mar 26, 2024

housseindjirdeh commented Feb 12, 2022 •

edited

itsmnthn commented Mar 31, 2022 •

edited

valse commented Mar 31, 2022 •

edited

mrakus-sofomo commented Oct 17, 2023 •

edited