Vue-gtag Vue 与 Google Analytics 不工作

Question

Hello I am trying to get my Vue app to register to Google Analytics. I am using this plugin:

https://matteo-gabriele.gitbook.io/vue-gtag/v/next/ in a vue 3.0 app with composition API

I have main.js setup this way

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueGtag from "vue-gtag-next";

const app = createApp(App);

app.use(router)

app.use(VueGtag, {
  property: {
    id: "xxxmypropertyidxxx"
  }
});

app.mount('#app')

and i have my router.js setup this way

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

import { trackRouter } from "vue-gtag-next";

import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { 
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  linkActiveClass: "active", // active class for non-exact links.
  linkExactActiveClass: "active" // active class for *exact* links.
})

trackRouter(router);

export default router

Unfortunately, no views are showing up in GA real time. Even tried adding page view events to individual pages

Thanks for your help!!

Answer 1

I had the exact same issue, and it turned out that vue-gtag takes longer to start working than the alternative of embedding the gtag in your HTML header .

The "Check your tag setup" support.google page gives you the expectation that Real-Time reports should already be working, but it actually takes much more time for even the Real-Time data to show on the Google Analytics page. In my case, it starting working after 18ish hours.