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

Vuejs and GDPR : how to be compliant with new EU regulations
by Janeth Kent Date: 21-09-2018 vue GDPR GDPR compliance privacy

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 flydisable 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
}
}
}

 
by Janeth Kent Date: 21-09-2018 vue GDPR GDPR compliance privacy hits : 9081  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Related Posts

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Cross-Origin Resource Sharing (CORS) and examples of XSS and CSRF

Cross-Origin Resource Sharing (CORS) enables web clients to make HTTP requests to servers hosted on different origins. CORS is a unique web technology in that it has both a server-side…

Angular vs React vs Vue: Which is the Best Choice?

With the growing popularity of Vue, Angular and React as frameworks and libraries for the web and app development, a constant doubt is which of these 3 we should learn,…

CRUD Operations Using Vue.js: a basic example

In this tutorial, we show you how to create CRUD application using vue js. here is very basic and simple example of vue.js crud app. using this vuejs crud (create read…

Vue.js 3.0: What are Hooks and how they work

This article introduces an experimental Vue feature called Hooks. Before you start This post is suited for developers of all stages including beginners. Here are a few things you should already have…

Best Open-Source Javascript Date Picker Plugins and Libraries

For date pickers, selecting menus is a common choice as they are simple to set up. But I suppose our customers deserve better after centuries of using MM / DD…

Starting with Vue.js: how about using it?

Vue.js seems to be another JavaScript UI library with a strong community support. If you've got a project coming up and you're wondering which tool to choose from, you can…

Vue.js: a quick start guide for beginners. Part 3

Welcome here again! Last time we didn't listen to our very first user events and and methods to react to these events. Now we are going to explain directives and…

Which Javascript frameworks will rule in 2019?

In this article, we will review and analyze the 2018 State of JavaScript report to later focus attention on frameworks that will be at the center of attention in 2019. Let's…

Best 5 Frontend Development Topics in 2019

Ah, a new year. A time of positivity, a time to restart. For new objectives and proposals. And in the world of developers, to look at the scenery and decide…

Vue.js: a quick start guide for beginners. Part 2

In the previous article, we discovered out how to add Vue to our index.html with a regular < script > tag and we were able to add our first reactive…

Vue.js: a quick start guide for beginners. Part 1.

Learning a new framework can be a very complicated process for any developer, especially for someone that is still learning the basics of JavaScript. For this reason, we decided to…