4 Oct 2017
Lectura: 11 mins.
|
Dificultad:

Seguimiento de vídeos YouTube nativo en Google Tag Manager

En un artículo anterior ya tratamos a fondo un tema recurrente como es el del tracking de vídeos Youtube incrustados, a través de Google Tag Manager y de la única forma que podíamos hasta entonces: mediante scripts personalizados que conecten manualmente con la API Javascript de Youtube y actuen como procesadores de eventos que envíen a GTM las notificaciones y datos adecuados.

gtm.video killed the custom script
gtm.video killed the… custom… script?

Este método, si bien sigue funcionando (no tienes de momento por qué cambiarlo si ya tienes un setup similar activo), queda ahora obsoleto para la mayoría de casos, ya que por fin Google Tag Manager ha añadido integración nativa con Youtube, con sus propios eventos automáticos, activadores y variables integradas.

Veremos a fondo en qué consiste, cómo funciona, qué datos nos proporciona y un par de casos prácticos.

1. El Activador

Como con cualquier otro seguimiento automático como clics o cargas de página, para que su procesador interno se active y se empiecen a detectar en GTM los eventos correspondientes, bastará con crear un activador o trigger del tipo adecuado. En este caso, aparecerá bajo Otros > Vídeo de YouTube :

Nuevo tipo de trigger: Video youtube

Una vez seleccionado, aparecerán las opciones para configurarlo, principalmente, los tipos de interacciones que queremos medir:

Trigger Youtube Video

Las opciones disponibles son:

  • Iniciar: generar evento GTM al inicio de la reproducción (Edit: rectifico, no salta al reanudar tras pausa)
  • Finalizado: generar evento GTM al finalizar el vídeo (reproducción completa)
  • Pausado, almacenado en búfer o buscado: generar evento GTM en otras interrupciones de la reproducción, sean manuales (pausa, avance/retroceso) o por espera a carga de contenido (buffering)
  • Progreso: generar evento GTM cuando la barra de progreso de reproducción pasa de determinados puntos, expresados bien como Porcentaje (X% reproducido) o como Límite de tiempo (X segundos reproducidos), que le especifiquemos separados por comas.
  • Añadir compatibilidad con la API de JavaScript: como ya ocurría con el seguimiento mediante procesador de eventos personalizado, para poder interactuar con el vídeo necesitamos que este haya cargado con la API de Youtube activada añadiendo a su URL el parámetro &enablejsapi=1. Esta opción añade este parámetro retroactivamente si fuera necesario. Por tanto —y a pesar de que puede generar un efecto de parpadeo en la página al recargar los vídeos—, recomendado activarla salvo que nos aseguremos manualmente de que todos los vídeos a medir ya lo tengan.
  • Este activador se activa en…: como con el resto de activadores, podremos elegir si el trigger salta en todos los casos (Todos los vídeos) o sólo en algunos determinados (Algunos vídeos), para lo cual especificaremos las condiciones adicionales Variable – Valor necesarias. Así, por ejemplo, podemos restringir el seguimiento únicamente a determinadas páginas (condiciones Page URL, Page Path…), o crear un activador a medida para una etiqueta aplicable a un único vídeo o caso concreto.

Ojo! Los eventos de tipo Progreso no implican que el video se haya reproducido en su totalidad hasta el punto indicado, únicamente que el punto de reproducción actual (barra de progreso) lo ha alcanzado o superado.Si el usuario salta manualmente a algún punto del vídeo, cualquier evento progress correspondiente a un punto anterior se lanzará inmediatamente. En cualquier caso, no se lanzarán más de una vez, aunque el usuario retroceda y avance de nuevo.

2. Las Variables

Una vez creado el activador, podremos activar el modo Vista Previa y testearlo antes siquiera de crear ninguna etiqueta que lo use.

Si todo ha ido bien, en la consola de depuración aparecerá un evento gtm.video por cada una de las interacciones configuradas, acompañados por datos adicionales asociados sobre el vídeo y el evento que nos ayudarán tanto a identificarlo como a proporcionar información a etiquetas y scripts. La DataLayer generada tendrá un aspecto como este:

Datalayer evento gtm.video

Como con cualquier otro dato enviado a la capa de datos, podremos acceder a ellos mediante variables personalizadas de DataLayer… pero no necesitamos crearlas. Ya se han añadido a GTM variables predefinidas para ello, bastará con entrar previamente en Configurar Variables Integradas y activar las que necesitemos:

Variables integradas: Video

Una vez activadas, veremos que se rellenan automáticamente con los valores correspondientes.

Variables Video

Las variables GTM asociadas, junto con sus correspondientes variables predefinidas y nombres internos en dataLayer, son los siguientes:

  • Event (event): gtm.video
  • Video Provider (gtm.videoProvider): la plataforma que proporciona el vídeo; de momento únicamente youtube, pero ahí queda para futuro uso… 😉
  • Video Status (gtm.videoStatus): el estado actual del vídeo, lo que identifica la acción concreta que ha hecho saltar el evento. Valores posibles: start, complete, pause, buffering, progress
  • Video URL (gtm.videoUrl): el URL canónico completo de la página del vídeo incrustado, ej. https://www.youtube.com/watch?v=XXXXXX
  • Video Title (gtm.videoTitle): el título o nombre del vídeo.
  • Video Duration (gtm.videoDuration): la duración del vídeo en segundos.
  • Video Current Time (gtm.videoCurrentTime): la posición (en segundos) del reproductor en el momento del evento. Útil para combinar con gtm.videoStatus = 'progress'.
  • Video Percent (gtm.videoPercent): la posición (en porcentaje sobre el tiempo total) del reproductor en el momento del evento. Útil para combinar con gtm.videoStatus = 'progress'.
  • Video Visible (gtm.videoVisible): ¡Este es interesante! Devuelve true o false según detecte que el vídeo esté o no visible en la ventana del navegador en el momento del evento.

Además, hay un dato adicional que no tiene variable integrada ya asociada: gtm.videoElapsedTime, que indica el tiempo transcurrido (en segundos) desde la última interrupción (pause o buffering). Si nos interesa usarlo, tendremos que crear la variable de capa de datos correspondiente {{Video Elapsed Time}} manualmente:

Our time is ruuunning out, can't push it uuunderground

3. Caso de uso: integración con Google Analytics

Ahora que sabemos como funciona el trigger y sus variables asociadas, podremos utilizarlas en cualquier etiqueta de GTM. El caso más habitual será para hacer seguimiento en Google Analytics de los vídeos incrustados.

Veamos un ejemplo para medir en Analytics las interacciones más habituales (reproducción, pausa, reproducción completada en intervalos de 25%, y completado) en todos los vídeos YouTube de nuestro sitio web con Google Tag Manager. Usaremos, por ejemplo, el siguiente formato:

  • Tipo de seguimiento: Evento
  • Categoría de Evento: Video
  • Acción de Evento: Play, Pause, Played X%, Complete
  • Etiqueta de Evento: El URL del video

Paso por paso:

1) Activador

Creamos el activador general de tipo Video de Youtube, seleccionando todas las acciones posibles, y marcando Porcentaje: 25,50,75 (para 100% será suficiente con complete) en Progreso.

Alguien debe tirar del trigger

2) Variables auxiliares

Si queremos hacer el nombre de la Acción de evento más legible antes de enviarlo a Analytics, filtrarlo, o adaptarlo a un formato concreto (por ejemplo, uno que ya estuvieramos utilizando anteriormente con un seguimiento manual…), tenemos dos opciones: Crear etiquetas y triggers separados para cada tipo de acción… o procesar previamente el nombre de la acción (a partir de {{Video Status}}) a través de una variable auxiliar intermedia, que será mucho menos engorroso.

Por ejemplo, en este caso crearemos {{Video Action}} con una simple tabla de consulta:

Variable custom: Video Action

Como podemos ver en el ejemplo de uso de {{Video Percent}}, este paso intermedio de preproceso nos permite ser creativos, combinar datos o reorganizar acciones; por ejemplo, podríamos haber renombrado complete como Played 100%.

3) Etiqueta

Creamos la etiqueta correspondiente de Universal Analytics:

Etiqueta GA Youtube

Por supuesto, rellenaremos el resto de la configuración de la etiqueta con los valores comunes a nuestro setup de tracking. En este caso, he presupuesto que ya lo tenemos todo recopilado en una variable {{GA Config}} de tipo Configuración de Google Analytics (y si no es el caso… deberías 😉 más información aquí sobre las variables Google Analytics Settings).

Ojo! Debemos tener especial cuidado con el campo Hit sin interacción.Normalmente, nos interesaría dejarlo por defecto en Falso ya que la mayoría de acciones representan interacciones del usuario… pero eso no siempre es así.

Particularmente, si tenemos vídeos con reproducción automática en nuestro sitio web, estos generarán eventos automáticamente (play, progress…) nada mas cargar la página y esto invalidará el cálculo de la tasa de rebote. Al menos en ese caso, mejor dejarlo en Verdadero (con el problema que puede implicar para páginas tipo landing donde apenas habrá más interacciones que las del vídeo) o mejor aún, no tener nada con autoplay que es un incordio, leñe

Finalmente, añadimos a la etiqueta el activador genérico ya creado.

...y su activador

Nótese que esta implementación incluye no solo las acciones de interrupción manuales (Pause) sino también las causadas involuntariamente por esperas (como acción separada: Buffering). Si por algún motivo no quisiéramos registrarlas, en el activador no podemos configurarlas por separado del resto de pausas, pero sí podemos modificarlo con condiciones adicionales para que las descarte:

NOBODY likes buffering :(

4. Caso de uso: Seguimiento de conversiones

Otro ejemplo habitual de seguimiento ligeramente más avanzado. Tenemos una campaña en la que dirigimos al usuario a una página con un vídeo, y nuestro objetivo es que lo vea. ¿Cómo medimos estos eventos de conversión para calcular el impacto de la campaña?

Supondremos por ejemplo que consideramos el vídeo “visto” si el usuario lo reproduce al menos hasta el 75% en una ventana activa. En ese caso, podemos crear un activador a medida:

  • Seleccionamos únicamente los eventos Progreso/Porcentaje/75 y, por si acaso, Finalizado (ojo aquí si la plataforma a la que enviar la conversión no detecta correctamente hits duplicados…).
  • Identificamos el vídeo concreto por el ID en su URL. También habría otras alternativas como filtrar por página, etc.
  • Ya que estamos, aprovechamos la funcionalidad de detectar visibilidad y la añadimos como condición también, descartando casos en que aunque siga la reproducción se haya navegado fuera de la zona de visualización.

Quedaría así:

Ejemplo trigger video avanzado

Una vez creado, bastará con añadirlo como activador a la etiqueta o etiquetas de conversión correspondientes: AdWords, DoubleClick, Twitter, Facebook, hit de Analytics para objetivo o embudo… lo que corresponda a cada plataforma a la queremos notificar la conversión. No vamos a poner ejemplos que hay muchos .

Impresiones y Conclusiones

Nuestras primeras pruebas con el seguimiento automático son bastante satisfactorias: destaca, sobre todo, que funciona con vídeos dinámicos o lazy-loaded (es decir, que no estuvieran ya presentes en el código fuente inicial de la página, sino que cargan después), algo que con procesadores personalizados siempre había supuesto un problema adicional.

En el lado negativo, hemos detectado algún caso en que no funciona el seguimiento, bien en ocasiones o en absoluto: sospechamos que pueda fallar en casos con código de incrustado no estándar, o que la opción de añadir enablejsapi no funcione de forma consistente, especialmente en vídeos que carguen “tarde”. Esperamos seguir investigándolo y que si hay bugs, estos se vayan refinando.

También falta el seguimiento de errores, así que en los casos en que esto sea información importante igual es mejor seguir usando procesadores propios.

Volviendo a lo positivo, llama la atención por grata sorpresa la detección de visibilidad integrada. Entre esto y el hecho de que ya estuviera incluida de forma nativa en AMP, nos vamos acercando poco a poco hacia una solución unificada a otro de los problemas clásicos de analítica avanzada.

Igualmente, la inclusión del campo provider nos hace pensar que hay espacio para la integración de nuevas plataformas de video en el futuro… o por lo menos, de momento ya nos proporciona una estructura de datos común en la que hacerlo nosotros 🙂

Referencias