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

  • Lucas

    Member
    25 May 2023 at 10:53 pm

    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.