google-analytics - 当我的应用程序加载到跨域 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> 添加到另一个页面)，我注意到未发送此请求。我还确认在实时 View 中的 Google Analytics 中没有显示任何数据，即使我可以看到用于 gtag 加载的 JavaScript。
我还使用位于 https://tagassistant.google.com/ 的 Tag Assistant 进行了调试。 .即使当我连接到在 iframe 中运行的应用程序时，调试器也会显示所有事件都按预期注册，但在发送的命中下，它显示“此容器未发送命中”。
为什么在 iframe 中加载应用程序时，相同跟踪代码的行为会有所不同？如何确保始终发送命中？
更新:这似乎与 cookie 在跨域 iframe 中不可用有关，但有解决方法吗？

Answer 1

默认情况下，跟踪失败，原因是 SameSite cookie setting enforcement .默认情况下，cookie 在第三方上下文中不可用，这包括来自不同域的 iframe。
通过使用 cookie_flags config ( docs )，您可以允许从第三方上下文读取 cookie。会有一些警告，这会因浏览器而异，因为隐私限制不断增加。
但是，就目前而言，设置 cookie_flags在 gtag只要您的站点是安全的，配置就可以解决问题:

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

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