在第 3 方网站上从 iframe 触发和跟踪 GTAG 事件答案

【问题标题】：Trigger and track GTAG event from iframe on 3rd party Website在第 3 方网站上从 iframe 触发和跟踪 GTAG 事件
【发布时间】：2022-11-24 07:02:13
【问题描述】：

我的客户在他们的网站上放置了我的网络小部件，实现为 <iframe> 并显示一个按钮。我想跟踪实施我的 Web 小部件的客户网站的分析：点击次数以及来自哪些网站。

所以 <iframe> 有 src 指向 mywebiste.com 上的一个 html 文件，实际上显示按钮的 html 内容在我的主机服务上，我当然可以访问代码。

该小部件由 3rd 方网站使用。他们导入我的脚本，将 <iframe> 放在他们的网页中。所以父 3rdparty.com 有 <iframe> 指向 mywebiste.com。

现在，我已经放入了 <iframe> 指向的每个 html，即 GoogleTag 集成。我已经创建了一个自定义事件“点击”作为触发器，并创建了一个“标签”来创建“GA4 事件”以进行分析。

如果我将这些小部件放在 mywebiste.com 上作为测试，触发器和事件会起作用，我会看到分析。如果我将此小部件放在3rdparty.com 上，触发器和事件将不起作用。而且我无法调试 GTAG，因为这不是我的网站。

为什么？理论上，在 iframe 中有一个独立的页面，应该将事件发送到我的 GoogleTag 容器，字段“主机名”为 3rdparty.com。

这是示例代码：除了使用触发器“元素单击”外，我还手动推送 dataLayer 来触发自定义事件。

    <!--  3rdparty.com/index.html -->
    <html>
       <!--  I pass hostname as param -->
     <iframe src="https://mywebiste.com/widget.html?hostname=3rdparty.com"></iframe>
    </html>

    <!-- mywebiste.com/widget.html -->
    <html>
     <head>
       <!-- import Google Tag manager -->
     </head>
     <body>
       <button onclick="fireEvent()">Click me!</button>

       <script>
        function fireEvent()
         {
          var hostname = getUrlParamValue('hostname'); // = 3rdparty.com
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({'event': 'button_click', 'Page Hostname' : hostname});
          }
       </script>
     </body>
    </html>

我想要有关按钮点击的统计信息，以及主机名源详细信息 (3rdparty.com)

【问题讨论】：

标签： iframe google-tag-manager web-widget

【解决方案1】：

如果您在 GTM 中使用默认/标准 Google Analytics 标记，则其 cookie 仅适用于第一方上下文。他们受制于SameSite attribute。您的小部件将无法访问 GA cookie，届时 GA 也不会发送任何事件。

这可以修复。

对于 GA UA，将值为“samesite=none;secure”的字段“cookieFlags”添加到 GTM 中的“Google Analytics 设置”变量（更多设置，要设置的字段）。 developers.google.com

对于 GA4，将值为“samesite=none;secure”的字段“cookie_flags”添加到 GTM（要设置的字段）中的“Google Analytics 4 配置”标签。 developers.google.com

【讨论】：