时间戳

首页 > 解决方案 > 当我的应用加载到跨域 iframe 中时，为什么 Google Analytics 不发送匹配？

google-analytics - 当我的应用加载到跨域 iframe 中时，为什么 Google Analytics 不发送匹配？

问题描述

我有一个基本的静态/单页应用程序，我将 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>到另一个页面），我注意到没有发送此请求。我还确认，即使我可以看到用于 gtag 加载的 JavaScript，Google Analytics 的实时视图中也没有显示任何数据。

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

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

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

标签： google-analyticsgoogle-tag-managergtag.jsgoogle-analytics-4

解决方案

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

通过使用cookie_flags 配置( docs )，您可以允许从第三方上下文读取 cookie。会有一些警告，这会因浏览器而异，因为隐私限制不断增加。

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

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

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

推荐阅读