MatteoGabriele / vue-gtag

Global Site Tag plugin for Vue (gtag.js)
https://matteo-gabriele.gitbook.io/vue-gtag/
MIT License
864 stars 64 forks source link

SPA Auto Tracking not working #100

Closed rsalunga29 closed 4 years ago

rsalunga29 commented 4 years ago

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Description

The auto-tracking of VueRouter pages seems to not be working, I'm currently viewing my /articles router but Google Analytics only displays / as the current active route. See code on Demo section

Expected behavior

Google Analytics should track VueRouter's routes for SPAs

Actual behavior

Nothing happens, only tracks / which is the index page

Environment

Run this command in the project folder and fill in their results:

npm ls vue-gtag:

Then, specify:

  1. Operating system: macOS Catalina
  2. Browser and version: Chrome 80.0.3987.122

Reproducible Demo

I'm using the vue-cli for this with a separate main.js(entry point) and router.js files.

router/index.js (this is the router.js file)

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/pages/Home'
import About from '@/pages/About'
import Articles from '@/pages/Articles'
import VueGtag from 'vue-gtag'

Vue.use(VueRouter)

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

  {
    path: '/about',
    name: 'About',
    component: About,
  },

  {
    path: '/articles',
    name: 'Articles',
    component: Articles,
  }
]

Vue.use(VueGtag, {
  config: { id: 'UA-159900000-1' }
}, router)

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

main.js

import Vue from 'vue'
import App from '@/App'
import router from '@/router'
import axios from 'axios'
import '@/assets/tailwind.css'

Vue.config.productionTip = false

Vue.prototype.$http = Vue.$http = axios

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
MatteoGabriele commented 4 years ago

As far as I can see from your example, you are defining the router constant after initializing Vue Gtag so it's probably reading undefined as a value

rsalunga29 commented 4 years ago

As far as I can see from your example, you are defining the router constant after initializing Vue Gtag so it's probably reading undefined as a value

Oof, I didn't noticed this. Let me try and see if it works