Cómo analizar vídeos con Google Analytics, Tag Manager y video.js

Cómo analizar vídeos con Google Analytics, Tag Manager y video.js

Cuando en una página web son un recurso importante, debemos analizar los vídeos a fondo, y no limitarnos a medir las veces que se da al play. La dificultad es que dependiendo de qué tecnología se haya utilizado en la web la forma de configurar Google Analytics para poder medirlos cambia de forma considerable.

Video.js es un reproductor gratuito y de código libre, desarrollado por Brightcove, y con capacidad de reproducir vídeos en HTML5, lo que lo hace una buena alternativa para muchos proyectos. En 2013 LunaMetrics publicó el artículo How to Easily Track video.js in Google Analytics explicando cómo hacer un análisis muy completo de los videos reproducidos con video.js, incluyendo porcentajes de reproducción, búsquedas y errores, y publicaron un archivo javascript que se encarga de lanzar los eventos… en Google Analytics clásico.

Por supuesto hoy en día ya debemos recurrir a Universal Analytics, con lo que ese archivo no serviría, pero además cada vez es más habitual usar Google Tag Manager para gestionar la implementación de eventos, por lo que hemos modificado el archivo de Lunametrics para hacer una versión actualizada y lista para usar con GTM.

Insertar el vídeo en la web

Lo primero que necesitamos es una página web en la que se haya insertado un vídeo con video.js. El código fuente será algo parecido a esto:

En el head

<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>

En el body

<video id="example_video_1" controls preload="auto" width="640" height="264"
   poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
   <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
   <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
   <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
</video>

Identificar el vídeo para el análisis

Para identificar el vídeo y prepararlo para el análisis inicializaremos dos variables javascript justo después de abrir la etiqueta video

<script>
    var myPlayer = videojs("example_video_1");
    var videoTitle = "Fishing in The Ocean";
</script>

myPlayer referencia el reproductor con el vídeo identificado por su ID, que recordemos, en HTML debe ser único para cualquier objeto de la página.

Con videoTitle asignamos el nombre con el que posteriormente identificaremos los vídeos en los análisis.

A continuación se carga el archivo video-gtm.js que hemos modificado para que funcione con Google Tag Manager, en lugar de con Google Analytics.

<script src="video-gtm.js"></script>

¿Qué hemos cambiado?

El archivo video-gtm.js es esencialmente el mismo que el video-ga.js que proporciona Lunametrics, pero cambiando las líneas que lanzan eventos de Google Analytics, por otras que cargan en el dataLayer la información necesaria para que sea Google Tag Manager quien lance los eventos.

Así el evento de carga del archivo pasa de

_gaq.push(['_trackEvent', 'video', 'loaded', videoName, whereYouAt, true]);

a

dataLayer.push({ 'eventCategory' : 'video', 'eventAction' : 'loaded', 'eventLabel' : videoName,
'eventValue' : whereYouAt, 'eventNonInteraction' : 'true', 'event' : 'eventoVideo' });

Es decir, cargamos en el dataLayer un evento llamado eventoVideo, y una serie de variables con las que podremos configurar su categoría (video), acción (loaded), etiqueta (el contenido de la variable videoName, que a su vez es igual al videoTitle que definimos fuera del archivo), valor (el contenido de la variable whereYouAt, que controla la posición de reproducción en segundos), y si existe interacción del usuario o no.

Configurar Google Tag Manager

Una vez hecho esto (primero en una página de pruebas, siempre), tenemos que configurar Tag Manager para que capture el valor de estas variables y lance los eventos. Para ello empezaremos por crear cinco variables definidas por el usuario que se llamarán eventAction, eventCategory, eventLabel, eventValue y eventNonInteraction.

Variables Google Tag Manager

Cada una de ellas es una variable de capa de datos que carga el valor de la variable de su mismo nombre.

Variable eventAction

El siguiente paso es crear un activador de tipo Evento personalizado que active una etiqueta cuando Event contenga “eventoVideo”.

Activador Google Tag Manager

Por último creamos la etiqueta que lanzará el evento de Universal Analytics, por lo tanto el producto es Google Analytics y el tipo de etiqueta Universal Analytics.

Etiqueta Google Tag Manager

En la configuración de la etiqueta pondremos el ID de seguimiento de nuestra cuenta (es muy recomendable que hasta que lo tengas afinado uses el ID de una cuenta de pruebas para que no te modifique los datos de producción) y en Tipo de seguimiento elegiremos Evento

Al hacerlo GTM nos mostrará los campos en los que nos pide los parámetros del evento y que debemos rellenar seleccionando las variables personalizadas que acabamos de crear.

Etiqueta eventos Google Analytics

Para terminar, indicaremos que se debe activar con el activador eventoVideo que acabamos de crear, pinchando en la opción Más.

Etiqueta Google Tag Manager

Y con esto habremos acabado y podremos hacer una previsualización del contenedor y probar si los eventos se están lanzando bien. Para ello, además de la información que da el modo de prueba de GTM, te recomiendo usar el plugin WASP, con el que podrás ver muy cómodamente como va cambiando el contenido del dataLayer según se reproduce el vídeo.

Si no tenemos ningún tipo de acceso al código de la página web, también podremos usar Google Tag Manager para insertar las variables myPlayer y videoTitle en cada etiqueta <video>, para lo cual habrá que recurrir a una etiqueta HTML personalizada adicional con un pequeño script con javascript o jQuery que se encargue se seleccionar cada vídeo e insertar estas variables.

¿Qué eventos se miden?

Con el archivo video-gtm.js se generan eventos en los que la categoría siempre es “video”, la etiqueta es el nombre del vídeo que hemos indicado, el valor contiene el momento de la reproducción en que se produce el evento y la acción toma uno de los siguientes valores:

  • Carga del vídeo: loaded
  • 5% de reproducción: 5%
  • 10% de reproducción: 10%
  • 25% de reproducción: 25%
  • 50% de reproducción: 50%
  • 75% de reproducción: 75%
  • 95% de reproducción: 95%
  • 100% de reproducción: 100%
  • Inicio de movimiento del cursor: seek start
  • Fin de movimiento del cursor: seek end
  • Reproducción: play
  • Reproducción automática: autoplay
  • Reproducción después de mover el cursor: play after seek
  • Pausa: pause
  • Error de reproducción: error

¿Demasiados eventos?

Según el caso particular puede que estos eventos sean demasiados. Por una parte pueden hacer llegar al límite de Google Analytics de 500 hits por sesión y, por otra pueden llegar a solaparse varios eventos en menos de 1 segundo, con lo que no todos serían registrados correctamente. Si esto te preocupa puedes editar el archivo video-gtm.js y comentar alguna de las funciones dataLayer.push poniendo una doble barra (//) delante.

¿Y si hay más de un vídeo en la misma página?

Cuando hay más de un vídeo, la solución que da Lunametrics es hacer un pequeño cambio y cargar dos archivos con dos nombres diferentes.

Para el segundo vídeo deberás tener una copia del fichero llamada video-gtm2.js, en el que hayas cambiado var myPlayer = this; por var myPlayer2 = this; y también var videoName = videoTitle; por var videoName = videoTitle2;

Además, la definición de las variables del segundo video también serán estos nombres y quedarán así:

var myPlayer2 = videojs(“example_video_2”);

var videoTitle2 = “Segundo video en la misma URL”;

 

Funciona correctamente, aunque no es lo ideal en términos de rendimiento. Si tienes un poco de maña con la programación no te será difícil hacer las modificaciones necesarias para que el código se cargue una sola vez, pero asigne funciones y variables diferentes a cada vídeo.

¡Cuidado con la versión de video.js!

Todo lo explicado en este artículo (y en el original de Lunametrics) es válido a partir de la versión 4.X de video.js. Si se está utilizando una versión anterior y no es posible actualizarla no funcionará, pues de la versión 3 a la 4 hubo un cambio en las funciones de la API de video.js. Para solucionarlo basta con hacer dos cambios, tanto en las líneas insertadas en la etiqueta <video> como en el propio archivo video-gtm.js.

En cualquier sitio que aparezca la función videojs() la cambiaremos por _V_().

En cualquier sitio que aparezca myPlayer.on() lo cambiaremos por myPlayer.addEvent().

Con esto ya funcionará en las versiones 3.X, pero no en las 4.X.

En el cliente para el que desarrollamos esta implementación se ejecutaban ambas versiones simultáneamente en diferentes secciones de la web, y sin posibilidad de cambiarlo, por lo que hubo que añadir otro extra de programación para detectarlo y aplicar en cada caso el código correcto sin duplicar todo el script.

¿Y que obtenemos?

Una vez que tengamos la implementación funcionando podremos abrir Google Analytics e ir al menú Comportamiento ⇒ Eventos ⇒ Eventos principales y seleccionamos el evento de categoría video para verlo por separado. Por defecto se mostrarán las acciones, lo que puede ser adecuado si sólo tenemos un vídeo. Si tenemos más y queremos analizarlos por separado bastará con pinchar en Etiqueta del evento y elegir el nombre del vídeo que queremos analizar para ver sus acciones.

En nuestro caso hemos simplificado el número de eventos para controlar cada 25% de reproducción y los errores, por lo que obtenemos algo como esto para un vídeo en particular:

Eventos Google Analytics

Sacando los datos directamente con la API de Google Analytics será fácil construir embudos de reproducción de cada vídeo que permitan comparar su funcionamiento rápidamente, como el siguiente (correspondiente a otro de los vídeos):

Análisis de vídeos

Y trabajando un poco más para segmentar por dispositivo podremos comparar si estos influyen en la velocidad con que los usuarios se aburren y abandonan el vídeo.

Análisis de videos por dispositivo

Si necesitas hacer la implementación de Google Analitycs o configurar nuevos objetivos a medir y no quieres complicarte, déjalo en nuestras manos. Puedes Contactar con La Métrica para que te hagamos una propuesta a medida o consultar nuestros Servicios de implementación de Google Analytics más comunes.

Sobre Oscar G. Peinado

Ingeniero Técnico Industrial. Máster en Analítica Web por KSchool. Posgrado en SEO & SEM por INESDI. Analizando y explicando datos desde 1996. Vinculado al medio online desde 2006. Más de 17 años como analista para revistas como MacWorld y PC World, de la que fue director del laboratorio, y responsable de contenidos, analítica web y SEO de PC World Digital.

Deja un comentario