通过点击 iframe 中的按钮发送 Google Analytics 事件答案

【问题标题】：Sending Google Analytics Event from click of button in Iframe通过点击 iframe 中的按钮发送 Google Analytics 事件
【发布时间】：2019-05-14 16:53:51
【问题描述】：

当单击“预订”按钮时，我们正在尝试从 Iframe 中的预订表单发送 Google Analytics 事件。为了做到这一点，我们需要弄清楚一些问题。

让网站识别 iframe 中的点击
检查被点击的元素是 Book 按钮
如果是，将分析事件发送给 GA

我们已经尝试了一些网上找到的方法，包括：

Detect Click into Iframe using JavaScript

https://www.tutorialrepublic.com/faq/how-to-detect-click-inside-iframe-using-javascript.php

https://codecorner.galanter.net/2015/12/22/detect-iframe-click-from-parent-page/

但不幸的是，这些解决方案都不适合我们。

我们对在线找到的以下解决方案的最低期望是，当点击 iframe 中的元素时，我们可以简单地在控制台中记录一些内容，但没有任何尝试记录任何内容。

如果有人对任何步骤有任何想法，即使只是让网站识别点击，也将不胜感激。

谢谢

编辑：我们控制并且能够修改在 iframe 中调用的代码

【问题讨论】：

您没有任何方法可以访问此外部 iframe，对吗？
@F.Leone 我们还可以控制在 iframe 中调用的代码

标签： javascript jquery iframe google-analytics click

【解决方案1】：

您需要做的是，在您的网站和 iframe 上安装分析跟踪器（假设您从其他地方加载此预订系统），此外，您应该传递 clientID 以保留相同的会话和链接信息相同的分析属性。

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

  gtag('config', 'GA_MEASUREMENT_ID', {
    'linker': {
      'accept_incoming': true, // This is set to false to the one that will decorate
      'domains': ['example-1.com', 'example-2.com']

    }
  });

</script>

如果由于某种原因您不想触发网页浏览，而只想触发一个事件，请在配置中添加：

gtag('config', 'GA_MEASUREMENT_ID', { 'send_page_view': false });

然后您需要在 iframe 中简单地跟踪您的表单。如果您没有该级别的访问权限，请挂钩 onsubmit 事件，如果需要，请检查使用 document.forms 的文本框的内容是否为空。

您可以通过简单的调用发送 then 事件：

gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>
});

在onsubmit 内验证。您还必须阅读 this documentation 以在 GA 中设置过滤器，以防您想在那里触发综合浏览量。

【讨论】：