Creando evento de Scroll Depth en Google Tag Manager V2

¿Podemos medir el comportamiento de un usuario en un sitio de una página (one page)? ¿Cómo podemos saber cuánto contenido vio? ¿Podemos obtener más datos relacionados a lo qué está viendo este usuario en el sitio?

Para todas estas preguntas la respuesta es simple, si por casualidad tienen un blog con gran cantidad de posts en el home, tienen un sitio one page  de esos que son tan populares hoy o también puede ser que tengan un diario con toda la información desplegada en una sola página, la solución a sus problemas de medición ya es cosa del pasado. Ahora solo hay que medir el avance del scroll en el sitio web para saber qué porcentaje de la página o landing está viendo el usuario.

¿Y cómo hacemos eso?, con la buena ayuda de Don Google Analytics y su hermano Tag Manager.

A continuación, les presento una guía para crear un evento Scroll Depth en sus sitios webs, pero con la última versión de Tag manager. Me imagino que ya varios saben que hace algún tiempo Google Tag Manager  lanzó su nueva versión, este cambio significa tener que familiarizarse con la nueva interface y migrar aquellas cuentas que teníamos en nuestro antiguo Tag Manager.

Entonces, ¿qué necesitamos para crear este evento?

  • Google Tag Manager V2
  • Google Analytics (Universal Analytics a través de Tag Manager)
  • jQuery 1.7 o superior (necesario para el script Scroll Depth)wp7d03dd5e_05_06

¿Y qué es el Scroll Depth?

Es un script que nos permite medir los movimientos del scroll, o mejor dicho, el avance del scroll en la web cuando un usuario interactúa con el contenido. Cuando el usuario avanza un cierto porcentaje en el sitio, va marcando la longitud (Baseline o 0%, 25%, 75% y 100%). Pero eso no es todo, además mide otros eventos como avances de scroll en pixeles, tiempo de éstos, entre otros datos.

¿Dónde podemos conseguirlo?

Pues directamente en la web del creador, haciendo clic acá.

PASO1: creando una nueva etiqueta para el script Scroll Depth

Lo primero es ir a Tag Manager y crear una nueva etiqueta para el script, debemos seleccionar el producto “Etiqueta HTML personalizada” y pegar el código del script que les dejo más abajo.para agregar nueva etiqueta hoome

nueva etiqueta sin titulopegar codigo scrip

Debemos pegar el código del script, el cual lo pueden encontrar y copiar directamente haciendo clic acá. Pero antes de insertar el código, debemos escribir lo siguiente en el cuadro de HTML:

<script>  

ACÁ VA EL CÓDIGO

 jQuery.scrollDepth();

</script>

 

Y pegan el código donde les indico “ACÁ VA EL CÓDIGO”.

paso 3 activar en todas las paginas

Posterior a eso se debe elegir el activador de esta etiqueta, que puede ser “Todas las páginas” o “Algunas páginas”. Finalmente creamos la etiqueta y procedemos al PASO 2.

 PASO2: creando variables de capa de datos

Lo primero es crear una variable para “eventCategory” vía una capa de dato, por lo tanto vamos a ir al panel principal y le daremos clic a “Crear nueva variable”, una vez ahí elegimos el tipo “Capa de dato” y seguimos los pasos que se muestran en las siguientes imágenes.

2.1 Variable capa de dato

 

agregar variable capa de dato

 

2.2 Configurar variable con nombre eventCategory

variable event category

2.3 Crear variable y guardar con el mismo nombre.

event category creado

Repetimos lo mismo para eventAction y eventLabel, es decir, vamos a crear 2 variables más de “Capa de dato” para éstos. Luego revisamos en una vista previa de la web si están estas variables.

¿Cómo visualizar una vista previa?, es muy simple, solo tienen que darle al botón al costado derecho de “Publicar” y seleccionar “vista previa”, luego van al sitio web y refrescan, les saldrá una ventana en la parte inferior del sitio con información sobre el evento. En ella podremos ver los dataLayer y las variables que hemos creado.

generar vista previa

Entonces en la vista previa veremos lo siguiente.

Si se fijan, en “Data Layer Variable” aparecen eventCategory, eventAction y eventLabel, por lo que todo va de maravilla. Podemos seguir con el PASO3.

vista previa de variables

PASO3: creando la etiqueta del evento 

El último paso corresponde a crear la etiqueta del evento, la cual es de Google Analytics, por lo tanto vamos a seleccionar ese producto, luego la versión e ingresaremos el ID de seguimiento, luego seleccionaremos “Evento” en tipo de seguimiento y buscaremos las variables que creamos para colocarlas en categoría, acción y label, tal como se muestra en la imagen de más abajo.

crear la etiqueta del evento

Luego seleccionamos continuar y creamos un activador para esta etiqueta, un NUEVO activador.crear etiqueta de evento agregar activador

 

Creamos el nuevo activador que tiene que ser de tipo “Evento personalizado” y debe tener el nombre ScrollDistance, con un filtro donde indicaremos que se tiene que activar cuando el evento personalizado contenga ScrollDistance.

crear etiqueta de evento agregar activador 2 crear etiqueta de evento guardar activador

Ya tenemos todo listo, ahora solo queda guardar el activador y publicar. Pero si antes de publicar quieren ver que todo esté correcto, le dan nuevamente a visualizar una vista previa y van a la herramienta de “Google Analytics”, entran a la analítica en tiempo real y ven los eventos que ahí aparecen. Se debe ver el evento que hemos creado para poder medir el avance del scroll en el sitio.

 

evento listo verlo en ga 1evento listo verlo en google analytica

¿Adivinen qué?

Ya hemos terminado,  le damos a publicar y disfrutemos analizando nuestros nuevos  datos.

 

final y publicar

Ahora dispondremos de este interesante evento que nos aportara información valiosa relacionada con el comportamiento de los usuarios en el sitio y cuánto contenido visualizan en él. Este evento es sumamente útil para páginas que son únicas, así como para sitios que tienen una gran longitud, como los one page, diarios, una landing es especifica y blogs con una gran cantidad de información en sus sitios.

Y ahora mucho más fácil con nueva versión de Tag Manager.

scroll-depth-chart

 

¡Hasta la próxima!

Autor:

Digital Analytics Consultant en Metriplica. Ingeniero Comercial de la Universidad Técnica Federico Santa María de Santiago de Chile.

2 Comments

  1. José Miguel

    Hola,

    En primer lugar, felicidades por el post, que es muy útil y clarificador.

    No obstante, me pongo en contacto contigo, Daniela porque no me funciona. Analytics no toma ningún dato. Lo he probado en modo “vista previa”. Por si sirve de ayuda he detectado varias cosas en la información que aparece debajo de mi web que me parecen anormales: 1. Por un lado en el “summary” aparece “ScrollDistance” repetido 3 veces (quizás sólo debería de aparecer una vez). 2. En “Tags” pone que en la página no se ha disparado “UA-ScrollDistance”. Espero que esto ayude. Muchas gracias por adelantado. Un saludo.

  2. Rodolfo

    Buenos dias quisiera saber como puedo hacer el seguimiento por #id,
    tengo una pagina dividida en 4 secciones y me gustaria saber hasta que sección baja el usuario es decir en de ves de 25% 50% seria #seccion1 #seccion2

Leave Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.