Vue plugin for Google Analytics.
npm install vue-analyticsimport 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, trackPage and trackTime 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')
/**
* Time tracking
* @param {String} category
* @param {String} variable
* @param {Number} value
* @param {String} [label='']
*/
Vue.$ga.trackTime('JS Dependencies', 'load', 3549)and also in the component scope itself
export default {
mounted () {
this.$ga.trackPage('/home')
},
methods: {
onShareButtonClick () {
this.$ga.trackEvent('share', 'click', 'facebook')
}
}
}Here the documentation about pageview, events and timings
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']
})Sets a single field and value pair or a group of field/value pairs on a tracker object.
Read more about Googla analytics set method
Vue.$ga.set(fieldName, fieldValue)
// also possible to pass an object literal
Vue.$ga.set({ fieldName, fieldName })or in your component scope
export default {
methods: {
onClick () {
this.$ga.set(fieldName, fieldValue)
}
}
}Add the userId on first load just passing it in the options object
Vue.use(VueAnalytics, {
id: 'UA-XXX-X',
userId: 'xxx'
})it is also possible to set the userId in runtime using the set method
Implements Google Analaytics debug library.
You can find documentation about trace and sendHitTask here
Please remember that it is for debug only. The file size of analytics_debug.js is way larger than analytics.js
Vue.use(VueAnalytics, {
debug: {
enabled: true,
trace: false,
sendHitTask: 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