Midiendo el scroll en una página con Google Tag Manager

Desde Octubre de 2017, tenemos disponible en GTM un nuevo tipo de activador o trigger llamado Scroll Depth o Profundidad del desplazamiento. Este trigger nos valdrá precisamente para medir el uso del scroll de manera integrada en GTM.

Anteriormente, medir el uso del scroll en una página a través de Google Tag Manager, requería insertar una etiqueta custom html y hacer uso de javascripts como se indica en este post de Daniela o en este post de LunaMetrics.

Realmente, tener que insertar un código externo para medir el uso del scroll no es que fuera algo complicado, pero no dejabas de tener una sensación de esto debería estar incluido en la herramienta cada vez que lo hacías.

Activador scroll depth

Nuevo activador scroll depth o profundidad del scroll

Vamos a ver ahora los pasos que tenemos que seguir para activar el seguimiento del scroll:

Paso 1: Activar las variables para el seguimiento del scroll

Antes de comenzar a medir el scroll, tendremos que activar las variables que almacenarán la información sobre el mismo.

Para ello, tendremos que ir a la sección de “Variables” de GTM y, dentro del apartado de “Variables integradas” o “Built-in variables”, activar las que se encuentran bajo la sección “Desplazamiento ” o “Scroll”.

Son 3 las variables que tenemos disponibles, recomiendo activarlas todas:

  • scroll depth threshold – indica el valor del scroll que “cruzamos”, por ejemplo 25, 50, 75, 100
  • scroll units – Indica en qué unidades se mide el scroll (pixels o %)
  • scroll direction – Indica la dirección del scroll (horizontal o vertical)
Variables para medir el scroll

Variables para medir el scroll

Paso 2: Crear una etiqueta de evento de Universal Analytics

El segundo paso, una vez que tenemos las variables activadas, es crear una etiqueta de evento de Universal Analytics. Esta etiqueta nos servirá, como su nombre indica, para enviar un evento  a Google Analytics cada vez que se alcance un determinado umbral del scroll.

Para ser originales la he llamado “UA – Event Scroll Tracking” ;). El resto de parámetros los he puesto de esta manera:

  • Categoría (category): scroll tracking – Agruparé todos los eventos de scroll en una categoría para poder analizarlos con mayor facilidad
  • Acción (action): {{Scroll Depth Threshold}}  – Esta es una nueva variable que almacena el umbral del scroll alcanzado.
  • Etiqueta (label) : {{page path}} – Esta es la variable “ruta del contenido” que se crea automáticamente en GTM. Tendrá el nombre de la página para poder examinar dónde se ha generado el scroll. Realmente es una variable opcional y, en cierto modo, redundante ya que podemos usar la dimensión “página” o page en el propio informe de eventos. Otras alternativas sería poner el título de la página si estamos en un blog y queremos ver el nombre del artículo que genera el scroll.

Guardaremos la etiqueta sin trigger por ahora, ya que lo creamos a continuación.

Etiqueta para lanzar el evento del scroll

Etiqueta para lanzar el evento del scroll

Paso 3:Crear el nuevo activador de profundidad de desplazamiento (o scroll depth)

Una vez que tenemos las variables y la etiqueta preparada, lo siguiente que tenemos que hacer es definir nuestro activador. Es aquí cuando realmente la cosa se pone interesante. Seleccionamos “Activadores” y crearemos un nuevo activador.

En un nuevo derroche de originalidad le he llamado “UA – Scroll Event Launcher”, como tipo seleccionaremos “profundidad de desplazamiento” o “scroll depth”.

Cómo voy a medir el uso del un scroll vertical, seleccionaré “profundidades de desplazamiento vertical” o “vertical scroll depth” .

A continuación decido si mi umbral (los puntos donde se disparará el activador) se van a medir en pixeles o en porcentajes.

Si quiero medir una página de una altura concreta y fija, donde conozco dónde las partes importantes de la página, debería seleccionar pixels. Pe. Si mi módulo de productos relacionados está a partir del pixel 700, querría crear un umbral en dicho pixel.

Normalmente, querremos usar el seguimiento de scroll en páginas de alturas diferentes, como mi caso, por lo que seleccionaré “porcentaje” como unidad de medición.

A continuación debo establecer los umbrales en los que quiero que el trigger genere un evento. En este caso he puesto 25, 50, 75 y 100.

Esto quiere decir que cada vez que se sobrepase uno de los umbrales definidos, por ejemplo, el 25% de la altura de la página, se generará un evento de dataLayer que podré usar para lanzar mi evento de Google Analytics.

El trigger debería parecerse a este

Configuración del activador de scroll

Configuración del activador de scroll

Paso 4: Asignar el activador al tag

Antes de previsualizar si nuestra etiqueta funciona, debemos asignar el activador que acabamos de crear a nuestra etiqueta de scroll.

Activador asignado a la etiqueta

Asignando el activador a la etiqueta

Paso 5: Previsualizar y probar antes de publicar

El penúltimo paso antes de publicar, es comprobar que todo funciona correctamente. Para ello, realizaremos una previsualización de nuestro contenedor y veremos qué pasa con nuestra etiqueta de seguimiento de scroll.

Tenemos que activar el modo de “vista previa” o “preview” en el GTM (parte superior derecha, junto a publicar) y recargar nuestra página para ver la ventana de depuración.

Para asegurar además de que los eventos están llegando a Google Analytics, podemos usar el informe de “tiempo real”.

Depurando el tag de scroll

Depurando el tag de scroll

 

Eventos en Google Analytics

Comprobando que los eventos llegan a Google Analytics

Paso 6: Publicar

El último paso, después de comprobar que todo funciona, es publicar el contenedor para que los cambios sean efectivos.

Algunas observaciones:

  • El evento de scroll que he creado es interactivo es decir, afecta a la tasa de rebote. En el caso de que no queramos que afecte a la tasa de rebote, deberíamos declararlo como “no interactivo”. Si todo esto te suena a chino, puedes leer este post sobre eventos interactivos.
  • En el caso de que al cargar nuestra página sobrepasemos algún límite (normalmente el 25% si nuestra página no tiene mucho contenido), se lanzará automaticamente el evento. Hay que tener en cuenta que Google Analytics tiene un límite de 500 hits por sesión (se considera un hit el envío de una página vista o de un evento), si esperamos que nuestras visitas vean mucho contenido y hagan mucho scroll es posible que alcancemos este límite.
  • Los navegadores actuales, son capaces de recordar la posición en la que se encuentra un usuario en una página dada. Ello implica que si abandono la página al final de la misma y vuelvo “atrás” volveré a encontrarme al final de la misma, esto hará que se lancen todos los eventos de scroll.

Espero que el post les haya resultado útil, cualquier comentario o mejora que quieran proponer haganlo 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.

3 Comments

  1. Desarrollador

    Un excelente articulo claro y directo contando los pasos que realmente funcionan me ha funcionado todo correctamente unas gracias enormes por seguir contribuyendo al mundo con el aprendizaje.

  2. Nicolas

    Hola, excelente articulo. Pero al iniciar la lectura de la pagina se activan los 4 eventos (25,50,75 y 100). Siguiendo los pasos lo chequeeamos varias veces y no vemos el porque. Espero puedan ayudarnos. Saludos

  3. Hola Nicolás,

    El problema que tiene este método es que si la página “cabe” en la pantalla, para el script implica que has visto todos los % posibles, te recomiendo que te mires este post de Simo Ahava donde explica cómo evitar el problema.

Leave Comment

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