如何检索要在触发器定义中使用的 parent 节点的元素 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 *

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

div#admin-button-id *?

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

Answer 1

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

我必须处理以下标记代码（不必要的 css 类省略）：

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

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

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 选择器方法的改进。

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

How to retrieve element id of parent node to use within a trigger definition

css-selectors

google-tag-manager