Question

我有一个很长的特写列表。每个都是一个反应组件。我给每个切换点都添加了一个代号, button id= ga- enable- ${fature. name_ /code> 。


其背后的想法是,我可以为 Google Tag Manger 的每一个人创建不同的事件, 设置事件名称 Fety: @Click ID_Q/code> 。

然而,由于我无法控制的无法解释的原因,部件有时在下面加上一个迪维,在下面登记。
Sometimes it is: div.settings-group > button.ant-switch
Other times it is: div.settings-group > button.ant-switch > div.ant-handle-switch
前一种情况是直截了当的,并按计划运作,因为ID附在 button 上。然而,对于第二种情况,点击ID是空白的。
我尝试过使用 closest ()  创建自定义变量, 但似乎无法为这里获取 ClicK 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

我测试了这个 < code> Custom JavaScript 变量 , 它在我这边起作用

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 预览结果 :

Click the span and get the button id
Click the button also get the button id

友情链接