基于数据属性的 GTM 触发器

Question

我正在尝试对网站的特定元素进行一些跟踪，但无法在代码中实现数据层（目前开发预算有限）。我正在尝试将我的触发器基于 CSS 选择器，但它目前无法正常工作。

我们在 https://www.sail.ca/en/browning-high-noon-spotlight-modb-197590 上的添加到购物车下方有三个框。我们想知道其中哪些点击次数最多。

这是 3 个盒子的代码：

<div class="legal-container">
<div class="sub-container">
<a href="#" data-action="legal-modal" data-component="toggle-modal" data-tab="shipping">
<div class="over-icon"><img src="/skin/frontend/sail/default/nwayo/build/images/common/icon-delivery.svg" alt="Shipping" /></div>
<div class="content">Free shipping on orders over </div> </a>
</div>
<div class="sub-container">
<a href="#" data-action="legal-modal" data-component="toggle-modal" data-tab="returns">
<div class="over-icon"><img src="/skin/frontend/sail/default/nwayo/build/images/common/icon-returns.svg" alt="Returns" /></div>
<div class="content">Easy Return</div> </a>
</div>
<div class="sub-container">
<a href="#" data-action="legal-modal" data-component="toggle-modal" data-tab="price_warranty">
<div class="over-icon"><img src="/skin/frontend/sail/default/nwayo/build/images/common/icon-price-warranty.png" alt="Best price" /></div>
<div class="content">Best pricRThe guarantee</div> </a>
</div>
</div>

我创建了一个名为 gtm.element.dataset.tab

的数据层变量

触发器匹配 "Click Element matches CSS selector [data-tab="price_warranty"]

你看到我哪里做错了吗？这是基于 Lunametrics 不久前发布的教程 (https://www.lunametrics.com/blog/2017/07/07/tracking-clicks-custom-data-attributes-google-tag-manager-google-analytics/)，但显然我遗漏了一些东西。

非常感谢，查尔斯

Answer 1

确保您的点击触发器是 "links only" 类型。如果您有一个 "click on all elements" 那么点击元素很可能不是具有该属性的元素，而是其中包含的图像。

这与 GTM 附加事件处理程序的方式有关。 GTM 不会直接将事件处理程序附加到元素。相反，它将事件处理程序附加到文档。单击元素时，事件通过 DOM 向上冒泡，直到它到达文档节点。如果目标元素 (Click Element) 与点击触发器的过滤器中指定的条件相匹配，则会在那里进行检查。

如果您执行 "links only" 触发器，GTM 实际上只查看 link，因为您的 link 具有适合您的数据属性。

这是确保为动态创建的元素触发事件的可靠方法，但这意味着获得所需的点击元素并不总是那么容易。

基于数据属性的 GTM 触发器

Basing a GTM trigger on data attributes

google-analytics

google-tag-manager