MatteoGabriele
commented
3 years ago unfortunately, SSR always gives issues with vue-router, I can't do much more than waiting for VueRouter to be ready and triggering a nextTick on each route change. This is more an issue with Nuxt or VueRouter or both combined.
Description
Hi! I'm working on a project with NuxtJS (SSR mode) and I've installed this library to use with GA v4. It pretty much works outside the box, but I've noticed that if you use "pageTrackerScreenviewEnabled", the dt value is not properly reported on subsequent navigations.
Example:
Page 1: (rendered from SSR): correctly reports the values on the screenview event Page 2: (navigating to a link - I think this is rendered browser based): the screenview event "dt" property still has the old value Page 3: (navigating to another link): the screenview event "dt" property has the value from page 2
I checked the code and it seems to be correct, by using the router.onReady and router.afterEach events, but somehow, even if Vue.nextTick is used, it doesn't actually ensure the entire DOM was loaded.
Expected behavior
The library should report the correct page title to analytics.
Actual behavior
The library reports the previous page title to analytics on subsequent navigations in the browser.
Environment
Run this command in the project folder and fill in their results:
npm ls vue-gtag: vue-gtag@1.11.0Then, specify:
Reproducible Demo
export default ({ app }) => { Vue.use(VueGtag, { config: { id: 'G-XXXXX' }, appName: 'XXXX', pageTrackerScreenviewEnabled: true }, app.router) }The third image show the title from the second image. The second image from the first image. And the first image is correct, because the page was rendered via SSR.