Google Analytics, GDPR and Vuejs
A quick guide on how to be compliant with new EU regulations
Dear Vue people, I know you’re probably still struggling with this one (GDPR compliance): but it can be pretty easy if you are using vue-analytics, because there are a couple of features here that can help you manage the 🇪🇺 European Union’s General Data Protection Regulation requirements.
Using vue-analytics
Let’s say you have this scenario in mind: you are releasing a new update to be GDPR proof (because you want to sleep at night again) and you need to show a few buttons and checks to your users, and then maybe start tracking them again.
There’s a property in the plugin options called disabled, that allows you to block analytics from tracking your user.
As you can see in the example, it’s very easy to implement: The Google Analytics file will still be loaded asynchronously, but it won’t start tracking unless the disabled option value is false again.
If the user opts-out, it will abort every event.
You can read more in the official Google Analytics documentation about the opt-out option here.
How do I implement this check?
The disabled property needs to be true or false, so you can pass a simple boolean but also a function, a promise or a function that returns a promise: just remember to return a truthy or falsy value.
In the example, we are retrieving some data from a server, but could also be from the localStorage or sessionStorage, and it could be useful to see if the user checked or not your privacy policy or cookie consent form. Remember that you can still store functional data, like “is the user logged in” or “is the menu open”, because they are not related to user privacy but they are required from the application to work properly.
Opt-in and opt-out on the fly
There are two methods that you can use to opt-out and opt-in your user on the fly: disable and enable.
These two methods are very easy to use, just call them wherever you are and whenever you want!
Well, that was it! I hope I made this topic slightly more clear.
As always, drop a comment here or open an issue on Github if you have any problems!
