Vue-multianalytics
A VueJS multianalytics tool
About
At Glovo we need to track a lot of events. And not in only one platform, but a few. That is why we needed vue-multianalytics, a simple plugin that allows you to track any event in multiple platforms at the same time.
This plugin has been inspired by the awesome library vue-ua, so a big thank you to it. If you want to just have Google Analytics, you should use vue-ua instead of vue-multianalytics.
Configuration
A typical npm install vue-multianalytics -s
will be enough to download it.
To start using it, you need to add the plugin in your main .js entry
let gaConfig = appName: 'Test' // Mandatory appVersion: '0.1' // Mandatory trackingId: 'YOUR_UA' // Mandatory debug: true // Whether or not display console logs debugs (optional) options: 'clientId': '35009a79-1a05-49d7-b876-2b884d0f825b' 'siteSpeedSampleRate': 10 let mixpanelConfig = token: 'YOUR_TOKEN' Vue
Using nuxt, you can use the flag returnModule
to get the module and be able to inject it directly in the app as a plugin
let gaConfig = appName: 'Test' // Mandatory appVersion: '0.1' // Mandatory trackingId: 'YOUR_UA' // Mandatory debug: true // Whether or not display console logs debugs (optional) let mixpanelConfig = token: 'YOUR_TOKEN' { }
Tracking
Once the configuration is completed, you can access the vue-multianalytics instance in your components like that :
this.$ma.trackEvent(params, excludedModules)
ExcludedModules
You can easily exclude modules from being fired by an event adding them to the excludedModules array. This is per-event based, so feel free to use them as you want
// this will exclude mixpanel from being firedlet excludedModules = 'mixpanel'this$ma // this will exclude both, mixpanel and ga from beign firedthis$ma // this will exclude nothing from beign fired, all the modules will be triggeredthis$ma
VueRouter integration
vue-multianalytics can be integrated with vue-router to track each new screen view on router change.
To use this feature, you just need to pass your vue-router
instance in the params property as vueRouter.
const router = ... let mixpanelConfig = token: 'YOUR_TOKEN' Vue
This feature will generate the view name according to a priority rule:
- If you have defined a meta field in your route named
analytics
const homeRoute = path: '/home' name: 'home' meta: analytics: 'ThisWillBeTheName'
- If you define a
preferredProperty
in your vue-multianalytics params, that params will be the used as screen name. Possible params are:name
,path
,fullPath
. - If nothing is provided
path
will be used.
If you want to ignore some routes, just specify then in the ignoredViews
param.
Custom Plugin
Usually you don't want to call directly the library, but call an interface first to manipulate the data before.
// Not a very good practice //component1if a === condition1 this$ma else this$ma //component2if b === condition1 this$ma // Much better using an interface and handle the logic there. No code repeated, better understanding of the flow // component1this$mam// componen2this$mam
To do it so, you just need to create a mixin to act as an interface with the vue-multianalytics.
Mixin
Just create a module that exports a function accepting as a parameter the analytics library:
{ return { if input === true multianalytics else multianalytics } }
You can define inside all the methods that you want and call all the library api from the parameter received.
Binding
You just need to pass the mixin as the third parameter when you initialize the plugin
Vue
Usage
Everything is already set, you can now call your mixin methods from anywhere in your vue application using this.$mam
(instead of this.$ma
).
//Component1 { } methods: { this$mam }
API
trackView({viewName})
/** * Dispatch a view using the screen name * params should contain * @param viewName */ this$ma
trackEvent({category = 'Event', action, label = null, value = null})
/** * Dispatch a view using the screen name * params object should contain * * @param category * @param action * @param label * @param value */ this$ma
addTransaction({id, affiliation = '', revenue = 0, shipping = 0, tax = 0, currency = 'USD'})
/*** Ecommerce transactions.* ecommerce needs to be enabled in the module options (ecommerce = true)* More info at https://developers.google.com/analytics/devguides/collection/analyticsjs/ecommerce* @param* @param* @param* @param* @param* @param*/this$ma
addItem({id, name, sku, category, price = 0, quantity = 1})
/*** Ecommerce transactions.* ecommerce needs to be enabled in the module options (ecommerce = true)* More info at https://developers.google.com/analytics/devguides/collection/analyticsjs/ecommerce* @param* @param* @param* @param* @param*/this$ma
trackTransaction()
/*** Ecommerce transactions.* ecommerce needs to be enabled in the module options (ecommerce = true)* Sends the transaction*/this$ma
clearTransactions()
/*** Ecommerce transactions.* ecommerce needs to be enabled in the module options (ecommerce = true)* Clears the transaction*/this$ma
identify()
/** * Identify * * @param userId - The userId to identify with * @param options - */ this$ma
reset()
/** * Reset the user & clears storage * */ this$ma
setAlias(alias)
/** * Set an alias * * @param alias */ this$ma
setUsername(name)
/** * Set a username * * @param name */ this$ma
setUserProperties(properties)
/** * Set some user properties * * @param properties */ this$ma
setUserPropertiesOnce(properties)
/** * Set some user properties, but only once * * @param properties */ this$ma
incrementUserProperties(properties)
/** * Increment some user properties * * @param properties */ this$ma
setSuperProperties(properties)
/** * Set some properties to be sent in every event * * @param properties */ this$ma
setSuperPropertiesOnce(properties)
/** * Set some properties to be sent in every event * * @param properties */ this$ma
Modules
Currently, supported modules are the following
Google Analytics
Name: ga
Config:
appName: 'Test' // MandatoryappVersion: '0.1' // MandatorytrackingId: 'YOUR_UA' // Mandatoryecommerce: true // Enables ecommerce support (optional)config: {} // Initial GA config. Defaults to 'auto'debug: true // Whether or not display console logs debugs (optional)
Supported Events: trackView
, trackEvent
, trackException
, addTransaction
, addItem
, trackTransaction
, clearTransactions
, setUsername
, trackTiming
Mixpanel
Name: mixpanel
Config:
token: 'YOUR_TOKEN'config: {} // Initial mixpanel configdebug: true // Whether or not display console logs debugs (optional)
Supported Events: trackView
, trackEvent
, setAlias
, setUsername
, setUserProperties
, setUserPropertiesOnce
, incrementUserProperties
, setSuperPropertiesOnce
, setSuperProperties
, setSuperPropertiesOnce
Facebook Pixel
Name: facebook
Config:
token: 'YOUR_TOKEN'debug: true // Whether or not display console logs debugs (optional)
Supported Events: trackView
, trackEvent
Segment
Name: segment
Config:
token: 'YOUR_TOKEN'debug: true // Whether or not display console logs debugs (optional)
Supported Events: trackView
, trackEvent
, setAlias
, setUserProperties
, setSuperProperties
MParticle
Name: mparticle
Config:
token: 'YOUR_TOKEN'debug: true // Whether or not display console logs debugs (optional)
Supported Events: trackView
, trackEvent
, setAlias
, setUserProperties
, setSuperProperties
Custom Modules
You can now add your own custom modules simply by calling
VueMultianalytics.addCustomModule(name, Module)
Example:
// OwnModule.js { // ... } { if thisconfigdebug } // ..
// main.js VueMultianalytics// or VueMultianalytics.use('owenit', OwenItModule) Vue
Thanks @anteriovieira for the suggestion
Todo
Demo👍Further integration with mixpanel👍Ecommerce support👍Own module👍- New events:
registerSuperproperties,alias, timedEvents - New modules:
segment,mparticleappboy, kissmetrics? - Tests