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

  • Troubleshooting page path display issue in GA4 for Vue.js SPA integrated with GTM

    Posted by Daniel on 8 March 2023 at 2:27 am

    “Why can’t I get the full page path to show up in the “Pages and screens” report on Google Analytics 4 (GA4) for my Vue.js single page application? Even though I have set up the code to properly track the page_view event with the correct page_location and page_path, it only shows the root (“/”) instead of the full URL including the fragment (like “#/admin” or “#/home”). The GA4 debug view shows the right page path though. Any ideas what’s tripping me up and how to fix this?”

    Leo replied 1 year, 3 months ago 3 Members · 2 Replies
  • 2 Replies
  • 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.

  • Leo

    Member
    28 June 2023 at 9:55 am

    It seems like Google Analytics 4 isn’t recognizing the full URL path of your Vue.js app, only the root (“/”). This could be because it’s a single page application where URL paths are often represented as fragments (after the “#”). One solution could be migrating towards using the ‘history’ mode in Vue.js that changes the URL without the “#” symbol. But remember, this can have other implications like needing server-side support to handle all paths.

Log in to reply.