¿Sabes cómo crear un evento de scroll en tu web? En este artículo te explico paso a paso a crear un evento de scroll en tu web gracias a Google Tag Manager.
Google Analytics es una herramienta imprescindible para la analítica web. Sin embargo, no todos los datos que nos da son exactos. Más concretamente, el tiempo de permanencia. Nunca conseguiremos saber exactamente el tiempo de permanencia de nuestros usuarios dentro de nuestra web, pero sí que podemos tener una idea más cercana a la realidad.
Una de las formas de tener una lectura más realista del tiempo de permanencia de un usuario es crear un evento a lo largo de su navegación tal y como comento en el artículo de cómo saber si los artículos que escribes son relevantes para el usuario.
Vamos a ver cómo podemos crear un evento de scroll en Google Tag Manager.
Pasos para crear un evento de scroll en Google Tag Manager
Lógicamente, antes de crear el evento de scroll, tendrás que instalar Tag Manager en tu web y Google Analytics a través de Tag Manager.
Dicho esto, vamos con los pasos a seguir
1. Creación de la etiqueta
Para crear la etiqueta, tienes que pinchar en “nueva”. Una vez hecho esto, verás que te muestra una ventana como la siguiente:
A continuación, nombraremos a la nueva etiqueta en la parte superior izquierda y pulsaremos en el cuadro superior donde pone “elija un tipo de etiqueta para empezar con la configuración” y seguido, elegiremos “Google Analytics – Universal Analytics”
Una vez que hayas seleccionado Google Analytics, verás que te permite elegir el tipo de seguimiento. Por defecto viene página vista. Sin embargo, en este caso estamos creando un evento. Por lo que tendremos que seleccionar en el tipo de seguimiento, “evento”.
Ahora tendremos que nombrar las distintos campos que nos muestra la pantalla. Con que nombremos los campos “categoría”, “acción” y “etiqueta” nos será suficiente. Personalmente recomiendo nombrarlos de forma que cuando vayamos a leer las estadísticas en Analytics podamos diferenciarlo sin problemas.
Por ejemplo:
Categoría: “desplazamiento”
Acción: “75%”
etiqueta: “scroll”
En este caso he puesto 75% en el campo “acción” porque voy a hacer que cuando un usuario llegue al 75% salte el evento que estamos creando. Por lo que si decides hacerlo cuando tus usuarios lleguen a un 80, te recomiendo nombrarlo con 80%.
Por último, tendremos que seleccionar en “configuración de Google Analytics” la variable que tendremos que tener creada de nuestra cuenta de Analytics. Si no sabes de lo que estoy hablando, puedes echar un vistazo al post sobre cómo instalar Analytics con Tag Manager.
Y listo, ya tenemos todo lo necesario respecto a la configuración del tipo de etiqueta. Ahora nos tocará decirle a Tag Manager cuándo queremos que se active el evento.
2. Creación del activador
Para poder decirle a Tag Manager cuándo queremos que se active la etiqueta que hemos creado, tenemos que pinchar en el cuadro de abajo donde pone “elija un activador para esta etiqueta”.
Si tenemos activadores ya creados, Google Tag Manager nos mostrará los que ya tenemos y tendremos que pinchar en el “+” situado en la esquina superior derecha para crear un nuevo activador.
A continuación ya pincharemos de nuevo en “elija un activador para esta etiqueta” y se nos aparecerá las distintas opciones que existen para activar etiquetas. Entre ellas, existe una que se llama “profundidad de desplazamiento” que será la que tendremos que elegir en este caso.
Una vez seleccionado “profundidad de desplazamiento” podemos ver que nos deja elegir entre profundidades de desplazamiento vertical y profundidades de desplazamiento horizontal. En este caso seleccionaremos profundidades de desplazamiento vertical y pondremos en qué punto queremos que se active la etiqueta indicándolo en porcentaje o en píxeles.
Recomiendo usar la opción porcentaje puesto que no es lo mismo hacer scroll hasta un 600 píxeles en un artículo de 2000 palabras que en uno de 4000. Por lo que será mucho más fiable la lectura que hagamos con esta opción.
Por último, tendremos que indicar en qué parte o partes de la web queremos que se active la etiqueta. Podremos decirle que se active para todas las páginas o para ciertas URL.
Ah, se me olvidaba. No te olvides de darle un nombre a tu activador en la parte superior izquierda de la pantalla. En este caso yo lo he llamado profundidad 75, pero lo puedes llamar como quieras.
Ahora le damos en guardar, y ya está. Ya tenemos nuestra etiqueta creada con un activador. Ya solo nos falta saber si funciona perfectamente.
3. Hacer una vista previa
Para poder saber si la etiqueta que hemos creado funciona perfectamente, tenemos que hacer una vista previa. Para esto, tenemos que pinchar en el botón “vista previa” de la página principal de nuestra cuenta de Tag Manager y nos saldrá el siguiente mensaje:
Ahora abrimos una pestaña del navegador y entramos en la web en la que estamos trabajando.
Verás que en la parte de abajo aparece una ventana en la que se muestran las etiquetas que se han activado y las que no. Lógicamente, la etiqueta que acabamos de crear no está activada nada más que abrimos la página porque tenemos que hacer un scroll hasta el 75% de la página. Por lo que bajamos hasta el 75% de la página y comprobamos si se activa o no.
En la imagen vemos que se ha activado perfectamente. Si ves que no se activa, revisa bien todos los pasos porque algo hay mal.
Una vez comprobado que todo funciona correctamente, salimos de la vista previa de Tag Manager y enviamos los cambios.
4. Enviamos los cambios
Para enviar los cambios, basta con pinchar en el botón enviar y a continuación a publicar.
Como puedes ver es muy fácil crear un evento de scroll con Google Tag Manager y nos puede ayudar a conocer mejor como actúan los usuarios dentro de nuestro sitio web. Además, todos sabemos de la importancia de analizar correctamente. Por lo que cuanto más cercanos a la realidad sean los datos de los que disponemos, haremos una mejor lectura de ellos.
Si no eres capaz de crear el evento de scroll no dudes en contactar conmigo ya sea a través de los comentarios o a través de email.
