How can I add Google Analytics to my VuePress website in accordance with GDPR?

Question

My website is generated via VuePress and now I want to add Google Analytics. However, with GDPR I have to ask my website visitor for consent before using it. For other, non-vuepress, websites I am using metomic.io's cookie dialogue to autoblock all scripts on my website until consent was given. Usually this prevents Google Analytics to run when it's added via the gtag.js or gtm.

However, this autoblock does not work with the official VuePress plugin (@vuepress/plugin-google-analytics). I'm guessing vuepress builds the plugins before custom scripts even though I've ordered them as shown below.

Is there any way I can stop Google Analytics from running in Vuepress until GDPR consent was given?

/* .vuepress/config.js */
…
module.exports = {
  …
  head: [
      ['script', {
          src: 'https://config.metomic.io/config.js?id=prj:xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx‘, 
          crossorigin: 'anonymous',
          charset: 'utf-8'
      }],
      ['script', {
          src: 'https://consent-manager.metomic.io/embed.js', 
          crossorigin: 'anonymous',
          charset: 'utf-8'
      }],
      …
  ],

  plugins: [
      ['@vuepress/plugin-google-analytics', {
          'ga': '' // UA-XXXXXXXXX-X
      }]
  ],
  …

Johnny Johnny · Accepted Answer · 2020-06-24T20:26:14

What finally worked was removing the @vuepress/plugin-google-analytics and manually adding the gtag.js script into config.js/module.exports/head. No traffic is shown in my analytics dashboard until I the moment I give consent.

Just make sure the metomic.io scripts are added before Google's and autoblock is enabled inside the metomic dashboard/autoblocking.

My post sounds so much like a metomic ad, still I would like to hear of other tools and approaches. I found it interesting how little resources Google provides on GDPR compared to other topics.

/* .vuepress/config.js */
…
module.exports = {
  …
  head: [
      ['script', {
          src: 'https://config.metomic.io/config.js?id=prj:xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx‘, 
          crossorigin: 'anonymous',
          charset: 'utf-8'
      }],
      ['script', {
          src: 'https://consent-manager.metomic.io/embed.js', 
          crossorigin: 'anonymous',
          charset: 'utf-8'
      }],
      ['script', {
          async: true,
          src: 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X'
      }],
      ['script', {}, `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
      
          gtag('config', 'UA-XXXXXXXXX-X');
      `],
      …
  ],

  /* removed @vuepress/plugin-google-analytics'*/

  …

How can I add Google Analytics to my VuePress website in accordance with GDPR?

1 Answers