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 $75</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创建了一个数据层变量

触发器与“点击元素匹配CSS选择器[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

确保您的点击触发器属于“仅链接”类型。如果您具有“单击所有元素”的功能，则Click元素不是具有属性的元素，而是包含在其中的图像。

这与GTM附加事件处理程序的方式有关。 GTM不会将事件处理程序直接附加到元素。而是将事件处理程序附加到文档。单击元素时，事件会在DOM中冒泡，直到到达文档节点。如果目标元素（点击元素）与点击触发器的过滤器中指定的条件匹配，则将对其进行检查。

如果您执行“仅链接”触发器，则GTM实际上只会查看链接，并且由于您的链接具有适合您的data属性。

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

基于数据属性的GTM触发器

1 个答案: