javascript - 单击带有 "i"和 "span"内部问题的链接

Question

我们的团队使用谷歌标签管理器(或类似的东西)来跟踪用户将点击的电话号码或按钮。此工具要求元素具有 id .

当我们点击一​​个简单的链接时，没有<i>或 <span>在里面，一切正常。我们得到 id ，链接有效，出现带有“调用”或“取消”的弹出窗口。

但是，下面的 markdown 就没那么简单了:

<a class="phone-number" id="phone2" href="tel:+380671112233">
  <i class="fa fa-phone" aria-hidden="true"></i>
  <span>+38 067 111 22 33</span>
</a>

链接有效，出现弹出窗口，但id未被跟踪

我使用 jQuery 来 console.log单击了什么元素。似乎实际上已经在 <span> 上进行了点击或 <i> .所以我的猜测是点击事件发生在 <span> 上或 <i> ，然后冒泡的事情发生并触发链接。因此当链接被触发时弹出窗口出现，但点击是在另一个元素上进行的，因此谷歌标签管理器无法捕获 ID。

我该怎么做才能禁用对内部元素的点击并强制点击 <a>标签？

Answer 1

您能否尝试在 GTM 设置中将“点击触发器”设置为“仅链接”？

引用:Capturing The Correct Element In Google Tag Manager