Vue Analytics
Simple implementation of Google Analytics in Vue.js
This plugin will helps you in your common analytics tasks. Dispatching events, register some dimensions, metric and track views from Vue components.
Requirements
- Vue.js. >= 2.0.0
- Google Analytics account. To send data to
Optionnals dependencies
- Vue Router >= 2.x - In order to use auto-tracking of screens
Configuration
npm install vue-ua -S
or yarn add vue-ua
if you use Yarn package manager
Here is an example of configuration, compose with it on your own :
const router = routes mode linkActiveClass Vue
Documentation
Once the configuration is completed, you can access vue analytics instance in your components like that :
name: 'MyComponent' { return someData: false } methods: { this$ua // OR this$analytics } { this$ua }
You can also access the instance anywhere whenever you imported Vue
by using Vue.analytics
. It is especially useful when you are in a store module or
somewhere else than a component's scope.
Sync analytics with your router
Thanks to vue-router guards, you can automatically dispatch new screen views on router change ! To use this feature, you just need to inject the router instance on plugin initialization.
This feature will generate the view name according to a priority rule :
- If you defined a meta field for you route named
analytics
this will take the value of this field for the view name. - Otherwise, if the plugin don't have a value for the
meta.analytics
it will fallback to the internal route name.
Most of time the second case is enough, but sometimes you want to have more control on what is sent, this is where the first rule shine.
Example :
const myRoute = path: 'myRoute' name: 'MyRouteName' component: SomeComponent meta: analytics: 'MyCustomValue'
This will use
MyCustomValue
as the view name.
API reference
trackEvent (category, action = null, label = null, value = null)
/** * Dispatch an analytics event. * Format is the same as analytics classical values. * * @param category * @param action * @param label * @param value */
trackView (screenName, trackPage = false)
/** * Dispatch a view using the screen name * * @param screenName * @param trackPage */
trackTiming (timingCategory, timingVar, timingValue, timingLabel = null)
/** * Track an user timing to measure periods of time. * * @param * @param * @param * @param */
injectGlobalDimension (dimensionNumber, value)
/** * Inject a new GlobalDimension that will be sent every time. * * Prefer inject through plugin configuration. * * @param * @param * * @throws Error - If already defined */
injectGlobalMetric (metricNumber, value)
/** * Inject a new GlobalMetric that will be sent every time. * * Prefer inject through plugin configuration. * * @param * @param * * @throws Error - If already defined */
trackException (description, isFatal = false)
/** * Track an exception that occurred in the application. * * @param * @param */
changeSessionLanguage (code)
/** * Set the current session language, use this if you change lang in the application after initialization. * * @param */