如何检索要在触发器定义中使用的父节点的元素ID [英] How to retrieve element id of parent node to use within a trigger definition

问题描述

在Google跟踪代码管理器中，可以基于CSS选择器匹配来触发触发器.如果html元素与css选择器匹配，则会触发一个触发器(更多详细信息，请参见:

In Google Tag Manager it is possible to trigger triggers based on css selector matching. If a html element matches the css selector, a trigger gets triggered (more details available here: http://www.simoahava.com/analytics/matches-css-selector-operator-in-gtm-triggers/)

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

Currently I use the following css selector matching to identify if a trigger should be triggered or not:

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

因此，逗号前的第一部分表示一种可能性，它会将所有div元素与id admin-button-id匹配. 第二个可能性(在逗号之后)匹配ID为admin-button-id的div元素的子元素的所有html元素.这行得通，但是我更喜欢不需要重复div#admin-button-id的版本.因此，类似

So the first part before the comma indicates one possibility, it matches all div elements with the id admin-button-id. The second possibilty (after the comma) matches all html elements that are children of a div element with id admin-button-id. This works, but I would prefer a version in which I would not have to duplicate div#admin-button-id. So, something like

div#admin-button-id *?

表示子级是可选的.有这样一个有效的构造吗?

to indicate that the children are optional. Is there such a valid construct?

推荐答案

基于@nyen的建议，我提出了以下解决方案:

Based on suggestions from @nyen I came up with the following solution:

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

I have to deal with the following markup code (unnecessary css classes ommited):

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

可以单击此按钮的各个部分，无论是最内部的跨度，中间的跨度还是外部的div.但只有外部div包含一个ID，我可以在我的GTM触发器中使用该ID进行匹配.因此，在GTM中，我创建了一个名为自定义JavaScript"类型的用户定义变量"calculatedClickId".自定义函数在dom树中向外搜索(从最内层到外层div)的id:

It is possible to click on various parts of this button, either the innermost span, the intermediate span or the outer div. But only the outer div includes an id which I can use to match against in my GTM trigger. So within GTM I created a user-defined variable called 'calculatedClickId' of type 'Custom JavaScript'. The custom function searches for the id in the dom tree in the outward direction (from the innermost span to the outher 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.

The {{Click Element}} is the html element that is provided by GTM. So now it doesn't matter where within my html element a click occurs, the variable calculatedClickId is always set to the id of the outer div.

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

This allows me to use the variable calculatedClickId within my trigger configuration easily:

我知道自定义javascript方法尚不安全(可能)，并且可能会进一步完善，但是此解决方案是对CSS选择器方法的改进.

I'm aware that the custom javascript method is not bulletproof (yet) and might be refined further, but this solution is an improvement over the css selector method.

这篇关于如何检索要在触发器定义中使用的父节点的元素ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！