Google 跟踪代码管理器不跟踪链接对图像和图标的点击

Question

在 Google 跟踪代码管理器中，我将其设置为跟踪包含特定 class 元素的点击数据，并在 Google Analytics 中记录一个事件。它似乎对文本 links 工作得很好，但是如果 link 中有另一个标签用于图像、图标等，我运行就会遇到问题。例如，以下内容工作正常：

<a href="link.html" class="track_this" data-tracking-info="my info">Click here</a>

但这行不通：

<a href="link.html" class="track_this"  data-tracking-info="my info">
  <span class="icon click-here"></span>
</a>

如果您单击文本，类似这样的内容会起作用，但如果您单击图标，则不会：

<a href="link.html" class="track_this"  data-tracking-info="my info">
  <span class="icon click-here"></span> Click Here
</a>

我知道我可以将 "track_this" class 添加到图标的范围中，但在更复杂的情况下它会变得非常混乱。想象一下，有一个带有图标的缩略图和它下面的一些文本都包裹在一个标签中。我必须将 class 和图像标签上的跟踪信息、图标的跨度、文本的 div 等

有更好的方法吗？谢谢！

Answer 1

如果我能看到您的 GTM 是如何设置的，我可以更明确地说明这一点，但我的猜测是您正在使用 "All Elements" 触发器来捕获这些 link 点击，并过滤"Click Classes" 或 "Click Element"。问题在于，当 link 标签 (<a></a>) 包含另一个元素时，例如 <span>，即使这会触发您的 link 打开，该元素GTM 记录为收到点击的是跨度，而不是 link。

如果您想解决这个问题，有两个选项，其中任何一个都应该有效。

首先是切换到使用 "Click - Just Links" 触发器类型，并在 class "track_this" 上进行过滤。对于此触发器，GTM 允许单击事件 "bubble" 直到它们击中 link 元素，然后它会针对该 link 而不是被单击的元素测试您的触发器。简单地使用这种触发类型应该适用于所有三个样本。

另一种选择是使用更高级的过滤器和 "Click - All Elements" 触发器。如果您修改触发器使其在 "Some Clicks" 上触发，然后使条件 "Click Element matches CSS selector:"

.track_this, .track_this *

然后它将注册对具有 track_this class、 的任何元素的点击以及 对任何元素的点击里面那些元素。

Answer 2

这个问题也可以在标签管理器中使用一点 javascript 和 'User-Defined Variable' 来解决。此解决方案用于处理更复杂的 UI 组件。

说明

Google Analytics + Tag Manger 记录用户点击的非常具体的元素或节点。该元素作为“点击元素”变量存储在 GA 中。因此，在更复杂的 UI 情况下，用户可能会单击多个元素以执行单个操作。例如。这是一个带有图标和文本的按钮。

<div
   class="button"
   id="PARENT_ID"
   onClick = () =>  ... 
>
   <span id="CHILD_ONE">
      icon
    </span>
    <span id="CHILD_TWO">
      text
     </span>
</div>

在这种情况下，用户可以单击以上三个 id 中的任何一个。这三个都将激活 onClick 操作。但是，Google Analytics 并不关心 onClick。它只关心点击了哪个特定元素。即：PARENT_ID、CHILD_ONE 或 CHILD_TWO.

“用户定义的变量”解决方案。

在标签管理器中转到 'Variables'。 （左栏菜单。）
添加一个新的'User-Defined Variable'.
Select 变量类型为 'Custom JavaScript'.

添加：

function() {
  if ({{Click Element}}.id != "") {
    return {{Click Element}}.id;
  }
  if ({{Click Element}}.parentNode.id != "") {
    return {{Click Element}}.parentNode.id;
  }
   if ({{Click Element}}.parentNode.parentNode.id != "") {
    return {{Click Element}}.parentNode.parentNode.id;
  }
  return {{Click Element}}.parentNode.parentNode.parentNode.id;
}

此脚本将从任何子元素（节点）向上搜索 DOM 三层并查找匹配的标签 id。注意：Click Element 是 Google Analytics 使用的变量名称。这是用户点击的gtm.element。

设置跟踪代码管理器配置以使用新的 'Custom Variable'。

现在使用父 ID 来设置您的触发器。在我的示例中，即使用户单击 CHILD_ONE 或 CHILD_TWO，PARENT_ID 也会返回 id。所以select'contains'PARENT_ID.

------ 进一步的考虑 -----

此解决方案仅适用于三个父级别。此外，虽然不太可能捕获超出预期范围的元素。

在更复杂的 UI 组件中，最好将标记 id 添加到每个元素。如果您使用的是像 React 这样的前端框架，我建议将 Tag Id 设为动态属性并将其添加到所有子组件中。

注意：Google 分析经常变化。这是 GA4 + 跟踪代码管理器解决方案。

Google 跟踪代码管理器不跟踪链接对图像和图标的点击

Google Tag Manager not tracking links clicks on images and icons

google-analytics

google-tag-manager