Learn business growth with Google Analytics 4 › Forums › Google Analytics 4 › Troubleshooting page path display issue in GA4 for Vue.js SPA integrated with GTM › Reply To: Troubleshooting page path display issue in GA4 for Vue.js SPA integrated with GTM
-
Google Analytics 4 (GA4) by default perceives the page path by omitting the fragment (anything after ‘#’) which is common in single page applications like Vue.js. The Google Analytics 4 Debug view shows you the details behind-the-scene but the GA4 reports only use what’s before the ‘#’ in the URL.
To fix this, you will need to adjust your tracking setup. Instead of just sending the page_view event on its own, you should modify the page_path parameter you’re sending with the event. You can make use of Vue Router’s afterEach hook to send page_view events to GA4, and manually include the full URL including the fragment. Adjust your GA4 configuration to use the complete string including ‘#’ as the page path.
Be aware though that adjusting your code might have other implications for your analytics data and the reports you’re generating, so you should thoroughly test this in a GA4 test property first.