-
Troubleshooting page path display issue in GA4 for Vue.js SPA integrated with GTM
“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?”
-
2 Replies
-
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.
-
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.