如何根据 GDPR 将 Google Analytics 添加到我的 VuePress 网站？答案

【问题标题】：How can I add Google Analytics to my VuePress website in accordance with GDPR?如何根据 GDPR 将 Google Analytics 添加到我的 VuePress 网站？
【发布时间】：2020-10-15 05:06:56
【问题描述】：

我的网站是通过 VuePress 生成的，现在我想添加 Google Analytics。但是，对于 GDPR，我必须在使用它之前征得我的网站访问者的同意。对于其他非 vuepress 网站，我正在使用 metomic.io 的 cookie 对话来自动阻止我网站上的所有脚本，直到获得同意为止。通常这会阻止 Google Analytics 在通过 gtag.js 或 gtm 添加时运行。

但是，此自动阻止功能不适用于官方 VuePress 插件 (@vuepress/plugin-google-analytics)。我猜 vuepress 在自定义脚本之前构建插件，即使我已经按如下所示订购了它们。

在获得 GDPR 同意之前，有什么方法可以阻止 Google Analytics 在 Vuepress 中运行？

/* .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
      }]
  ],
  …

【问题讨论】：

标签： google-analytics vuepress gdprconsentform

【解决方案1】：

最终奏效的是删除 @vuepress/plugin-google-analytics 并将 gtag.js 脚本手动添加到 config.js/module.exports/head 中。在我同意之前，我的分析仪表板中不会显示任何流量。

只需确保在 Google 之前添加 metomic.io 脚本，并在 metomic dashboard/autoblocking 中启用自动阻止。

我的帖子听起来很像一个拟态广告，但我仍然想听听其他工具和方法。有趣的是，与其他主题相比，Google 在 GDPR 方面提供的资源很少。

/* .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'*/

  …

【讨论】：