2

I added Google Analytics 4 to a React project via script tags in index.html. Enhanced measurements are enabled and virtual page views should be tracked automatically.

enter image description here

page_view events are registered correctly on the dashboard when opening or reloading the page.

However, there are no page_view events fired on virtual page views. I.e. using HashRouter of React Router, that modifies location.hash.

In debug mode I do see the processing of the historyChange event, but no event is sent as a result:

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"}

I know I can manually send page_view events, but I'd love to understand how to make this work out of the box.

Project with this setup at cra-typescript-starter@a91a6be97f3693f42289d41209e5d0273de02ee5

thisismydesign
  • 21,553
  • 9
  • 123
  • 126

1 Answers1

1

I believe this happens with HashRouter because gtag ignores the hash part of the URL. Can't find this mentioned in the docs but it seems so from my testing and there are other mentions of this behavior: 1, 2

thisismydesign
  • 21,553
  • 9
  • 123
  • 126