【问题标题】：Google Analytics blocked in IFrame due to "SameSite" & "Secure" setting of cookies由于 Cookie 的“SameSite”和“安全”设置，Google Analytics 在 IFrame 中被阻止
【发布时间】：2020-07-04 07:15:08
【问题描述】：

我们正在our-site.com 上运行一项服务。我们的客户可以通过简单地从their-site.com 链接到our-site.com/customer-service 或通过iFrame 将我们的服务嵌入到their-site.com 来使用“独立”服务。想象一下直接访问 GMap 与看到它嵌入到 IFrame 中。

使用我们在 IFarme 的服务访问“外国”页面

从 Chrome 80（我猜）开始，当服务在 iFrame 中运行时，我们的 Google Analytics 停止工作。 Chrome 正在给我这个（非常清楚的）消息：

与http://our-site.com/ 的跨站点资源关联的cookie 设置为没有SameSite 属性。它已被阻止，因为 Chrome 现在仅在使用 SameSite=None 和 Secure 设置时才提供带有跨站点请求的 cookie。您可以在 Application>Storage>Cookies 下的开发者工具中查看 cookie，并在 https://www.chromestatus.com/feature/5088147346030592 和 https://www.chromestatus.com/feature/5633521622188032 查看更多详细信息。

此外，如果我访问 their-site.com 并将我们的 our-site.com/customer-service 嵌入 iFrame 中，我在 GA 实时概览中看不到任何内容。

如果我手动禁用chrome://flags 中的same-site-by-default-cookies 和cookies-without-same-site-must-be-secure 2 个功能并访问their-site.com 并在iFrame 中嵌入our-site.com/customer-service，我确实会在GA 实时概览中看到页面访问。

“独立”访问我们的服务

直接访问our-site.com/customer-service GA 仍然可以正常工作：

开发工具中没有警告
与 GA 关联的多个 cookie 显示在开发工具 > 应用程序选项卡中
我可以在 GA 实时概览中查看页面访问量
这两个 cookie 都没有设置 Secure 或 SameSite 值（全部为“空白”）...

问题

当在外部域的 iFrame 中运行时，我可以做些什么来让 GA 再次工作？

示例代码

我刚刚创建了一个非常简单的测试环境，它也显示了上述问题：

our-site.com/customer-service

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

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>our site service</title>
  </head>
  <body>our-site.com/customer-service</body>
</html>

their-site.com

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>their-site.com</title>
  </head>
  <body>
    <iframe src="https://www.our-site.com/customer-service" style="width: 500px; height: 500px;"></iframe>
  </body>
</html>

即使是这个非常简单的示例也显示了上述行为，其中直接打开 our-site.com/customer-service 会在 GA 实时概览中显示数据，而打开 their-site.com 不会...

【问题讨论】：

标签： javascript cookies iframe google-analytics samesite

【解决方案1】：

Google tag manager support forum回复：

在第三方上下文（iframe）中访问第一方 cookie (_ga) 时，必须显式添加 cookieFlags 值 samesite=none;secure。

各种场景的详细描述可以在this blogpost找到。

【讨论】：

以防有人懒得看链接gtag('config', '{tracking-id}',{ cookie_flags: 'secure;samesite=none' })
谢谢！正是我想要的。
此答案适用于 analytics.js，Oliver 的评论适用于 gtag.js。如果您使用的是 GTM（和 GA4），则需要将配置标签的 cookie_flags 字段设置为 secure;sameSite=none。