如何设置 Google Analytics Global Site Tag (gtag.js) 使用的 cookie 的 "secure" 属性？

Question

我在我的 Github 页面上使用 Google Analytics 全球网站标签 (gtag.js) 跟踪代码。以下跟踪代码作为第一项复制并粘贴到我要跟踪的每个网页的 <HEAD> 中（我用 GA_MEASUREMENT_ID 替换了我自己的跟踪 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');
</script>

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

Cookie “_ga” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To know more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

Cookie “_gid” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To know more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

我该如何解决这个问题？

Answer 1

The gtag.js cookie settings can be customized. Specifically, we can set cookie_flags field 解决问题。

在跟踪代码中，行

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 for ）：

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

Cookie “_ga” has been rejected for invalid domain.

要解决此问题，需要配置 cookie domain of gtag.js。所以原回答中提到的那一行

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',
});

然后，整个跟踪代码如下（不要忘记将 YOUR_GITHUB_PAGES_DOMAIN 替换为您自己的 GitHub 页面域（通常是 <username>.github.io，其中 <username> 是您实际的 GitHub 用户名）和两次出现的 GA_MEASUREMENT_ID 以及您自己的跟踪 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_domain: 'YOUR_GITHUB_PAGES_DOMAIN',
    cookie_flags: 'SameSite=None;Secure',
  });
</script>

Answer 2

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

Cookie “_ga” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. ...

但是将 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>

也许 Google Analytics API 发生了一些变化？

Google Documentation 似乎表明 set 是您应该通过 cookie_flags 的方式。

Answer 3

如果您使用 react-ga npm 包：

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

Answer 4

对于使用 Google 标签管理器的人，您可以在 GTM 配置中为 Google 分析跟踪 cookie 设置 SameSite 属性。

在 Google Tag Manager 中，转到变量
找到您的 GA 跟踪 ID 变量，然后点击进行编辑
在更多设置下 -> 要设置的字段
- 添加字段名称cookieFlags
- 将值设置为您想要的任何 SameSite 值，例如samesite=none;secure
保存并发布新版本的 GTM 配置。

如果操作正确，这应该可以解决您看到的浏览器警告。

如何设置 Google Analytics Global Site Tag (gtag.js) 使用的 cookie 的 "secure" 属性？

How to set "secure" attribute of the cookies used by Google Analytics Global Site Tag (gtag.js)?

google-analytics

gtag.js