如何使用 Google 跟踪代码管理器提取图片旁边的文本？

Question

挑战如下：

我们有一张图片和描述它的文字嵌套在同一个 div 中。当有人点击该图片时，我们希望 Google 标签管理器 return 该文本。

基本上，我们需要：

上去3个父节点
下到class“右段”的子节点
下到带有class“is-title”的子节点
下到标签为“a”的子节点
提取文本

利用我粗陋的、自学的 Javascript 知识，我想出了这个怪异的函数：

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

...根本不起作用。

有什么建议吗？

Answer 1

这是一个示例标记，基本上这个想法是使用 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>

Answer 2

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>

Answer 3

好的，这是您需要执行的操作的示例。如果您需要一个只需复制粘贴就可以解决的确切答案，请显示 HTML 的块，看看 Amir 是如何做的。我使用了 Amir 的 HTML 示例来解决这个问题。此外，如果您发现当您点击不同的图像时它采用相同的文本，请在您的 html 片段中包含来自其他图像的代码，以便我们可以看到它们与父图像的关系并可以改进选择器。

这是您的 CJS 代码：

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

一旦到达底部，就完全没有必要从一个节点跳到另一个节点。从底部的 parentElement 开始，只需执行一次查询选择器，您就万事大吉了。

您也可以使用 .closest，但它的复杂性似乎远远超过几个父元素。我知道这微不足道，但是嘿。

以下是我在此页面上调试它的方式（在 Amir 的回答中）：

Answer 4

以下是最终有效的方法，适用于谷歌搜索的任何人：

function (){
     el = {{Click Element}};
     var item = el.parentElement.parentElement.nextElementSibling.getElementsByTagName('a')[0].innerText;
     return item;
}

如何使用 Google 跟踪代码管理器提取图片旁边的文本？

How can I extract the text next to an image with Google Tag Manager?

javascript

parent-node

getelementsbytagname

getelementsbyclassname

google-tag-manager