Google Analytics unable to detect navigations with Client Router

[daring hatch]

I'm integrating Google Analytics (GA4) into my site using ClientRouter and Partytown, but I don't see the tracking pixel being sent when navigating between pages. As soon as I reload the page or disable ClientRouter, the tracking works correctly. I saw that this issue happened a while ago (https://github.com/withastro/astro/issues/14282), but I'm using the latest versions of Astro and Partytown and I'm still experiencing the same problem.

[fervent cedar]

How are you sending it? I don’t use Google analytics.

[daring hatch]

With google tag manager integration:
<ClientRouter />
<script is:inline type="text/partytown">
(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-XXXXXXX');
</script>

[nocturne moth]

Hi @daring hatch, does it work without partytown, i.e. if you replace

<script is:inline type="text/partytown">

with

<script is:inline data-astro-reload>

[daring hatch]

Hi @nocturne moth, I imagine you are referring to data-astro-rerun, and no, it still does not work when navigating between pages and using ClientRouter.

<script is:inline data-astro-rerun>
 (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-XXXXXXX');
</script>

[nocturne moth]

Yep! data-astro-rerun, sorry for the confusion 😉

[daring hatch]

Is there any workaround to use gtm with view transitions + partytown or do I need to do without clientrouter?

[nocturne moth]

I thought people managed it, but I myself do neither use gtm not partytown. So I can’t point you in the right direction.

Inline plus rerun should at least run the code on each navigation. You might check that the script indeed inserts and executes that googletagmanager script

[daring hatch]

I think with google analytics is working, the problem is (in my opinion) with gtm which sends the pixel entirely and not manually as is the case with gtag

[astral sand]

I think you'll have to add an event listener to astro:page-load or astro:after-swap events. This article explains in detail the ways to reexecute client scripts after transitions. Hope it helps!

[daring hatch]

Were you able to get it working for analytics + <ClientRouter />?

[astral sand]

I didn't use it for google analytics specifically, but it works for all other client javascript

[daring hatch]

I realized that it's because of partytown. The problem is that it wasn't enough to disable it from the script, but also from astro.config.

In other words, it works with Partytown but without ClientRouter, or with ClientRouter but without the Partytown plugin. Together, they seem incompatible

[nocturne moth]

Do you use Partytown for other things, too? I guess for the GA script it is not such a big benefit.

It might be possible to make partytown work with the client router, but for that we need to know how to “restart” it after the DOM was swapped.

[daring hatch]

Hi @nocturne moth, using GA4 in Partytown is important for WPO because it frees up the main thread by running the analytics script in a web worker. In fact, the official documentation mentions adding analytics and ads, but it doesn't say that it doesn't work with View transitions (https://docs.astro.build/en/guides/integrations-guide/partytown/#why-astro-partytown)

[nocturne moth]

I thought, partytown in your example just runs a few statements that insert the gtm.js script into the DOM

As mentioned before, I never used, nor analyzed partytown. 😬

[blazing bone]

@daring hatch does adding a custom event in document.addEventListener('astro:page-load', () => { ... }) work?

[daring hatch]

No @blazing bone , it seems that partytown generates s conflict with the navigation behaviour that ClientRouter overrides (because partytown makes his own)