9 May 2014
Lectura: 6 mins.
|
Dificultad:

Eventos scroll con Google Analytics y Tag Manager

Cada vez son más habituales los sitios web One Page, con efecto Parallax o, en general, sitios de página única, en los que se navega dentro de una única página con ayuda de enlaces internos, botones, javascript y mediante el scroll del navegador.

Este tipo de sitios presentan dificultad para la analítica web, ya que cada visita supone una única página vista, sin más datos de navegación posteriores. Por ello, necesitamos crear eventos para comprobar cómo interactuan los usuarios con el sitio.

Por ejemplo, nos podría interesar medir el acceso a secciones o elementos concretos de la pagina, o incluso tratar cada sección como si de una página separada se tratara.

Una solución habitual es medir los clicks en menús u otros elementos de navegación; pero se pierden los datos de acceso a estos elementos por otros medios (haciendo scroll o introduciendo el #hash en la barra de direcciones, por ejemplo).

Una solución alternativa, más completa y que también nos puede servir para generar otras estadísticas útiles, es implementar la medición del scroll realizado o cantidad de página actual que se ha avanzado mediante eventos. Y esa es la que vamos a explicar aquí mediante el uso de Google Analytics y Tag Manager.

Scroll DepthPara ello, nos ayudaremos del script Scroll Depth, un plugin para Google Analytics que mide los movimientos de scroll y genera eventos trazables cuando el usuario alcanza determinados porcentajes de la longitud completa de la página actual (Baseline o 0%, 25%, 50%, 75% y 100%), y que -además de otros eventos como avances de scroll en píxeles absolutos o medición de tiempos de los mismos- también permite generar eventos al alcanzar determinados elementos de la página que podemos especificar libremente, lo cual nos resultará especialmente útil en este caso.

La implementación en Google Tag Manager es relativamente sencilla, ya que las últimas versiones del script son compatibles de forma directa y los datos generados por los eventos son facilmente accesibles mediante la capa de datos o DataLayer.

Requisitos

Necesitaremos ya integrados y funcionando en el sitio web:

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

Es probable que nuestra web ya utilice jQuery, pero en caso negativo podemos incluirlo, por ejemplo, añadiendo esto dentro de <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Paso 1: Etiqueta para el “Procesador de eventos de scroll”

Primero necesitaremos añadir el procesador de eventos de scroll. Para ello utilizaremos el plugin Scroll Depth, el cual incluiremos directamente desde Tag Manager como etiqueta de HTML personalizado:

  • Descargar el contenido del siguiente script ya preparado para utilizar directamente
    Alternativamente puedes crear el tuyo propio (la última versión oficial está siempre disponible en github).
  • Crear una etiqueta nueva de tipo Etiqueta HTML personalizada, y pegar en el campo HTML el contenido completo del archivo, etiqueta <script> incluida:

Etiqueta Tag Manager detección scroll

Prestaremos especial atención a la parte final del código, que es desde la que se configura y ejecuta:

jQuery.scrollDepth({
  elements: ['#menu-slider', '#menu-information', '#menu-countdown', '#menu-price', '#menu-contract', '#menu-social', '#menu-links', 'footer'],
  percentage: true,
  userTiming: false,
  pixelDepth: false
});

E introduciremos nuestras propias opciones:

  • En elements, la lista de los elementos de la página que queremos observar, entre comillas y separados por comas.
    Es importante destacar que aunque es válido cualquier selector jQuery, cada elemento de la lista debe ser único (el evento sólo se lanza al aparecer el primero que cumpla la condición, los demás los ignora), con lo que sólo tiene sentido añadirlos por su ID (ejemplo: [‘#seccion1’, ‘#seccion2’]) o etiqueta única en la página (ejemplo: [‘header’, ‘footer’]).
  • percentage puede ser true o false según queramos o no que genere también eventos de % de página recorrido (25%, 50%, 75% y 100%).
  • userTiming y pixelDepth se corresponden con los otros tipos de evento disponibles, útiles para medición de tiempos y de distancias recorridas en píxeles absolutos, respectivamente. Si no los vamos a usar los dejamos en false para no generar eventos adicionales innecesarios.

Finalmente, en Reglas de activación añadimos una regla {{event}} igual a gtm.dom, para que se active cada vez que el DOM esté listo, y guardamos.

Evento DOM ready

Paso 2: Etiqueta de Google Analytics para evento de scroll

Ya tenemos instalado el script que generará eventos con cada operación de scroll de página. Ahora necesitaremos una etiqueta de Google Analytics que haga seguimiento de estos eventos y de sus datos asociados.

Crearemos una nueva etiqueta de Universal Analytics, con nuestro ID y tipo de seguimiento Evento:

Etiqueta Google Analytics para eventos de scroll de página

Como parámetros de seguimiento de eventos a capturar, vamos a coger los que el script ya genera y almacena en la capa de datos. Para ello, para cada dato damos al botón [+] adyacente y elegimos Nueva Macro…

Macro Event Category

Y una vez creado lo especificamos como dato a utilizar, en este caso pondríamos {{eventCategory}}.

Repetimos la operación con eventAction, eventLabel y eventValue, creando para cada uno su macro correspondiente.

Realmente las variables que nos interesan son eventAction (que será igual al tipo de evento: percentage o element) y sobre todo eventLabel (ya que es donde se especifica el % o elemento concreto alcanzados), pero en este ejemplo añadiremos todos para mantener la estructura completa.
Por último, es muy importante que el valor Visita sin interacción esté puesto a true. Esto es así porque Scroll Depth genera siempre un evento “percentage/Baseline” correspondiente al inicio de la página (incluso aunque los eventos de porcentaje estén desactivados!). Si esta opción no está activada, en todas las cargas de página se cargará este evento, el cual contará como interacción con la misma y por tanto generará datos falsos para el cálculo de tasa de rebote.

Finalmente, como regla de activación la asociamos con el evento ScrollDistance:

Regla Scroll Distance

Hecho esto, ya podemos guardar los cambios realizados, Crear una versión y Publicar.
A partir de ahí, ya podremos ver en la sección Eventos de Google Analytics, la categoría de Eventos “Scroll Depth” con sus datos correspondientes 😉