Vue plugin to handle basic Google Analytics tracking: pages and events.
Here the documentation about pageview and events
npm install vue-analytics
import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
// your Google Analytcs tracking ID
const id = 'UA-XXX-X'
Vue.use(VueAnalytics, { id })
It's only possible to track events and pages.
trackEvent
and trackPage
methods are available in the Vue instance
/**
* Page tracking
* @param {String} page
* @param {String} title
* @param {String} location
*/
Vue.$ga.trackPage('/home')
/**
* Event tracking
* @param {String} category
* @param {String} action
* @param {String} [label='']
* @param {Number} [value=0]
*/
Vue.$ga.trackEvent('share', 'click', 'facebook')
and also in the component scope itself
export default {
mounted () {
this.$ga.trackPage('/home')
},
methods: {
onShareButtonClick () {
this.$ga.trackEvent('share', 'click', 'facebook')
}
}
}
Vue.use(VueAnalytics, {
onAnalyticsReady () {
// here Google Analaytics is ready to track!
}
})
Auto-tracking is enabled by default and it will load the Google Analytics script and start tracking every route change.
To be able to work properly the route object needs to have a name
and a path
import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: {
template: '<div>home page!</div>'
}
},
{
name: 'about',
path: '/about',
component: {
template: '<div>about page!</div>'
}
}
]
})
// your Google Analytcs tracking ID
const id = 'UA-XXX-X'
Vue.use(VueAnalytics, { id, router })
If you only need to track your routes, this is everything you need to do!
Vue.use(VueAnalytics, {
id: 'UA-XXX-X',
autoTracking: false
})
Auto-tracking tracks every route in you router instance, but if needed, it's possible to pass an array of route names that we don't want to track
Vue.use(VueAnalytics, {
id: 'UA-XXX-X',
router: router
ignoreRoutes: ['home']
})
There is already a Google Analytics extension for Chrome that allows you to read what's going on. This logger will just tell you what type of tracking is fired and which parameters. Enable/disable logs. Default value is false.
Vue.use(VueAnalytics, {
debug: true
})
You can disable auto-tracking and the auto-loading of the Google Analytics script just setting manual
to true
Vue.use(VueAnalytics, {
manual: true
})
With this setup, the plugin only exposes the tracking methods and few helpers, so you have to manually load the script tag from Google, add the tracking ID to the Google snippet and start tracking pages manually.
You can obviously load your google script and snippet in the body tag but you can also still use the loadScript
method which requires the tracking ID.
import VueAnalytics, { loadScript } from 'vue-analytics'
Vue.use(VueAnalytics)
const id = 'UA-XXX-X'
loadScript(id).then((response) => {
if (response.error) {
// couldn't load the Google script
return
}
// all fine!
})
It is also possible to manually start auto-tracking, but you need to pass to the router instance as a parameter
import Vue from 'vue'
import VueAnalytics, { loadScript, autoTracking } from 'vue-analytics'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: {
template: '<div>home page!</div>'
}
},
{
name: 'about',
path: '/about',
component: {
template: '<div>about page!</div>'
}
}
]
})
Vue.use(VueAnalytics)
const id = 'UA-XXX-X'
loadScript(id).then((response) => {
if (response.error) {
return
}
autoTracking(router)
})
Please drop an issue, if you find something that doesn't work, or a feature request at https://github.com/MatteoGabriele/vue-analytics/issues
Follow me on twitter @matteo_gabriele