addEventListener的返回值 - JS

Question

我正在处理现有代码。我有多个具有产品ID属性的div。嵌套在每个div的深处是一个按钮。单击该按钮时，我需要拉出它嵌套的div的产品ID。

我已经提出了一些可以找到该数据的代码，但我很难将这些数据作为值返回。任何指导或易于理解的文献将不胜感激。

<!-- HTML -->
<div product-id="111">
    <div>
        <a class="button" href="#">Button A</a>
    </div>
</div>

<div product-id="222">
    <div>
        <a class="button" href="#">Button B</a>
    </div>
</div>

// Javascript
document.querySelectorAll(".button").forEach(function(e){
    e.addEventListener("click", grab_id);
});

function grab_id() {
    var prod_id = this.closest("div[product-id]").getAttribute("product-id");
    console.log(prod_id);
}

这是用于在Google跟踪代码管理器中创建变量。它们允许您使用JS来执行提取数据所需的操作。但是返回价值是我的问题。以下是关于此事的谷歌工具提示的快照。

Answer 1

我更喜欢这种方式，因为它＆＃39;更具可扩展性。例如，如果您想跟踪此div中的其他按钮/元素。

1）在GTM中创建Javascript变量，它将为您找到并返回产品ID。

代码：

function() {
    var el = {{Click Element}}
    while (el.getAttribute("product-id") == null && el !=null) {
      console.log(el);
      console.log(el.getAttribute("product-id"));
        el = el.parentElement
    }
    return el != null ? el.getAttribute("product-id") : "";
}

2）在GTM中创建一个触发器，当您点击按钮时会触发该触发器

触发类型：点击 - 只需链接

触发此触发器：Click Element匹配CSS选择器.button

3）创建您要发送的标记。在我的例子中，我将使用GA Event

只需使用包含产品ID的变量{{Product ID}}