• Google Analytics 4

  Troubleshooting issue with Google Analytics 4 and virtual page views

  Posted by Sophie on 24 May 2023 at 4:04 pm

  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.html to 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_view events register just fine, but, for the life of me, I can’t get any page_view events to register on virtual page views. That’s using the HashRouter from React Router to fiddle with location.hash, by the way.

  Squinting at the debug mode, I noticed that it’s processing the historyChange event 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_view events 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!

  Robert replied 1 year, 3 months ago 3 Members · 2 Replies
• 2 Replies

• 

  Pham

  Member

  23 June 2023 at 3:24 pm

  It’s quite possible that this is happening because gtag is ignoring the hash part of the URL when you’re using HashRouter. 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.

• 

  Robert

  Member

  26 June 2023 at 11:51 am

  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