Table of Contents
URL: https://www.progressiverobot.com/vuejs-google-analytics/
Google Analytics can be great if you want to know how your application is being used. Often with single-page applications though, it's trickier to get proper screen view analytics and hook into events directly due to the odd API of the official Google Analytics package. However, there is a <^>vue-ua<^> package available that automates much of the complication for you and allows you to integrate Google Analytics into your Vue.js app with ease.
Installation
<^>vue-ua<^> can be installed via. Yarn or NPM:
# Yarn
$ yarn add vue-ua -D
# NPM
$ npm install vue-ua --save-dev
Setup
Initialize <^>vue-ua<^> in your app by importing the plugin and enabling it with the required configuration parameters. Note that <^>vue-ua<^> only supports app tracking, not web tracking.
If you're using <^>vue-router<^>, you can add it to the <^>vue-ua<^> config in order to automatically track route views as screen views in GA.
[label src/main.js]
import VueAnalytics from 'vue-ua'
import VueRouter from 'vue-router'
...
// If you're using vue-router and want route integration, create your routes before enabling vue-ua.
const router = new VueRouter({
routes
})
Vue.use(VueAnalytics, {
// [Required] The name of your app as specified in Google Analytics.
appName: '<app_name>',
// [Required] The version of your app.
appVersion: '<app_version>',
// [Required] Your Google Analytics tracking ID.
trackingId: '<your_tracking_id>',
// If you're using vue-router, pass the router instance here.
vueRouter: router,
// Global Dimensions and Metrics can optionally be specified.
globalDimensions: [
{ dimension: 1, value: 'FirstDimension' },
{ dimension: 2, value: 'SecondDimension' }
// Because websites are only 2D, obviously. WebGL? What's that?
],
globalMetrics: [
{ metric: 1, value: 'MyMetricValue' },
{ metric: 2, value: 'AnotherMetricValue' }
]
})
Sending Data
In your components, you can track events, screen views, and exceptions with ease. You also can use the same methods globally anywhere in your app by importing <^>Vue<^> and accessing <^>Vue.analytics<^>.
Tracking Events:
// Component Usage
this.$ua.trackEvent(
eventCategory: string, eventAction: string, eventLabel: string, eventValue: number
)
// Global Usage
Vue.analytics.trackEvent(
eventCategory: string, eventAction: string, eventLabel: string, eventValue: number
)
Tracking Screen Views:
// Component Usage
this.$ua.trackView(routeName: string)
// Global Usage
Vue.analytics.trackView(routeName: string)
Tracking Exceptions:
// Component Usage
this.$ua.trackException(description: string, isFatal: boolean)
// Global Usage
Vue.analytics.trackException(description: string, isFatal: boolean)
Change the Language:
// languageCode is any valid IETF language tag.
// Component Usage
this.$ua.changeSessionLanguage(languageCode: string)
// Global Usage
Vue.analytics.changeSessionLanguage(languageCode: string)
You now have all the tools you need to collect data on everything your users do in your Vue.js SPA. Enjoy the unlimited power!
