当我的应用程序加载到跨域 iframe 中时，为什么 Google Analytics（分析）不发送命中？

Question

我有一个基本的静态/单页应用程序，我将 Google Analytics 4 (GA4) 添加到使用gtag. 当我通过 http://localhost:8080 在本地加载我的应用程序时，页面视图按预期跟踪。但是，当我通过应用程序在 iframe 中的另一个站点上嵌入时，不会发送任何命中。

为了调试这个，我查看了 Chrome 网络检查器中的网络请求。当我直接在 http://localhost:8080 上打开我的应用程序时，我可以看到一个对https://analytics.google.com/g/collect?..的请求。在网络请求中。但是，当我在 iframe 中加载我的应用程序（例如，我添加<iframe src="http://localhost:8080"></iframe>到另一个页面）时，我注意到没有发送此请求。我还确认在实时视图中的 Google Analytics 中没有显示任何数据，即使我可以看到用于 gtag 加载的 JavaScript。

我还使用https://tagassistant.google.com/ 上的 Tag Assistant 进行了调试。即使当我连接到在 iframe 中运行的应用程序时，调试器也会显示所有事件都按预期注册，但在发送的命中下，它显示“此容器未发送命中”。

为什么在 iframe 中加载应用程序时，相同跟踪代码的行为会有所不同？如何确保始终发送命中？

更新：这似乎与 cookie 在跨域 iframe 中不可用有关，但有解决方法吗？

Answer 1

默认情况下，由于SameSite cookie 设置强制，跟踪失败。默认情况下，cookie 在第三方上下文中不可用，这包括来自不同域的 iframe。

通过使用cookie_flags 配置（文档），您可以允许从第三方上下文读取 cookie。随着隐私限制的不断增加，会有一些警告，并且这会因浏览器而异。

但是，目前，只要您的站点是安全的，配置cookie_flags中的设置就可以解决该问题：gtag

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

请注意，这实际上不适用于 http://localhost:8080，因为它不安全，但一旦将站点部署到生产环境，希望您将使用 https。