Gridsome: GDPR Consent Tool

[upandfine]

Summary

Since a ruling of the ECJ, an opt-in is required for any tracking. Each tracking tool must be confirmed individually, so that a visit to the website is also possible without tracking.

Basic example

https://usercentrics.com/
(click on more info or the link above!)

Motivation

Anyone who wants to create websites for EU visitors must include such a tool. If gridsome integrates such a tool directly, it is much easier to use gridsome. I am happy to answer your questions and help to build such a tool.

[Coupz]

Can I bump this?
Or maybe add this https://github.com/promosis/vue-cookie-accept-decline to the plugin @gridsome/plugin-google-analytics, which would be a perfect solution.

Thanks 🙏

[noxify]

I have used quantcast in the past - It was very easy to implement it, just adding the code in the index.html.

https://github.com/noxify/gridsome-starter-articles/blob/01ff8f7f76757be87d93cbd6e9dcc22621737e79/src/index.html

Not sure if gridsome should add it "to the core" - Maybe creating an plugin which adds the GDPR Banner/Modal/Whatever if needed.

[Coupz]

I've got it working with vue-cookie-accept-decline.

The trick is, you need to disable Google Analytics at first, then the vue-cookie-accept-decline plugin/bar comes into place in the Default.vue file, if the user accepts it you get redirect to /cookie-accepted page, which redirects you back to the frontpage. Tested and works.

If you have any questions, ping me and I'll try to break it more detailed or you can find it soon on my upcoming blog pretty soon :)

gridsome.config.js

plugins: [
    {
      ...
    },
    {
      use: '@gridsome/plugin-google-analytics',
      options: {
        id: 'UA-XXXXXXXX-X',
        disabled: true
      }
    }
  ],

main.js

// Import main css
import '~/assets/style/index.scss';

// Import default layout so we don't need to import it to every page
import DefaultLayout from '~/layouts/Default.vue';
import VueCookieAcceptDecline from 'vue-cookie-accept-decline';

// The Client API can be used here. Learn more: gridsome.org/docs/client-api
export default function(Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout);
  Vue.component('vue-cookie-accept-decline', VueCookieAcceptDecline);
}

Default.vue

<template>
  <div id="app">
    ...
    <vue-cookie-accept-decline
      :ref="'myPanel1'"
      :elementId="'myPanel1'"
      :debug="false"
      :position="'bottom'"
      :type="'bar'"
      :disableDecline="true"
      :transitionName="'slideFromBottom'"
      :showPostponeButton="false"
      @status="cookieStatus"
      @clicked-accept="cookieClickedAccept"
      @clicked-decline="cookieClickedDecline"
    >
      <div slot="message" class="messageText">
        Text
      </div>
      <div slot="acceptContent">
        Allow Analytics
      </div>
    </vue-cookie-accept-decline>
  </div>
</template>

<script>
import Vue from 'vue';
import Logo from '~/components/Logo.vue';
import ToggleTheme from '~/components/ToggleTheme.vue';

export default {
  data() {
    return {
      status: null
    };
  },
  props: {
    showLogo: { default: true }
  },
  components: {
    Logo,
    ToggleTheme
  },
  methods: {
    cookieStatus(status) {
      this.status = status;
    },
    cookieClickedAccept() {
      this.status = 'accept';
      this.$ga.enable();
      this.$router.replace({ // here we need to redirect to user, or Google Analytics won't start writing the cookie and won't work
        path: '/cookie-accepted',
        force: true
      });
    },
    cookieClickedDecline() {
      this.status = 'decline';
    }
  },
  computed: {
    statusText() {
      return this.status || 'No cookie set';
    }
  }
};
</script>

CookieAccepted.vue

<template>
  <Layout>
    <p>Redirecting back ...</p>
  </Layout>
</template>

<script>
export default {
  created() {
    this.$router.replace({ // redirect the user back to the frontpage
      path: '/',
      force: true
    });
  }
};
</script>

Now the cookie is set and GA is fired.