我如何使用 Google 跟踪代码管理器跟踪内部跨度 class 的 <a> 代码的点击次数？

Question

我一直在尝试让 GTM 在用户每次点击下面的 link 文本 ("Click here to donate") 时触发一个标签。

  <a href="https://www.testurl.com/donate" target="_blank" >
  <span class="donate"><img src="donate-icon.png"></span>
  Click here to donate!    </a>

我可以通过使用具有以下设置的触发器在用户点击图像时触发代码。但是当用户点击 link 文本时，我无法触发标签。

触发类型：点击 - 所有元素

触发器触发：一些点击

单击元素 --> 匹配 CSS 选择器 --> .donate

*注意：由于网站模板不是我直接控制的，我无法直接在A标签中插入任何CSS。我可以提出请求，但需要几周甚至更长的时间才能获得必要的批准并完成工作。

非常感谢任何建议！谢谢！

Answer 1

是的，您可以添加 css class 和 jquery .addClass('donate')

如果您可以将 JS 添加到您的页面，那应该对您有用

Answer 2

您可以使用 Click URL 而不是 Click Element 尝试以下设置：

触发器类型： 单击 - 所有元素
触发器触发： 一些点击
点击URL: https://www.testurl.com/donate

或者另一个解决方案可以是：

触发器类型： 单击 - 所有元素
触发器触发： 一些点击
点击文字： Click here to donate!

solutions based on: https://support.google.com/tagmanager/answer/6106961?hl=en#Click

另一种可能性是使用触发器类型 Click - Just Links:

触发类型： 点击 - 只需 Links
触发器触发： 一些 Link 点击
点击URL: https://www.testurl.com/donate

没有文字或URL怎么办？
在这种情况下，您可以跟踪具有特定 class 属性的元素：

触发器类型： 单击 - 所有元素
触发器触发： 一些点击
单击类: toggle-sidebar（或更具体的 class）

Answer 3

在一个特别令人困惑的案例中，“Just Links”似乎对我不起作用。不清楚为什么，但点击某个标签没有注册为 link 点击，而“所有元素”点击注册在内部元素上，所以我不得不即兴创作。

最适合我的解决方案是使用 pointer-events：none 使内部元素在点击时不可见。这将使点击通过内部元素并命中锚标签，以便标签可以被HREF参数识别。

我在 mailto 和 tel links 的上下文中使用它。

我的触发器如下所示：

Click - All Elements
Some Clicks
Click URL Contains tel:

然后我用这个自定义添加一个名为“Click Event Helper”的标签 HTML:

<style>
  a[href*="tel"] *, a[href*="mailto"] * {
     pointer-events: none !important; 
  }
</style>

这 CSS 告诉包含 tel 或 mailto 的标签内的每个元素让点击通过它直到 a 标签，然后由 GTM 触发器成功读取。

在 OP 的情况下，我会这样做：

触发器：

Click - All Elements 
Some Clicks 
Click URL Contains /donate

帮助标签：

<style>
  a[href*="donate"] * {
     pointer-events: none !important; 
  }
</style>

这将捕获您的捐赠 link 上的所有点击，即使您有内部 HTML 样式以及按钮上有不同的文本等...

我如何使用 Google 跟踪代码管理器跟踪内部跨度 class 的 <a> 代码的点击次数？

How do I track clicks on <a> tag with span class inside using Google Tag Manager?

html

css

google-tag-manager