Vue Router routes not tracked by Firebase Analytics

user_6048715 0
Viewed 1286

I'd like to know if there's some configuration I might've missed when setting up Firebase Analytics for a Vue app (and for SPAs in general, I suppose) to get it to track page changes, because when I'm in Firebase's DebugView, it doesn't track page_views unless I refresh the page or manually enter a URL into the browser. I know for the regular Google Analytics module (vue-analytics) you have to pass it the router object on initialisation for it to work (more about that) so it makes sense to me that you'd have to do something similar with Firebase Analytics, but I can't find anything in the docs about it.

I've tried manually calling logEvent('page_view') from my router.afterEach() guard, but then it logs each page change multiple times.

Please let me know if there's any info or demo code you'd like me to include.

vue-router firebase firebase-analytics vue.js
1 Answers

So this doesn't fix the problem, per se, but it's what I'm going with until a better answer comes along.

Moving the logEvent('page_view') from the router.afterEach() guard to the router.beforeEach() guard prevents it from being logged multiple times in Firebase Analytics, and adding a custom type parameter allows me to distinguish between an actual page change/load and an internal "SPA" page change/load. So (the relevant part of) my router code now looks like this:

router.beforeEach(async (to, from, next) => {
  firebase.analytics().logEvent('page_view', { type: 'internal' });
});
user_60487150
Related