GDPR compliant Google Analytics in Nuxt

GDPR
Google Analytics
Nuxt
September 12, 2021

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

GDPR compliance with Google Analytics in Nuxt.js

Google Analytics Module

⚠️

This package does not support GA4. This package currently only supports GA3/UA.

You need to start by integrating Google Analytics into your project. You can use the community module @nuxtjs/google-analytics. It is a Google Analytics integration for Nuxt using vue-analytics.

Installation

First install the dependency:

bash
NPM
npm i -D @nuxtjs/google-analytics

Then add @nuxtjs/google-analytics into the buildModules array of nuxt.config.js.

JavaScript
nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/google-analytics'
  ]
};

Now you need to add the googleAnalytics object to your nuxt.config.js to enter your Google Analytics ID:

JavaScript
nuxt.config.js
export default {
  googleAnalytics: {
    id: 'UA-XXXXXXX-X'
  }
};

Now, Google Analytics should already be ready and running.

GDPR compliance

The 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.

Solution

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

JavaScript
nuxt.config.js
export default {
  googleAnalytics: {
    id: 'UA-XXXXXXX-X',
    disabled: true
  }
};

Now, it is important that you always activate Google Analytics when the user's consent has been obtained.

Vue
<script>
  import { onAnalyticsReady } from 'vue-analytics';

  export default {
    mounted() {
      onAnalyticsReady().then(() => {
        const hasConsent = () => {}; // your logic for consent
        if (hasConsent) {
          this.$ga.enable(); // activate module
        }
      });
    }
  };
</script>

There is one last issue that we need to work on. You now have Google Analytics enabled, but it was initially disabled and therefore the current page visit was not tracked (even if you activated it). For this, we need to invoke a simple method to manually track the current page:

Vue
<script>
  import { onAnalyticsReady } from 'vue-analytics';

  export default {
    mounted() {
      onAnalyticsReady().then(() => {
        const hasConsent = () => {}; // your logic for consent
        if (hasConsent) {
          this.$ga.enable(); // activate module
          this.$ga.page(this.$route.path); // track current route
        }
      });
    }
  };
</script>

You may want to lay out the two methods you are calling into an external method. This way you can call the method also when the approval is pending and follows.

Vue
<script>
  import { onAnalyticsReady } from 'vue-analytics';

  export default {
    mounted() {
      onAnalyticsReady().then(() => {
        const hasConsent = () => {}; // your logic for consent
        if (hasConsent) {
          this.activateGA();
        } else {
          // Ask for consent
        }
      });
    },

    methods: {
      activateGA() {
        this.$ga.enable(); // activate module
        this.$ga.page(this.$route.path); // track current route
      }
    }
  };
</script>

Debugging

It is very helpful to enable the debug function. This allows them to see in local development if and how Google Analytics is tracking the pages.

JavaScript
nuxt.config.js
export default {
  googleAnalytics: {
    id: 'UA-XXXXXXX-X',
    disabled: true,
    debug: {
      enabled: process.env.NODE_ENV !== 'production',
      sendHitTask: true
    }
  }
}

Conclusion

You have successfully implemented Google Analytics in a GDPR compliant way. I will explain how to get, manage and store user consent in a future post.