带有 CSS 选择器的点击元素在 Google 跟踪代码管理器中不起作用答案

【问题标题】：Click Element with CSS selector is not working in Google Tag Manager带有 CSS 选择器的点击元素在 Google 跟踪代码管理器中不起作用
【发布时间】：2021-03-09 00:58:51
【问题描述】：

如何使用谷歌标签管理器中的“点击元素”变量检测对以下元素的点击：

<a href="https://amazon.in/product-id" target="_blank" class="amazon-btn">
    <div>
        <span>BUY NOW AT</span>
        <div class="amz-logo"></div>
    </div>
</a>

我创建了以下触发器：

Click - All Elements -> Some Clicks -> Click Element -> matches CSS selector -> *.amazon-btn*

这不会在单击元素时触发。

以下是调试窗口中的点击元素：

'HTMLDivElement: html > body > section.content.looking-sec > div.container > div.row > div.col-md-6.looking-cont > div.btn.btn-custom.btn-top.hide-small > a.amazon-btn > div'

我什至尝试过，Click Element -> contains -> amazon-btn。这也不行。

【问题讨论】：

我假设这需要 valid CSS 选择器，所以我看不出*.amazon-btn* 有什么意义。你试过.amazon-btn吗？如果这也不起作用，那么我们可能需要一个更好的问题描述开始。
.amazon-btn 也不起作用。

标签： html css css-selectors google-tag-manager

【解决方案1】：

尝试点击锚元素

不要使用“点击>所有元素”

使用“点击 > 只是链接”

然后应用你的 CSS 选择器

【讨论】：

在这种情况下，“单击 > 仅链接”可能会起作用。但有时它可能是
或
没有理由使用 Just 链接。只需使用 CBroe 所说的话。永远不要对单击的元素使用“包含”。它不会做你认为它会做的事情。对于元素，您始终使用匹配 CSS 选择器。 .amazon-btn 应该在那里。此外，不要使用包含类的类，或者如果使用，请删除在这种情况下不属于类名的点 cuz。点是选择器部分。这确实是微不足道的。你只是在错误的地方尝试了错误的事情。

【解决方案2】：

这就是问题所在，Click - All Elements 触发器返回被点击的实际元素（显然），但那可能只是一个更大按钮中的图标。而我们想要捕获按钮或目标元素上任意位置的点击。更多信息请访问this link

这就是我最终使用的。我创建了一个自定义 javascript 变量 Get All Classes:

function() {
  var el = {{Click Element}};
  var ad = el.nodeName.toLowerCase();
  if(!el.className==''){
    ad = ad+'.'+el.className.replace(/\s/g,'.');
  }
  var i = 0
  while(el.parentElement.nodeName.toLowerCase() != 'body' && i < 50){
    el = el.parentElement;
    var st = el.nodeName.toLowerCase();
    if(!el.className==''){
      st = st+'.'+el.className.replace(/\s/g,'.');
    }
    ad = st+'>'+ad;
    i++;
  }
  return ad;
}

这将返回一个字符串，其中包含从单击的元素开始一直到<body> 元素的所有节点名称及其类。像这样： body>div.main-container.content>p.first-section>a.amazon-link 然后我在触发器中使用这个变量来检查它是否包含一个特定的类。

有没有一种更简单更好的方法来以字符串形式获取 {{Click Element}} GTM 变量的值，如下所示？如果是这样，请将其添加为答案，我会接受它作为正确答案。

【讨论】：

您的问题不正确。下面的字符串不是元素的表示。那是一个通用的 CSS 选择器。这也是一个糟糕的选择器（正是因为它是通用的）。很脆弱。如果你使用类似的东西，它会更容易打破。因此，正确的方法是使用 a.amazon-link 而不是 body>div.main-container.content>p.first-section>a.amazon-link a.amazon-link 不起作用的唯一原因你是因为你用错了。

【解决方案3】：

在触发器配置中，尝试添加这个条件：

Click Elementmatches CSS selector.amazon-btn, .amazon-btn *

我没有对此进行测试，但是当具有amazon-btn 类的元素是点击目标或该元素内的任何子元素时，它应该可以工作。

【讨论】：