Rastrea la visibilidad de elementos en pantalla con Google Tag Manager

¿Quieres ver el contenido de la página? Mostrar

¿Te has preguntado alguna vez cómo puedes saber si un elemento de tu sitio web es visible para los visitantes? Con Google Tag Manager (GTM), puedes implementar un seguimiento avanzado que te permita obtener datos valiosos sobre el comportamiento de los usuarios. En este artículo, exploraremos cómo rastrear la visibilidad de elementos específicos en tu página, lo que te ayudará a tomar decisiones más informadas sobre tu contenido y diseño.

La capacidad de rastrear la visibilidad de los elementos no solo es útil para la analítica, sino que también puede influir en la optimización de tu sitio web. Al saber qué elementos son más vistos, puedes ajustar tus estrategias de marketing y mejorar la experiencia del usuario. A continuación, veremos cómo puedes implementar un sistema de seguimiento utilizando Google Tag Manager.

¿Qué es el seguimiento de visibilidad de elementos?

El seguimiento de visibilidad de elementos se refiere a la capacidad de detectar cuándo un elemento específico de una página web se muestra en la ventana del navegador del usuario. Esto se logra a través de un mecanismo que escucha el comportamiento de desplazamiento (scroll) en la página. Cuando un usuario desplaza hacia abajo y un elemento entra en la vista, se puede registrar una acción particular, como un evento de dataLayer.push.

El rastreo de elementos visibles puede ser beneficioso para:

Medir la efectividad de los elementos visuales y de marketing.
Optimizar el contenido basado en su visibilidad.
Reducir el riesgo de que los informes de Google Analytics se saturen con eventos no deseados.

¿Cómo funciona el seguimiento de visibilidad de elementos en GTM?

Para implementar el seguimiento de visibilidad, se utiliza un listener personalizado que monitoriza la aparición y desaparición de elementos en la pantalla. Este listener se encarga de enviar eventos a la capa de datos cuando los elementos son visibles o se ocultan, lo que permite que Google Analytics los registre adecuadamente.

La configuración del listener implica algunos pasos clave:

Definir los elementos que deseas rastrear utilizando selectores CSS.
Configurar el listener para que envíe un evento al dataLayer cada vez que el estado de visibilidad cambie.
Asegurarte de que el listener no genere eventos duplicados si el elemento ya ha sido registrado como visible.

Requisitos para el seguimiento de visibilidad

Antes de comenzar a configurar el seguimiento de visibilidad de elementos, es importante tener en cuenta ciertos requisitos:

El listener depende del desplazamiento. Solo funcionará cuando el usuario se desplace por la página.
Los elementos que deseas rastrear deben ser estáticos. Elementos que se mueven o que se cargan dinámicamente pueden no ser rastreados correctamente.
Debes tener acceso a modificar el código JavaScript del sitio para implementar el listener.

Configuración de un listener de eventos automático

La implementación de un listener personalizado requiere un fragmento de código JavaScript. Si bien puede parecer complicado, aquí te explicamos cómo configurarlo. El listener debe estar diseñado para observar los elementos específicos que deseas rastrear. Un ejemplo simple de este código podría ser:

<script>
  (function(w, d, ns) {
    var _ns = "_" + ns;
    w[_ns] = w[_ns] || {
      elements: [],
      addElements: function(selector, onShow, onHide) {
        var elements = d.querySelectorAll(selector);
        for (var i = 0; i < elements.length; i++) {
          w[_ns].elements.push({
            element: elements[i],
            onShow: onShow,
            onHide: onHide,
            wasShown: false,
            wasHidden: false
          });
        }
        w[_ns].checkElements();
      },
      checkElements: function() {
        for (var i = 0; i < w[_ns].elements.length; i++) {
          var rect = { top: 0, left: 0 }, isVisible = false;
          if (typeof w[_ns].elements[i].element.getBoundingClientRect === "function") {
            rect = w[_ns].elements[i].element.getBoundingClientRect();
          }
          isVisible = (rect.top >= 0 && rect.top = 0 && rect.bottom <= w.innerHeight);
          if (isVisible) {
            if (!w[_ns].elements[i].wasShown) {
              w[_ns].elements[i].wasShown = true;
              if (typeof w[_ns].elements[i].onShow === "function") {
                w[_ns].elements[i].onShow(w[_ns].elements[i].element);
              }
            }
          } else {
            if (w[_ns].elements[i].wasShown) {
              w[_ns].elements[i].wasHidden = true;
              if (typeof w[_ns].elements[i].onHide === "function") {
                w[_ns].elements[i].onHide(w[_ns].elements[i].element);
              }
            }
          }
        }
      },
      bindWindow: function() {
        w.addEventListener("scroll", w[_ns].checkElements, false);
        w.addEventListener("resize", w[_ns].checkElements, false);
      }
    };
    w[ns] = function(selector, onShow, onHide) {
      if (d.readyState === "complete") {
        w[_ns].bindWindow();
        w[_ns].addElements(selector, onShow, onHide);
      } else {
        d.addEventListener("readystatechange", function() {
          if (d.readyState === "complete") {
            w[_ns].bindWindow();
            w[_ns].addElements(selector, onShow, onHide);
          }
        });
      }
    };
  })(window, document, "watchElements");

  watchElements("TU_SELECTOR_CSS_AQUI", function(element) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'elementVisibility',
      'visibilityStatus': 'shown',
      'elementAttribute': element.getAttribute("TUS_ATRIBUTO_AQUI")
    });
  }, function(element) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'elementVisibility',
      'visibilityStatus': 'hidden',
      'elementAttribute': element.getAttribute("TUS_ATRIBUTO_AQUI")
    });
  });
</script>

Recuerda sustituir TU_SELECTOR_CSS_AQUI y TUS_ATRIBUTO_AQUI con los valores específicos que deseas rastrear. Por ejemplo, si tienes un botón con el ID miBoton, tu selector CSS sería #miBoton.

Pruebas de funcionamiento

Una vez que hayas configurado el listener, es esencial probar su funcionamiento:

Activa el modo de vista previa de Google Tag Manager.
Recarga la página que estás probando.
Desplázate hacia abajo hasta que veas el elemento que deseas rastrear.
Verifica en la consola de depuración si se registró el evento elementVisibility con el estado shown.
Desplázate hacia arriba para ocultar el elemento y verifica que se registre otro evento con el estado hidden.

Configuración de disparadores y variables

Para utilizar correctamente los eventos registrados en Google Tag Manager, necesitas crear disparadores y variables que reconozcan estos eventos. Debes seguir estos pasos:

Crea dos Variables de Capa de Datos que reconozcan visibilityStatus y elementAttribute.
Configura un disparador que se active con el evento elementVisibility.
Decide si quieres que el disparador se active solo en eventos shown o hidden.

Integración con Google Analytics

Para enviar los datos a Google Analytics, debes crear una etiqueta que recoja la información de los eventos de visibilidad. Al configurar esta etiqueta, asegúrate de:

Utilizar el nombre del evento elementVisibility.
Asegurarte de que la etiqueta se active con el disparador que creaste previamente.
Realizar pruebas en los informes en tiempo real de Google Analytics para verificar que los eventos se están enviando correctamente.

Ejemplo práctico de seguimiento de visibilidad

Imagina que tienes un conjunto de imágenes que deseas rastrear para ver cuántas de ellas son vistas por los visitantes. Configuras tu listener para que reconozca los elementos con la clase imagen-seguimiento dentro de un contenedor con el ID galeriaPrincipal.

watchElements("div#galeriaPrincipal img.imagen-seguimiento", function(element) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'elementVisibility',
    'visibilityStatus': 'shown',
    'elementAttribute': element.getAttribute("alt")
  });
}, function(element) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'elementVisibility',
    'visibilityStatus': 'hidden',
    'elementAttribute': element.getAttribute("alt")
  });
});

Con esta configuración, podrás distinguir cada imagen en tus informes de Google Analytics, utilizando el atributo alt como identificador único.

Consideraciones finales

Implementar el seguimiento de visibilidad de elementos en tu sitio web a través de Google Tag Manager puede ser muy beneficioso. Sin embargo, es fundamental tener en cuenta que algunos sitios pueden tener configuraciones que dificulten la correcta ejecución del listener. Asegúrate de probar bien tu configuración y ajustarla según sea necesario. Este enfoque te permitirá obtener información valiosa sobre cómo interactúan los usuarios con el contenido de tu página.