0
299
Vistas¿Cómo puedo extraer el texto junto a una imagen con Google Tag Manager?
Aquí está el desafío:
Tenemos una imagen y un texto que lo describe todo anidado en el mismo div. Cuando alguien hace clic en esa imagen, queremos que Google Tag Manager devuelva ese texto.
Básicamente, necesitamos:
- Sube 3 nodos principales
- Vaya al nodo secundario con la clase "sección derecha"
- Vaya al nodo secundario con la clase "is-title"
- Baja al nodo secundario con la etiqueta "a"
- Extrae el texto
Usando mi conocimiento crudo y autodidacta de Javascript, se me ocurrió esta monstruosidad de función:
function(){ return el.parentNode.parentNode.parentNode.getElementsByClassName("right-section")[0].getElementsByClassName("is-title")[0].getElementsByTagName("a")[0].innerText; }... que no funciona en absoluto.
¿Alguna sugerencia?
3 Respuestas
Responde la pregunta0
este es un marcado de ejemplo, básicamente, la idea es usar la función closest para subir al árbol dom y luego usar 'querySelector' con ese resultado para bajar a cualquier elemento dentro de él
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>0
ok, aquí hay un ejemplo de lo que necesitas hacer. Si necesita una respuesta exacta que funcione simplemente copiando y pegando, muestre el bloque de HTML exactamente como lo hizo Amir. Usé el ejemplo HTML de Amir para hacer el truco. Además, si ve que toma el mismo texto cuando hace clic en diferentes imágenes, incluya en su fragmento html el código de otras imágenes, para que podamos ver cómo se relacionan con los padres y podamos refinar los selectores.
Aquí está su código CJS:
function(){ return {{Click Element}}.parentElement.parentElement.querySelector(".text").innerText }No hay necesidad de saltar de un nodo a otro una vez que llegaste al final. Desde el elemento principal inferior, simplemente haga el selector de consulta una vez y estará en buenas manos.
También podría usar .closest, pero parece que su complejidad es muy superior a unos pocos parentElements. Sé que es insignificante, pero bueno.
Así es como lo depuré directamente en esta página (en la respuesta de Amir): 
0
Esto es lo que finalmente funcionó, para cualquiera que busque esto en Google:
function (){ el = {{Click Element}}; var item = el.parentElement.parentElement.nextElementSibling.getElementsByTagName('a')[0].innerText; return item; }