如何获取父元素的ID作为事件的标题？

Question

我有一长串功能切换列表。每个都是一个反应组件。我已经为每个切换添加了一个 id，

button id='ga-enable-${feature.name}

。

这背后的想法是，我可以通过事件名称为 Google 标签管理器中的每个事件创建不同的事件

Feature: {{Click ID}}

。

但是，由于无法解释的原因并且我无法控制，该组件有时会在其下方注册一个额外的 div。我的意思是：

有时是：

div.settings-group > button.ant-switch

其他时候是：

div.settings-group > button.ant-switch > div.ant-handle-switch

前一种情况很简单并且按计划工作，因为 ID 附加到

button

。但是，对于第二个实例，点击 ID 为空。

我尝试使用

closest()

创建自定义变量，但这似乎并不能帮助我检索 ClickK ID。

有没有办法让我在事件名称中获取父级的 ID，以方便需要第二个 CSS 选择器触发器的情况？

我的触发点是：

Click Element Matches CSS Selector div.settings-group-content > div.settings-group-row > button, div.settings-group-content > div.settings-group-row > button > *

Answer 1

我测试了这个

Custom JavaScript Variable

并且它在我这边工作

function() {
    var clickElement = {{Click Element}};
    
    function findClosestButton(element) {
        while (element) {
            console.log({element: element});          
            if (element.tagName.toLowerCase() === 'button') {
                return element;
            }
            element = element.parentElement;
        }
        return null;
    }    
    if (clickElement.tagName.toLowerCase() === 'button') {
        return clickElement.id;
    } else  {
        var button = findClosestButton(clickElement);   
        console.log({button: button});
        if (button && button.id) {
            return button.id;
        }
    }
    return false;
}

我使用以下 html 创建一个测试页面

    <div class="settings-group-content">
        <div class="settings-group-row">
            <button id="save-button">
                <span>Save</span>
            </button>
        </div>
        <div class="settings-group-row">
            <button id="cancel-button">
                <span>Cancel</span>
            </button>
        </div>
    </div>

---

GTM预览结果：

1. 点击span并获取按钮id

2. 点击按钮还可以获取按钮id