Vuejs and GDPR : how to be compliant with new EU regulations

 

 

Dear Vue's users, we know you're battling with GDPR compliance: but it can be quite simple if you use vue-analytics, on the grounds that there are two or three highlights here that can enable you to deal with the European Union's General Data Protection Regulation prerequisites.

Suppose we have this situation as a main priority: we are releasing another update in order to reach the "GDPR compliance" and we have to demonstrate a couple of checks to our clients, and after that possibly begin tracking them once more.

There's a property in the plugin called disabled, that enables us to to block analytics from tracking the users.

 

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
Vue.use(Vue.Analytics,{
id:'yourID',
disabled:true
})

As should be obvious in the model, it's anything but difficult to execute: Google Analyticswill in any case will be loaded nonconcurrently, yet it won't begin tracking except 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.

 

How do I implement this check?

The disabled property should be valid or false, so you can pass a straightforward boolean and also a function, a promise or a function that returns a promise: simply make sure to to return a truthy or falsy value..

 

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import axios from 'axios'
Vue.use(Vue.Analytics,{
id:'yourID',
disabled:axios.get('/yourUrl/myuser').then (response =>{
return response.data.user.analytics.isDisabled
})

 

So, we are recovering a few information from a server, yet could likewise be from the localStorage or sessionStorage, and it could be helpful to check whether the client checked or not your your privacy policy or cookie consent form. Keep in mind that you can at present store useful information, as "is the user logged in" or "is the menu open", since they are not related to user privacy but they are required from the application to work properly.

 

Opt-in and opt-out

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!

 

export default{
name:'MyComponent'

methods: {
 disableTracking(){
    this.$ga.disable()
    //no more traking
},
 enableTracking(){
    this.$ga.enable()
    //start traking
}
}
}