如何设置Google Analytics（分析）Global Site Tag（gtag.js）使用的Cookie的安全属性？

Question

我在Github页面上使用Google Analytics Global Site Tag（gtag.js）跟踪代码。复制以下跟踪代码并将其作为第一项粘贴到

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

最近，当我使用Firefox浏览器打开我的Github页面站点时，控制台会记录以下警告消息：

Cookie“_ga”将很快被拒绝，因为它的“sameSite”属性设置为“none”或无效值，而没有“secure”属性。要了解有关“sameSite”属性的更多信息，请阅读https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

Cookie“\u gid”将很快被拒绝，因为它的“sameSite”属性设置为“none”或无效值，而没有“secure”属性。要了解有关“sameSite”属性的更多信息，请阅读https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

如何解决此问题？




Answer 1

如果您使用的是react ga npm软件包：

ReactGA.initialize("UA-XXXXXX-1", { gaOptions: { cookieFlags: "SameSite=None;Secure" } });

Answer 2

我刚刚设置了一个Google Analytics 4属性，在Firefox控制台中得到了与原始问题相同的警告：

Cookie“_ga”将很快被拒绝，因为它的“sameSite”属性设置为“none”或无效值，而没有“secure”属性。。。

但是将cookie_flags作为选项添加到gtag（'config'，...）调用不适合我。

浏览器cookie存储显示GA cookie确实没有安全存储。

我可以通过添加一个额外的gtag（'set'，…）来解决这个问题 ，如下所示：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', {cookie_flags: 'SameSite=None;Secure'});
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

也许谷歌分析API改变了什么？

Google文档似乎表明set是传递cookie_flags的方式。

Answer 3

gtag.jscookie设置可以自定义。具体来说，我们可以设置cookie_flags字段来解决该问题。

在跟踪代码中，行

gtag('config', 'GA_MEASUREMENT_ID');

应改为

gtag('config', 'GA_MEASUREMENT_ID', { cookie_flags: 'SameSite=None;Secure' });

来解决这个问题。

所以整个跟踪代码应该如下（不要忘记用你自己的跟踪ID替换两次出现的GA_MEASUREMENT_ID）：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID', { cookie_flags: 'SameSite=None;Secure' });
</script>

更新（感谢@RichDeBourke的评论）：

控制台仍然可以记录如下警告消息：

Cookie “_ga” has been rejected for invalid domain.

要解决此问题，需要配置gtag.js的cookie域。原来答案中提到的那句台词

gtag('config', 'GA_MEASUREMENT_ID', { cookie_flags: 'SameSite=None;Secure' });

应进一步编辑以

gtag('config', 'GA_MEASUREMENT_ID', {
  cookie_domain: 'YOUR_GITHUB_PAGES_DOMAIN',
  cookie_flags: 'SameSite=None;Secure',
});

然后，整个跟踪代码如下所示（别忘了用您自己的GITHUB PAGES域（通常是

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID', {
    cookie_domain: 'YOUR_GITHUB_PAGES_DOMAIN',
    cookie_flags: 'SameSite=None;Secure',
  });
</script>