Tengo un sitio web con un carrusel de imágenes que permite a los usuarios desplazarse por un conjunto de imágenes, cada una de las cuales aparece a la vez.

Estoy tratando de configurar un activador de visibilidad de elementos en Google Tag Manager que se activa cada vez que aparece una imagen en la pantalla.

El código del sitio se ve así:

 <div class="c-carousel__slides row no-gutters" style="transform: translateX(-608px);")> <div class="col-12 c-carousel__slide"> <div class="picture-loading c-card__pack"> <picture> <img alt="alt" src="https://image1.jpg"> <div class="col-12 c-carousel__slide"> <div class="picture-loading c-card__pack"> <picture> <img alt="alt" src="https://image2.jpg">

En Tag Manager, puedo crear fácilmente un disparador de visibilidad de elementos, sin embargo, se basa en observar los cambios de DOM. Sin embargo, el HTML de mi sitio web no tiene cambios de DOM cuando el usuario se desplaza por las imágenes; solo el elemento de estilo cambia de 0px (valor inicial) a -608px, -912px, -1216px y -1520px.

Con JS, puedo capturar fácilmente estos valores:

 var z = document.getElementsByClassName('c-carousel__slides row no-gutters')[0].style.transform

Pero no estoy seguro de cómo se traduce eso en el activador de visibilidad del elemento en Tag Manager: