GDPR-compliant Google Analytics in Nuxt

GDPR

Google Analytics

Nuxt

Sep 12, 2021

In this post, I explain how to not only successfully implement Google Analytics in Nuxt, but also make it GDPR-compliant.

In this post, we will use the vue-gtag library to implement GDPR-compliant Google Analytics with Nuxt.js.

This post was originally created for Nuxt 2. If you are using Nuxt 3, use vue-gtag v2 or vue-gtag-next. The concepts are the same for Nuxt 3. Only the syntax differs.

Setup

The very first thing we do is install the dependency.

bash

NPM

npm add vue-gtag

Now we need to register vue-gtag as a Nuxt plugin. For this, we can create the file vue-gtag.js in the ./plugins directory.

In the process, also add your tracking ID from your Google Analytics dashboard to the plugin configuration. Take a look at all the plugin options if needed.

JavaScript

vue-gtag.js

import Vue from 'vue';
import VueGtag from 'vue-gtag';

export default () => {
  Vue.use(
    VueGtag,
    {
      config: {
        id: 'G-XXXXXXXXX,
      },
    },
  );
};

For auto-tracking to work when changing pages, the router instance must be passed as the third parameter.

JavaScript

vue-gtag.js

import Vue from 'vue';
import VueGtag from 'vue-gtag';

export default ({ app }) => {
  Vue.use(
    VueGtag,
    {
      config: {
        id: 'G-XXXXXXXXX',
      },
    },
    app.router
  );
};

Vue-gtag is now successfully integrated.

GDPR compliance

GDPR requires that all non-essential features of a website that collect user data, among other things, can only be applied with the user's consent.

Currently, Google Analytics is permanently running and thus represents a conflict with the GDPR law.

The most important thing is that Google Analytics must be initially disabled. Before you activate the plugin, you must always check whether the user has already consented or not.

For this, we can setup vue-gtag so that we don't initialize it until consent is given. For this, we need to set the bootstrap parameter to false.

JavaScript

vue-gtag.js

import Vue from 'vue';
import VueGtag from 'vue-gtag';

export default ({ app }) => {
  Vue.use(
    VueGtag,
    {
      bootstrap: false,
      config: {
        id: 'G-XXXXXXXXX',
      },
    },
    app.router
  );
};

In this state, no script is downloaded and no pages are tracked.

Anonymize IP

If you are using GA4, IP anonymization is always enabled and the following step is not required.

Add IP anonymization to the plugin options as follows.

JavaScript

vue-gtag.js

import Vue from 'vue';
import VueGtag from 'vue-gtag';

export default ({ app }) => {
  Vue.use(
    VueGtag,
    {
      bootstrap: false,
      config: {
        id: 'G-XXXXXXXXX',
        params: {
          anonymize_ip: true,
        },
      },
    },
    app.router
  );
};

Initialize after consent

Vue-gtag is integrated as a plugin, but is initially disabled. To initialize vue-gtag, we use the bootstrap function provided by vue-gtag.

The following example contains the initVueGtag method, that can be called when the user accepts tracking. The consent is called hasConsent in this example. How you get consent and name your variables depends on your consent solution.

Vue

<script>
  import { bootstrap } from 'vue-gtag';

  export default {
    methods: {
      initVueGtag() {
        // Your logic for consent
        const hasConsent = () => ...;

        if (!hasConsent) return;
        bootstrap().then(() => {
          // vue-gtag is now running
        });
      },
    },
  };
</script>

Get more information about bootstrap in the vue-gtag docs.

Opt-Out & Opt-In

If the user decides to opt-out of tracking after initialization, the this.$gtag.optOut() method from vue-gtag can be used to stop tracking the user.

When the user again decided to opt-in, you can use the this.$gtag.optIn() method and skip the initialization of vue-gtag as it is already bootstrapped.

You could also trigger a new page view event when the user opts-in again by calling this.$gtag.pageview(this.$route);.

Debugging

To test the functionality of the vue-gtag and get other deep insights, the Chrome extension GTM/GA Debugger can be used.