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

【问题标题】：How to retrieve element id of parent node to use within a trigger definition如何检索要在触发器定义中使用的父节点的元素 ID
【发布时间】：2016-10-13 14:41:35
【问题描述】：

在 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 元素。第二种可能性（在逗号之后）匹配作为 id 为 admin-button-id 的 div 元素的子元素的所有 html 元素。这可行，但我更喜欢不需要复制 div#admin-button-id 的版本。所以，像

div#admin-button-id *?

表示孩子是可选的。有这样有效的构造吗？

【问题讨论】：

你能进一步扩展你的例子吗？
@ShannonYoung 我添加了有关我的问题的更多详细信息，希望现在更清楚。
不管怎样，ID 往往是独一无二的。我不知道 Google 跟踪代码管理器是如何工作的，但我确信它们在这方面仍然应该是独一无二的。
好吧，ID 绝对是唯一的，只有一个 id 为 admin-button-id 的元素。但是我不仅要选择具有 id 的元素，还要选择它的所有子元素，因此我使用了带有逗号的 css 选择器来匹配两者。
也许您可以将触发器设置为使用正则表达式匹配而不是 CSS 选择器匹配。

标签： css-selectors google-tag-manager

【解决方案1】：

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

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

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

可以点击该按钮的各个部分，无论是最内层跨度、中间跨度还是外层 div。但只有外部 div 包含一个 id，我可以用它来匹配我的 GTM 触发器。因此，在 GTM 中，我创建了一个名为“calculatedClickId”的用户定义变量，类型为“自定义 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 选择器方法的改进。

【讨论】：