Double GA payload

[picks44]

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
[email protected] C:\laragon\www\cp-assistant
└── [email protected]

1. Operating system: Windows for dev / Debian for prod
2. 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'
const app = createApp(App)
app
  .use(i18n)
  .use(store)
  .use(router)
  .use(
    VueGtag,
    {
      config: { id: 'G-XXXXXXX' }
    },
    router
  )
  .mount('#app')

router/index.js

import { createRouter, createWebHistory } from 'vue-router'

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
  }
})
export default router

[MatteoGabriele]

I'm sorry but I need a reproduction on code sandbox or codepen, not a link to a website.
I really can't help like this. thank you.

[aivchen]

Experienced the same issue. I hope my comment will be helpful:)

https://codesandbox.io/s/vue-gtag-nuxtjs-pwimf?file=/plugins/gt.client.js

Look at the network tab in your browser. You see two rows:

Notice that the first one is xhr request and another one is gif.

Now let's compare requests query parameters.

First request (XHR):

Second request (Gif):

In the second request index is the name of the route.

[miketromba]

If you are using a GA4 property, this may be caused by: #406

[MatteoGabriele]

The weird part is the initiator: analytics.js?