Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

GTM does not report history change events

See original GitHub issue

Description

I’m trying to use the GTM via Partytown in Next.js. I have successfully loaded the scripts and got GTM to send the initial collect request, but it does not report page_view events after changing routes.

When testing the same setup without Partytown the collect requests get sent properly.

Behaviour when loading GTM normally:

https://user-images.githubusercontent.com/9134970/165815764-c2279ce8-10d9-435b-a73f-da89e2c5126e.mov

Behaviour when loading GTM via Partytown:

https://user-images.githubusercontent.com/9134970/165816399-0d170266-c910-4cce-ad40-4da17f1a0221.mov

Expected behaviour

GTM loaded via Partytown detects route changes and sends appropriate collect requests.

How to reproduce

Link to reproduction repo: https://github.com/MrPumpking/nextjs-partytown-gtag-bug

The main branch contains pure Next.js setup with GTM. Paste your GTM measurement ID in the .env file.
The partytown branch contains GTM loaded via Partytown.

When running each version, you can check the network tab in devtools for outgoing collect requests.

GTM setup GTM is connected with GA4 using the standard Tag.

gtm-tag-config

GA4 web stream has enabled enhanced measurement with the “Page changes based on browser history events” enabled.

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:21 (3 by maintainers)

Top GitHub Comments

8reactions

slawekkolodziejcommented, May 4, 2022

I spent some more time on this. Now I see that the problem is caused by history.pushState & history.replaceState not being called inside worker.

I added some more logic to Partytown’s internal LocationUpdate message handler. Now it detects how location has changed (either pushState, replaceState, pop state, etc). When needed it calls pushState or replaceState inside worker.

I already have a POC next.js app with proper history tracking 🎉

I will try to wrap it up and create MR sometime this week. There’s one ugly workaround in my code I would like to fix first.

3reactions

khuezycommented, Jun 19, 2022

I found the problem, I had to put the gtag on the window object (eg: window.gtag = function() {dataLayer.push(arguments)} Then in _document where I’m setting the partown-config:

forward: ["gtag"]

Now partytown properly forwards gtag() calls to the worker.

Top Results From Across the Web

History change trigger - Tag Manager Help - Google Support

Click Triggers and then New. Click Trigger Configuration and choose the History Change trigger type. When a history change event occurs, Tag Managers...

Google Tag Manager: The History Listener | Simo Ahava's blog

The History Listener listens for changes in browser history. If it detects such a change event, it will tell you what happened, ...

Track Virtual Pageviews when Multiple History Events Occur ...

Check the History Change Source ... When you see those multiple History events in the GTM preview and debug mode, click the first...

"Just Links" Event firing after "History Change" event

You can look at tag firing priority. Adjust the click tag to have higher priority than the tag that's dependent on the history...

The gtm.historyChange-v2 dataLayer event | hume.dev

The usual event gtm.historyChange without the -v2 suffix is triggered by Google Tag Manager if you have a trigger in your container that...