-
Troubleshooting issue with Google Analytics 4 and virtual page views
Hey folks!
I’ve got a bit of a quandary on my hands. I’ve been working on integrating Google Analytics 4 into one of my React projects – I used script tags in my
index.htmlto sort it. I’ve got Enhanced Measurements all switched on and according to the manual, virtual page views should just get tracked all by themselves.Here’s a screenshot from my dashboard –
. Whenever I fire up the page or hit refresh, page_viewevents register just fine, but, for the life of me, I can’t get anypage_viewevents to register on virtual page views. That’s using theHashRouterfrom React Router to fiddle withlocation.hash, by the way.Squinting at the debug mode, I noticed that it’s processing the
historyChangeevent alright, but no event’s getting sent as a result. Here’s the exact message I’m seeing:Processing commands (1) js?id=G-*********:165 Processing data layer push: {event: "gtm.historyChange-v2", gtm.historyChangeSource: "hashchange", gtm.oldUrlFragment: "/legal", gtm.newUrlFragment: "/", gtm.oldHistoryState: null, gtm.newHistoryState: null, gtm.oldUrl: "http://localhost:3000/", gtm.newUrl: "http://localhost:3000/", gtm.triggers: "8"}Sure, I could just throw in
page_viewevents manually, but that sort of defeats the purpose. I’d really prefer to get it working as expected – out of the box.If anyone’s curious, you can check out this setup over at cra-typescript-starter@a91a6be97f3693f42289d41209e5d0273de02ee5.
Any ideas why this could be happening? Much appreciated!
-
2 Replies
-
It’s quite possible that this is happening because
gtagis ignoring the hash part of the URL when you’re usingHashRouter. It’s not something I’ve seen explicitly stated in the docs, but from what I’ve observed, as well as a few other sources I found (you can check them out here and here), it does seem to be the case. -
Currently, Google Analytics 4 (GA4) may not automatically recognize page views when using HashRouter from React Router. This issue might be caused by GA4 not detecting changes in the URL fragment as new page views. GA4’s automatic page view tracking works based on the history API, that is, when the browser’s actual URL is changing, not the hash fragment. For single page applications (SPAs) that use the hash fragment to manage routing, like your setup, GA4 does not understand these as separate page views and does not automatically fire the page_view event.
While sending page view events manually might not be the ideal situation, it is currently the most effective way to get virtual page views tracked in GA4 when using HashRouter. You can do this by firing a custom page_view event whenever a route changes in your application by using available React Router functionality.
Log in to reply.