只有在设置了另一个同意 cookie 并且“真实”之后，如何设置 Google Analytics cookie？答案

【问题标题】：How to set the Google Analytics cookie only after another consent cookie is set and "true"?只有在设置了另一个同意 cookie 并且“真实”之后，如何设置 Google Analytics cookie？
【发布时间】：2020-05-27 03:44:18
【问题描述】：

我正在为我的网站和 react-cookie-consent 库使用 React/Nextjs。它会创建一个弹出窗口，用户可以在其中同意 cookie 策略。如果同意，则设置一个 cookie：CookieConsent，值为“true”。

此外，如果用户同意，我想使用 Google Analytics 跟踪用户（点击弹出窗口上的接受）。

但它不起作用：Google Analytic cookies _ga 和 G_ENABLED_IDPS 是在用户点击弹出窗口之前设置的。

有趣的是，我只是在 Microsoft Edge 浏览器上才意识到这一点。在 Chrome 中，在用户同意之前不会设置这些 cookie。

这是我当前在 _document.js 中的代码：

<Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}            
            gtag('js', new Date());
            
          `}}
          />
          
          <script type="text/javascript" src="/static/blockReactDevTools.js" />
          
          <link href="https://fonts.googleapis.com/css?family=Cabin&display=swap" rel="stylesheet" />

</Head>

我使用了一些来自互联网的提示，并想出了这个版本，它也不起作用：

<Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script 
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />

          <script        
            dangerouslySetInnerHTML={{
                __html: `
              
              var gtagId = '${GA_TRACKING_ID}';

              window['ga-disable-' + gtagId] = true;

              window.dataLayer = window.dataLayer || [];

              function gtag(){dataLayer.push(arguments);}   

              gtag('js', new Date());

              function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for(var i = 0; i < ca.length; i++) {
                  var c = ca[i];
                  while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                  }
                  if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                  }
                }
                return "";
              }

              window.addEventListener("load", function() {
                var isCookieConsentTrue = getCookie("CookieConsent") == 'true';

                if(isCookieConsentTrue){
                    window['ga-disable-' + gtagId] = false;
                    alert("Cookie Consent given!");
                    
                  }  else {
                    alert("Cookie Consent NOT given!");
                    window['ga-disable-' + gtagId] = true;
                  }
              });          
            
            `}}
          />

          <script type="text/javascript" src="/static/blockReactDevTools.js" />

          
          <link href="https://fonts.googleapis.com/css?family=Cabin&display=swap" rel="stylesheet" />

</Head>

我不知道这是 nextjs 特有的问题，还是普通的愚蠢问题。

谁能指导我找到可行的解决方案？

编辑：我尝试了建议的“通用分析”方法。建议的解决方案使我的辅助函数记录事件和浏览量失败（见下文）。我还需要 gtag 管理器吗？

【问题讨论】：

标签： javascript reactjs cookies google-analytics next.js

【解决方案1】：

使用 gtag 的 consent config options。目前，可以在标头中运行任何数据测量命令（config 或 event）之前放置以下内容：

gtag('consent', 'default', {
  'ad_storage': 'denied',
  'analytics_storage': 'denied'
});

然后在用户批准或存在同意 cookie 时运行：

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted'
});

如果您使用 Facebook Pixel，它的工作方式类似。例如。 fbq('consent', 'revoke'); 然后fbq('consent', 'grant')。

【讨论】：

这是实际答案。

【解决方案2】：

您的做法是选择退出。只要客户端请求 gtag.js，就会始终设置 GA cookie。然而，这不符合 GDPR。您应该查看的是Opt-in，这样就不会在未经同意的情况下设置 GA cookie。

一般的想法是在客户端同意后异步加载 gtag.js。如果客户端已经同意，您必须在每次页面加载时加载 gtag.js，以获得 gtag 功能的全部功能。执行此操作的最佳做法是在同意时设置 cookieconsent cookie。有一个广泛使用的 js 库，它会生成一个弹出窗口并为您设置许可 cookie。

参考：
https://www.osano.com/cookieconsent/documentation/javascript-api/
您可以通过单击此处的开始编码为您的 cookie 横幅的布局生成代码： https://www.osano.com/cookieconsent/download/ https://github.com/osano/cookieconsent/blob/dev/examples/example-7-javascript-api.html

必须在<head> 部分的每个页面上实现以下代码：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.js" data-cfasync="false"></script>
<script>
var popup;
window.addEventListener('load', function(){
  window.cookieconsent.initialise({
   //set revokeBtn if you don't want to see a tiny pullup bar overlapping your website
   //if revokeBtn is set, make sure to include a link to cookie settings in your footer
   //you can open your banner again with: popup.open();
   //revokeBtn: "<div class='cc-revoke'></div>",
   type: "opt-in",
   theme: "classic",
   palette: {
       popup: {
           background: "#000",
           text: "#fff"
        },
       button: {
           background: "#fd0",
           text: "#000"
        }
    },
    onInitialise: function(status) {
      // request gtag.js on page-load when the client already consented
      if(status == cookieconsent.status.allow) setCookies();
    },
    onStatusChange: function(status) {
      // resquest gtag cookies on a new consent
      if (this.hasConsented()) setCookies();
      else deleteCookies(this.options.cookie.name)
    },
/* enable this to hide the cookie banner outside GDPR regions
    law: {
      regionalLaw: false,
    },
    location: true,
    },
*/
    function (p) {
        popup = p;
  })
});

//it is absolutely crucial to define gtag in the global scope
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}', {'anonymize_ip': true});

function setCookies() {
    var s = document.createElement('script');
    s.type = "text/javascript"
    s.async = "true";
    s.src = "https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}";
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);

    // you can add facebook-pixel and other cookies here
};

function deleteCookies(cookieconsent_name) {
        var keep = [cookieconsent_name, "DYNSRV"];

        document.cookie.split(';').forEach(function(c) {
            c = c.split('=')[0].trim();
            if (!~keep.indexOf(c))
                document.cookie = c + '=;' + 'expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/';
        });
};
</script>

注意：
确保将同意 cookie 设置为 allow 后，每次页面加载时都会加载 gtag.js。使用event_callback 查看是否发送了 gtag 事件。您可以使用 gtag 功能而无需检查同意 cookie。如果 gtag.js 不存在，它只会将元素添加到 window.dataLayer 而没有任何功能。为避免错误，function gtag() 必须在全局范围内且在使用前声明。

// cookie-check is not necessary when gtag is in global scope
//if(popup.hasConsented()) { 
    gtag('event', 'sign_up', {
            'method': 'Google',
            'event_callback': function(){alert('event was sent');}
        });
//}

您不必发送额外的浏览量事件，除非您想手动指定路径。 setCookies() 已将当前文档路径与配置一起发送

【讨论】：

我试过你的代码，但现在我的辅助函数记录浏览量和事件失败：请检查我在原始帖子中的编辑
我缺乏简单的基本理解，似乎一切都是如何连接在一起的。谷歌分析只计算网页浏览量吗？我不能通过它注册事件还是我需要谷歌标签管理器？这一切都非常令人困惑。
例如我不明白你为什么建议三种不同的方法。我必须只选择一个吗？我可以将 Universal Analytics 与 gtag（我似乎需要它）结合起来吗？
供您理解：使用 GA 的主要原因是统计唯一访问者并将其划分为新访问者或回访者 + 一些额外的分析。如果没有 cookie，您将无法区分新用户或老用户。您可能会因 IP 和其他一些方法而有所不同，但未经同意存储 IP 也是不合法的，并且人们的 IP 正在改变，或者一个 IP 后面可能有多个用户。这就是您希望获得用户同意存储 cookie 的原因。你可以选择任何你喜欢的方法，我推荐使用 gtag，因为它是通用方法的继承者
感谢您的努力。我给了你奖金。但是我还有一些问题，例如：如何计算我这边其他页面的浏览量？当用户设置 cookie 时，网页浏览计数现在会自动发生吗？当我必须删除我在编辑中发布的代码时，我现在如何计算事件？