Tips & Tricks for vue-analytics
Some useful advice that can save you time and energy
After more then a year since I’ve published the first version of vue-analytics, a lot of people have been asking me examples and suggestions about this plug-in, so I thought was time to share few tips and tricks.
ps: take in mind that I will use a simple vue-cli project with vuex and vue-router pre-installed.
Installation
The installation it’s a step that lots of developers that just started using Vue find hard to deal with.
First thing first, go to the root of your project with the terminal and type yarn add vue-analytics.
In the src/main.js file, just before the application mounts, install the plugin like so
And that’s pretty much it, but don’t stop reading yet.
Important options
After the basic installation, what I usually suggest is to add few more options to make your development process more easy.
We need the router instance to track all routes automatically, debug mode turned on to log all activities and, very important, we need to turn off the sendHitTask property to avoid sending data to your domain during development.
How do I use it?
If you have followed the previous steps, now you can basically use the API of Google Analytics as you would normally do and you can access that directly from your component scope.
For example you want to track a user clicking on a button to increase a counter
This is all you need to do, and for pages and other events you need to follow the same pattern.
You can find all other events and the properties they need, in the documentation.
Multiple domains tracking
Tracking more then one account is kinda intuitive: normally you need to pass a string with an ID to start tracking, but if you pass an array of IDs it will send events to both domains automatically.
Error exceptions tracking
The easiest way I can find to track errors in an application is to allow the plugin to do it automatically and to add your own specific handler when you really need it.
Let’s update our configuration:
With this setup, the plugin will create a new Vue.config.errorHandler that will track all errors within the Vue component and also listen to global errors fired by the browser.
Be aware that if you need to add your own Vue.config.errorHandler you need to do it before you install the plugin or you will overwrite the plugin handler.
What about Vuex?
This is something that a lot of people have been asking me to add and it is finally available since the 5.8.0 release.
First thing to do is to add the vue-analytics middleware to your Vuex store and create getters, actions and mutations to refactor our previous example:
The Vuex implementation needs an object meta in your action payload and then it will dispatch the Google Analytics event following an array pattern so that would be possible to send even more events at once if needed.
This is how our counter looks like:
Can I use it with Nuxt?
Yes, you can!
I’ve already bundled vue-analytics inside a Nuxt module called analytics-module and, besides the way of installing the module itself inside the framework, options and API remain the same.
The end
I hope that this article will help you to setup vue-analytics more quickly and painlessly.
And remember: don’t be afraid to drop issues on GitHub for questions, bugs or feature requests.
