從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來執行提取該數據所需的操作。 但是返回值是我的問題。 這是有關此問題的Google工具提示的快照。

Answer 1

我更喜歡這種方式，因為它更具擴展性。 例如，如果要跟蹤此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事件

只需使用變量{{Product ID}} ，其中將包含您的產品ID