如何使用Google跟蹤代碼管理器提取影像旁邊的文本？

這是挑戰：

我們有一個描述它的影像和文本都嵌套在同一個 div 中。當有人點擊該圖片時，我們希望 Google 跟蹤代碼管理器回傳該文本。

基本上，我們需要：

1. 上3個父節點
2. 向下到具有類“right-section”的子節點
3. 下到具有“is-title”類的子節點
4. 下到帶有標簽“a”的子節點
5. 提取文本

使用我粗糙的、自學的 Javascript 知識，我想出了一個函式的怪物：

function(){
  return el.parentNode.parentNode.parentNode.getElementsByClassName("right-section")[0].getElementsByClassName("is-title")[0].getElementsByTagName("a")[0].innerText;
}

...這根本不起作用。

有什么建議么？

uj5u.com熱心網友回復：

這是一個示例標記，基本上這個想法是使用closest函式上升到 dom 樹，然后使用 'querySelector' 與該結果一起下降到其中的任何元素

const img = document.querySelector(".item_image")
img.onclick = e=>{
    const root = e.target.closest(".card") // goind back to root element
    const text = root.querySelector(".text") // going down to text element
    console.log(text.innerText)
}

<div class="card" style="width:400px;">
    <div class="sections">
        <img class="item_image" style="width:200px;" src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="">
    </div>
    <div class="another-seci">
        <div class="text">
            Despite its modest MSRP, Fujifilm's entry-level X-A3 has dual control dials, a tilting touchscreen, and the same 24MP sensor from the company's flagship models - but with a traditional Bayer color filter array instead of X-Trans. We're pushing through our full 
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

document.querySelectorAll('.item_image').forEach(item => {
  item.addEventListener('click', event => {
        const root = event.target.closest(".card") // goind back to root element
    const text = root.querySelector(".text") // going down to text element
    console.log(text.innerText)
  })
})

<div class="card" style="width:400px;">
    <div class="sections">
        <img class="item_image" style="width:200px;" src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="">
    </div>
    <div class="another-seci">
        <div class="text">
            Despite its modest MSRP, Fujifilm's entry-level X-A3 has dual control dials, a tilting touchscreen, and the same 24MP sensor from the company's flagship models - but with a traditional Bayer color filter array instead of X-Trans. We're pushing through our full 
        </div>
    </div>
</div>
<div class="card" style="width:400px;">
    <div class="sections">
        <img class="item_image" style="width:200px;" src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="">
    </div>
    <div class="another-section">
        <div class="text">
            BlaDespite its modest MSRP, Fujifilm's entry-level X-A3 has dual control dials, a tilting touchscreen, and the same 24MP sensor from the company's flagship models - but with a traditional Bayer color filter array instead of X-Trans. We're pushing through our full 
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

好的，這是您需要做的一個示例。如果您需要一個準確的答案，只需復制粘貼即可，請準確顯示 HTML 塊 Amir 是如何做到的。我使用了 Amir 的 HTML 示例來解決這個問題。此外，如果您在單擊不同的影像時看到它采用相同的文本，請在您的 html 片段中包含其他影像的代碼，以便我們可以看到它們與父母的關系并可以改進選擇器。

這是您的 CJS 代碼：

function(){
  return {{Click Element}}.parentElement.parentElement.querySelector(".text").innerText
}

一旦你到達底部，就完全不需要從一個節點跳到另一個節點。從底部的 parentElement，只需執行一次查詢選擇器，您就可以很好地掌握。

您也可以使用 .closest，但它的復雜性似乎超過了幾個 parentElements。我知道這微不足道，但是嘿。

這是我在此頁面上除錯它的方式（在 Amir 的回答中）：

標籤：javascript 谷歌标签管理器 通过类名获取元素 通过标签名获取元素 父节点

上一篇：使用javascript檢查最小日期和最大日期

下一篇：TypeError：無法讀取未定義的屬性（讀取“等于”）