css-selectors - 如何检索要在触发器定义中使用的父节点的元素 ID

Question

在 Google 跟踪代码管理器中，可以触发基于 css 选择器匹配的触发器。如果 html 元素与 css 选择器匹配，则会触发触发器(此处提供更多详细信息:http://www.simoahava.com/analytics/matches-css-selector-operator-in-gtm-triggers/)

目前我使用以下 css 选择器匹配来确定是否应触发触发器:

div#admin-button-id, div#admin-button-id *

因此逗号前的第一部分表示一种可能性，它匹配所有具有 id admin-button-id 的 div 元素。 第二种可能性(在逗号之后)匹配所有 html 元素，这些元素是具有 id admin-button-id 的 div 元素的子元素。这行得通，但我更喜欢一个我不必复制 div#admin-button-id 的版本。所以，像

div#admin-button-id *?

表示 child 是可选的。有这样一个有效的结构吗？

Answer 1

根据@nyen 的建议，我想出了以下解决方案:

我必须处理以下标记代码(省略不必要的 css 类):

<div id="admin-button-id">
    <span>
        <span>Administration</span>
    </span>
</div>

可以单击此按钮的各个部分，最里面的 span、中间的 span 或外部的 div。但只有外部 div 包含一个 id，我可以使用它来匹配我的 GTM 触发器。因此，在 GTM 中，我创建了一个名为“calculatedClickId”、类型为“Custom JavaScript”的用户定义变量。自定义函数向外(从最里面的span到最外面的div)在dom树中查找id:

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

{{Click Element}} 是 GTM 提供的 html 元素。所以现在在我的 html 元素中发生点击并不重要，变量 calculatedClickId 总是设置为外部 div 的 ID。

这让我可以轻松地在我的触发器配置中使用变量 calculatedClickId:

我知道自定义 javascript 方法(还)不是万无一失的，可能会进一步完善，但这个解决方案是对 css 选择器方法的改进。