Double GA payload - Githubissues

picks44 commented 3 years ago

Description

I get a double GA Request payload when a page is viewed, one with the actual router page name, one with the app name...

Expected behavior

I should only get one payload with the router page name

Actual behavior

en=page_view&_et=5090&_eu=I&ep.page_path=%2Fcustomer-order-tracking
en=page_view&_et=994&_eu=I&dr=https%3A%2F%2Fassistant.cp.com%2Fstock-lead-time-irp&dt=CP%20Assistant

First payload is OK, second one is not. en=page_view&_et=994&_eu=I&dr=https%3A%2F%2Fassistant.cp.com%2Fstock-lead-time-irp&dt=**CP%20Assistant** this is the app name, that i can see in my GA report along with actual "true" page names (coming from router).

Environment

npm ls vue-gtag:

PS C:\laragon\www\cp-assistant> npm ls vue-gtag
cp-assistant@1.2.0 C:\laragon\www\cp-assistant
└── (empty)

Operating system: Windows for dev / Debian for prod
Browser and version: Chrome

Reproducible Demo

https://assistant.cp.com/

My config

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import i18n from './i18n'
import VueGtag from 'vue-gtag-next'
const app = createApp(App)
app
  .use(i18n)
  .use(store)
  .use(router)
  .use(VueGtag, {
    property: {
      id: 'G-XXXXXXX'
    }
  })
  .mount('#app')

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import { trackRouter } from 'vue-gtag-next'

const routes = [
  {
    path: '/authenticate',
    name: 'authenticate',
    component: () =>
      import(
        /* webpackChunkName: "authenticate" */ '../views/auth/Authenticate.vue'
      )
  },
  {
    path: '/',
    name: 'home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/stock-lead-time-irp',
    name: 'slt',
    component: () =>
      import(/* webpackChunkName: "slt" */ '../views/slt/Slt.vue'),
    meta: {
      requiresAuth: true
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
  }
})
trackRouter(router)
export default router

arlejeun commented 1 year ago

Did you have any update on this issue? I'm starting a new project with Vue 3.2.45 composition API, vue-router 4.1.5, vue-gtag-next 1.14.0 and I noticed duplicate pageview when I use the track router function. I read another issue somewhat similar with Nuxt and SSR but I'm not using Nuxt and the proposed workaround does not seem to apply in this case.

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { abilitiesPlugin } from '@casl/vue'
import ability from '@/plugins/casl/ability'
import gtag from "vue-gtag-next";

import router from './router'
import App from '@/App.vue'

const app = createApp(App)

app.use(abilitiesPlugin, ability, {
    useGlobalProperties: true,
})
app.use(createPinia())
app.use(router)
app.use(gtag, {
  isEnabled: true,
  useDebugger: true,
  property: { id: "G-QEW411N10N" }
});

app.mount('#app')

router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'
import { useUserStore } from '@/stores/user'
import { trackRouter } from "vue-gtag-next";

const routes = setupLayouts(generatedRoutes)

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    ...routes,
  ],
})

trackRouter(router, {
  template(to, from) {
    const userStore = useUserStore()
    const { userId } = storeToRefs(userStore)
    return {
      page_title:  document.title,
      page_path: to.fullPath,
      user_id: userId.value
    }
  }
})

router.beforeEach((to, _, next) => {
  const userStore = useUserStore()
  const { isLoggedIn, isAdmin} = storeToRefs(userStore)
  document.title = to.meta?.title as string|| to.name as string || 'Unknown'
 if (to.meta.requiresAuth && !isLoggedIn.value) {
   return next({ name: 'not-authorized', query: { redirect: to.fullPath }})
  } else {
    return next()
  }
})

export default router

Here is the results in GA4

First event (correct with user_id)

Second event (should not be generated)

I tried to desactive sending page view in the config but it doesn't work.

 app.use(gtag, {
  isEnabled: true,
  useDebugger: true,
  send_page_view: false,
  property: { id: "G-QEW411N10N" }
});

When I remove the trackRouter from the router script, it only generates the wrong pageviews without the user_id.

Please any suggestion is really apprecuated.

arlejeun commented 1 year ago

I found a solution to my problem. Check the configuration of your GA Web Stream.

Make sure to uncheck "Page changes based on browser history events" to avoid the duplicate with the events sent by vue-gtag.

That way, you give all the granular events from your code. Thanks for building this library

johnleider commented 11 months ago