Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

300
Visualizações
How can I extract the text next to an image with Google Tag Manager?

Here's the challenge:

Code Excerpt

We have an image and text that describes it all nested in the same div. When somebody clicks on that image, we want Google Tag Manager to return that text.

Basically, we need to:

  1. Go up 3 parent nodes
  2. Go down to the child node with the class "right-section"
  3. Go down to the child node with the class "is-title"
  4. Go down to the child node with the tag "a"
  5. Extract the text

Using my crude, self-taught Javascript knowledge, I came up with this monstrosity of a function:

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

... which does not work at all.

Any suggestions?

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

this is an example markup basically the idea is use closest function to go up to dom tree and then use 'querySelector' with that result to go down to any element inside it

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>

about 4 years ago · Juan Pablo Isaza Relatório

0

ok, Here is an example of what you need to do. If you need an exact answer that would work by just copy pasting it, show the block of HTML exactly how Amir did. I used Amir's HTML example to do the trick. Also, if you see that it takes the same text when you click on different images, include in your html snippet the code from other images, so that we could see how they relate to the parents and could refine the selectors.

Here's your CJS code:

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

There's completely no need to hop from node to node once you got to the bottom. From the bottom parentElement, just do the query selector once and you're in good hands.

You could also use .closest, but it seems like its complexity is way over just a few parentElements. I know it's insignificant, but hey.

Here is how I debug it right on this page (in Amir's answer): enter image description here

about 4 years ago · Juan Pablo Isaza Relatório

0

Here's what ultimately worked, for anyone Googling this:

function (){
     el = {{Click Element}};
     var item = el.parentElement.parentElement.nextElementSibling.getElementsByTagName('a')[0].innerText;
     return item;
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda