Nuevo activador de visibilidad en GTM

Después de hablar recientemente  del nuevo activador o trigger  de GTM para medir el scroll en las páginas, hoy voy a hablar del activador de visibilidad, que nos permitirá saber cuando el elemento ha sido realmente visualizado por el usuario.

Este activador, tomará el valor “verdadero” cuando un elemento de la página sea visible para el usuario (realmente, es que el elemento sea visible en el viewport del usuario o lo que es lo mismo, en la parte de la página que se está mostrando en el navegador).  Siendo por tanto uno de los activadores más útiles que se han añadido a la herramienta.

Gracias a este nuevo activador, podremos medir la aparición de popups, de bloques que se muestran en base a alguna acción del usuario (como el carrito de la compra al pasar el ratón por encima), o simplemente cuando un usuario llega a alguna parte del contenido y por ejemplo visualiza una llamada a la acción, o el banner que tenemos en el pie de la página.

En este post voy a usar el ejemplo de un contenido que está oculto y que, tras una acción por parte del usuario, se muestra. Concretamente, el ejemplo se basa en un formulario que al llegar al final del mismo y dar a “continuar”, despliega un nuevo campo donde tenemos que introducir un código SMS para poder avanzar.

Mi objetivo, es lanzar una página virtual (y así construir un embudo) cuando el usuario visualice el bloque con el campo del código SMS.

activador de visibilidad

Formulario con el bloque del código SMS oculto

 

activador de visibilidad

Formulario mostrando el bloque del código SMS

Los pasos que debo seguir para lanzar una página virtual usando el nuevo activador de visibilidad de GTM son los siguientes:

Paso 1: Crear el activador

Lo primero es crear mi activador.  Este activador deberá tomar el valor “verdadero” cuando mi bloque con el campo para introducir el código SMS sea visible. Una vez creado,  lo usaré posteriormente para una etiqueta que lance mi página virtual (o mi evento si fuese el caso).

Crear el activador

Configuración de mi activador de visibilidad para el bloque de SMS

Voy a comentar ahora cómo lo he configurado:

  1. Selection Method: Lo primero que he indicado, es que quiero usar el atributo ID para seleccionar el elemento que debe tener visibilidad para disparar el activador. La otra opción es usar una clase CSS.
  2. Element ID: Aquí tenemos que indicar el valor del atributo ID (o la clase) es decir, el identificador del elemento que debe ser visible. En mi caso es “sms-block” (es el ID del bloque que contiene el campo del código SMS).
  3. When to fire this trigger: O lo que es lo mismo, cuándo queremos que se dispare:
    • Once per page o una ver por página (lo que yo he puesto)
    • Once per element o una vez por elemento –  Si varios elementos tienen la misma clase, se activará la primera vez que cada uno de ellos sea visible. Si hay varios elementos con el mismo ID, solo se activará con el primer elemento que sea visible.
    • Every time an element appears on screen o cada vez que el elemento sea visible – En este caso, cada vez que el elemento sea visible se producirá una activación.
  4. Advanced (no los he usado para este ejemplo)
    • Minimum percent visible o porcentaje mínimo de visibilidad – Sirve para indicar cuan visible tiene que ser un elemento, es especialmente útil si la aparición de los elementos se produce a través de un efecto de entrada, en el que el elemento se va haciendo cada vez más opaco y por tanto, más visible. Requiere activar una variable previamente.
    • Set minimum on-screen duration o tiempo mínimo que debe aparecer en la página – Se usa para que el activador sea verdadero si el elemento pasa X tiempo mostrándose en la página. Esta es una manera de asegurarte que el elemento ha pasado X tiempo siendo visible para el usuario, muy útil para la publicidad. Por ejemplo,  si quieres medir si realmente tu banner se ha visto y no se ha pasado rápidamente, podrías poner que el banner debe estar visible al menos 5000 milisegundos (5s).  Requiere, de nuevo, activar una variable para usarlo.
    • Observe DOM elements: De las funcionalidades más útiles, se usa para “seguir” los cambios que puedan suceder en el DOM. El caso típico, para entenderlo mejor, sería el formulario de contacto o suscripción el cual, al enviarlo, genera un mensaje de agradecimiento en la propia página sin existir recarga de la misma. Este mensaje es inyectado mediante un javascript, lo que provoca una modificación del DOM. Mostraré este ejemplo en otro post.
  5. Por último, indico que quiero que el activador esté activo en todo el sitio. No obstante, podría perfectamente haberlo puesto únicamente en el paso donde se encuentra el formulario (de hecho sería lo más correcto).

Paso 2: Crear la etiqueta

Una vez configurado el activador de visibilidad, el siguiente paso es crear la etiqueta que lanzará mi página virtual.

Etiqueta página virtual

Configuración de la etiqueta que lanzará la página virtual

La configuración para este ejemplo es muy simple:

  • He indicado que es una etiqueta de Universal Analytics de tipo pageview
  • Le he puesto mi variable con los settings de la cuenta de Google Analytics
  • En el bloque de “campos a configurar” o “fields to set”  le he indicado que la página es “/comprapaso1-smsConfirmation”
  • Y finalmente como activador le he puesto el activador de visibilidad que he creado en el punto anterior

Paso 3: Comprobar y publicar

Una vez que tengo la etiqueta creada el siguiente paso es, como siempre, comprobar que todo funciona correctamente antes de publicar. Para ello clico sobre vista previa y, en el formulario, le doy a “continuar” para ver si salta mi etiqueta de página virtual.

Comprobación etiqueta de página virtual

Comprobación de que la etiqueta “salta” cuando el bloque con el código SMS se vuelve visible

Ahora que lo he comprobado, solo quedaría publicar.

En próximos post, seguiremos explorando este activador, ya que para mí es uno de los que más juego dará a la hora de medir interacciones del usuario directamente desde GTM como por ejemplo:

  • Previsualizar una capa con el carrito de la compra

  • Previsualizar los detalles de un producto al pasar por encima

  • Medir si el usuario realmente llega a ver las llamadas a la acción

  • Medir si el usuario realmente visualiza ciertos anuncios en una página

  • etc.

Si ya han probado el activador y nos quieres contar tu caso, hazlo en los comentarios!

Autor:

Consultor de analítica web y optimización web en la consultora Metriplica. Mi pasión es mejorar el rendimiento de los websites, especialmente el de tiendas online.

Leave Comment

Your email address will not be published. Required fields are marked *