Guía de seguimiento de vídeo del Google Tag Manager: Más allá de Youtube

Actualizado: 4 de junio de 2023.

Para entender lo que los visitantes de la página web están haciendo en su sitio, el seguimiento de las visitas a la página está lejos de ser suficiente. También debe considerar otras interacciones, como clics, vistas de elementos particulares, interacciones de video, etc.

Cuando se trata de videos, los reproductores de video incrustados más populares son los de Youtube (no tengo estadísticas que apoyen esto; sólo lo digo basado en lo que he visto en otros sitios web). Pero, ¿qué pasa si su sitio web utiliza un reproductor diferente (como Vimeo o tal vez un reproductor genérico de HTML5)?

Eso no es un problema, porque puedes rastrearlos con GTM.

En la entrada del blog de hoy, te mostraré cómo rastrear videos con el Google Tag Manager. Cubriré el rastreo de videos de Youtube, el rastreo de videos de Vimeo, y también mencionaré varios otros reproductores.

Nota: esta entrada de blog enseña cómo rastrear eventos con Universal Analytics.

Tabla de contenidos

Entonces, ¿cuál es el plan?

Primero, veremos el ejemplo más común de rastreo de video en Google Tag Manager: El disparador de video de Youtube. Luego, les mostraré un ejemplo con un reproductor de video que no es compatible con GTM por defecto. Ese es Vimeo.

Y finalmente, también les daré algunas soluciones listas (recetas) diseñadas para varios reproductores de video incrustados.

¿Listo? Vamos.

Capítulo 1. Cómo rastrear videos de Youtube con el Google Tag Manager

Estos son los pasos que necesitas completar para rastrear los videos de Youtube con el Google Tag Manager.

Paso 1. Crear un disparador de vídeo de Youtube

Todo comienza con un gatillo. En el Google Tag Manager, ve a Triggers > New > Trigger Configuration y elige Youtube Video. A continuación, introduzca la siguiente configuración:

Puedes cambiar el umbral de porcentaje a lo que quieras, sólo tienes que separarlos con una coma. Además, puedes habilitar el seguimiento de Pausa , Búsqueda y Almacenamiento en memoria intermedia. Personalmente, prefiero el seguimiento de Inicio, Completo y Progreso (por ejemplo, el 25% del video fue visto).

Además, aunque la opción Añadir compatibilidad con la API de JavaScript a todos los vídeos de Youtube es una configuración avanzada, la habilito de forma predeterminada porque aumenta el cambio de que el seguimiento de los vídeos de Youtube funcione.

Paso 2. Habilitar las variables de vídeo de Youtube incorporadas

En el Administrador de etiquetas de Google, ve a Variables > Configurar y habilita todas las variables relacionadas con el vídeo.

Paso 3. Crear una variable de la tabla de búsqueda

Esto es lo que queremos lograr:

• Si un visitante comienza o completa un video, queremos enviar la palabra «comenzar» o «completar» a Google Analytics
• Pero si el visitante ha visto una cierta cantidad de un video (por ejemplo, 25%) queremos enviar no sólo la palabra «progreso». También enviaremos el porcentaje de un video visto, por ejemplo, 25% de progreso

Para ello, crearemos una tabla de variables de búsqueda en GTM que devolverá una salida particular basada en la interacción de vídeo de Youtube.

En el GTM, vaya a Variables > Nuevo > Tabla de búsqueda e introduzca los siguientes ajustes:

• En el campo Variable de entrada introduce la variable {{Estado del vídeo}}
• Luego en el campo de Entrada introduzca «progreso» (sin comillas, todo en minúsculas) y luego en el campo de Salida introduzca {{Estado del video}} {{{i1}{b1}Porcentaje de vídeo}{b1}
• Finalmente, habilite la casilla de verificación «Establecer valor por defecto» e inserte la variable {{Estado del vídeo}} una vez más.

¿Qué hemos hecho aquí?

Si el estado del reproductor de vídeo es «progreso», significa que un cierto porcentaje de un vídeo fue visto por un visitante y este evento se hizo disponible en el modo de previsualización y depuración.

En este caso, queremos que esta variable de búsqueda devuelva el estado del reproductor de vídeo(progreso) y también el porcentaje de vídeo que fue visto junto con un signo %.

Pero si el estado del video no es «progreso», entonces esta variable de búsqueda sólo devolverá el nombre del estado (por ejemplo, inicio, completo, etc.). Por eso he configurado la casilla de verificación «Set Default Value».

Paso 4. Crear una etiqueta de Google Analytics

Ahora es el momento de enviar los datos del video de Youtube a Google Analytics. En GTM, vaya a Tags > New > Universal Analytics e introduzca la siguiente configuración.

Puedes elegir algunos otros nombres/valores en los campos de Categoría de Eventos/Acción/Etiqueta si quieres (pero te recomiendo encarecidamente que sigas esta convención de nombres).

Además, no pierdas de vista el campo Acción del evento. Hemos introducido la variable Tabla de Búsqueda aquí.

Además, asigna el disparador de eventos personalizados (para el evento de vídeo ) a esa etiqueta.

Paso 5. Pruebe la configuración

Una vez que hayas completado todos los pasos previos, es hora de hacer la prueba. Habilita/actualiza el modo de previsualización y depuración, actualiza la página de tu sitio web con el reproductor de vídeo de Youtube incorporado e intenta interactuar con él.

En primer lugar, deberías empezar a ver los eventos de Youtube Video en el modo de previsualización. Si no los ves, lee esta guía de solución de problemas.

Haz clic en uno de ellos y comprueba si tu etiqueta de Google Analytics se ha disparado.

Si es así, ve a Informes en tiempo real de Google Analytics > Eventos y comprueba si tú también los ves.

Después de un tiempo, los datos de tus eventos aparecerán también en los informes estándar de Google Analytics. Pero eso puede tardar hasta 24 horas.

Capítulo 2. Cómo realizar el seguimiento del reproductor de vídeo de Vimeo con el Administrador de etiquetas de Google (solución personalizada)

¿Qué pasa si tu sitio web no contiene vídeos incrustados en Youtube? ¿Qué pasa si estás usando algo más? En ese caso, el seguimiento de vídeos de Youtube integrado en el Google Tag Manager no funcionará. Necesitas encontrar alguna solución personalizada.

Todo comienza con la identificación del reproductor de vídeo

Antes de empezar con el seguimiento real de las interacciones del reproductor de vídeo, primero tienes que identificar qué tipo de reproductor de vídeo es ese. Los jugadores de video muestran claramente su logo en la caja del jugador (por ejemplo, Vimeo), otros probablemente no serán tan obvios.

Si tu caso es el último, haz esto. En tu navegador, abre las herramientas de desarrollo (en Chrome, eso es F12 (en Windows)) y luego ve a la pestaña Elementos. Luego haz clic en este botón…

… y luego haga clic en el propio reproductor. Ahora trata de buscar un poco y encontrar algunas pistas que mencionen el nombre del proveedor del reproductor. Por ejemplo, en este caso, el reproductor que estoy inspeccionando es el reproductor JW.

Si no puede encontrar el nombre, lo más probable es que sea un reproductor de vídeo HTML5.

Una vez que identifiques el nombre del reproductor de vídeo, sólo tienes que hacer un seguimiento en Google [ nombre del reproductor de vídeo ] con Google Tag Manager y encontrarás alguna guía o tutorial.

Imaginemos, que en nuestro caso, vemos el logo «Vimeo» en la esquina del reproductor de video incrustado.

Paso 1. Crear una variable «¿Está el reproductor de Vimeo presente en una página?»

Para poder rastrear los reproductores de Vimeo con GTM en una página, tendremos que añadir un largo código al contenedor. Cargar ese código en cada página no es óptimo y afectará a la velocidad de carga de la página, por eso necesitamos activar ese código SÓLO cuando el reproductor de Vimeo esté realmente incrustado en ese sitio.

Para hacer eso, primero, necesitamos crear una variable JavaScript personalizada y pegar el siguiente código:

function () { for (var e = document.getElementsByTagName("iframe"), x=0; x

Si el reproductor de Vimeo está incrustado en la página, esta variable devolverá true.

Entonces crea un disparador de vista de página y usa esa variable de JavaScript personalizada en él. Si el reproductor de Vimeo está presente, este disparador se activará. Si no hay un reproductor de Vimeo, ese disparador permanecerá en silencio.

Paso 2. Escuchador de auto-evento de Vimeo

Ahora, es el turno de Vimeo Listener. Un oyente es una función (o un montón de funciones) que se construyen para seguir buscando ciertas interacciones en una página. En este caso, el oyente buscará las interacciones del jugador de Vimeo. Si encuentra una, hará que esos datos sean visibles en el modo de vista previa y depuración.

Crea una etiqueta HTML personalizada y pega el siguiente código. Los autores originales de este código son Bill Tripple y Bogdan Bistriceanu de Cardinal Path).

Este oyente fue recientemente actualizado ligeramente para soportar algunos cambios en Vimeo.

>>script>var dataLayer = (typeof(dataLayer) !== "undefined" && dataLayer instanceof Array) ? dataLayer : [];var videoLabels=[];var lastP=[];// Declaramos variables que contendrán información sobre el vídeo que se está reproduciendo
var _playerTitle = {}, _playerAuthor = {}, _playerAuthorURL = {}, _playerUploadDate = {}; try{ init();}catch(err){ dataLayer.push({ 'event': 'gtm.error', 'errorMessage': e.message, 'tag': 'CP - UA - Vimeo Video Listener' })}function init(){ try{ var player=document.getElementsByTagName("iframe"); for (i = 0; i  lastP[data.player_id]) { lastP[data.player_id]=t; if (parseFloat(t) != 0){ dataLayer.push({ event: "video", eventoCategoría: "vimeo", eventoAcción: "vimeo video " +t*100+ "% Completo", eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id), vimeo_playerID: getLabel(data.player_id), vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(), vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(), vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(), vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)], nonInteractive: true }) } } } } catch(err){ }}

No te olvides de asignar el Disparador de Vista de Página previamente creado:

¡Punto de control! Veamos lo que hemos creado hasta ahora:

• Un Pageview Trigger que comprueba si el reproductor de vídeo Vimeo está incrustado en la página web (gracias a una variable JavaScript personalizada).
• Un Vimeo Auto-Event Listener (como una etiqueta HTML personalizada) se dispara sólo cuando se activa el mencionado Disparador de Vista de Página. Cada vez que se produce una interacción con el reproductor de Vimeo, el oyente enviará un evento de Capa de datos con los siguientes datos:
  • Nombre del evento: video (este valor nunca cambia)
  • eventoCategoría: Vimeo (este valor nunca cambia)
  • eventAction. Valores posibles: Vídeo reproducido, vídeo en pausa , 10%, 25%, 50%, 75%, 90% o 100%.
  • eventLabel: [Título del vídeo] (este valor cambia dinámicamente y depende de un vídeo).

Si quieres probar esto ahora, activa el modo de vista previa y depuración, actualiza la página con el reproductor de Vimeo e intenta interactuar con él. Deberías empezar a ver los eventos de vídeo en el lado izquierdo del modo de vista previa.

Paso 3. Crear variables de la capa de datos y un disparador de eventos personalizados

Google Tag Manager no reconoce los eventos de la capa de datos u otros datos. Por lo tanto, si desea transferir alguna información a otras herramientas (por ejemplo, Google Analytics), necesita «enseñar» al GTM a buscar cierta información (con la ayuda de las Variables de la Capa de Datos).

Después de que las variables se configuran, es hora de crear un Disparador de Eventos Personalizado. Vimeo Auto-Event Listener envía todas las interacciones como eventos de la Capa de Datos bajo el nombre de «video».

 dataLayer.push({evento: "video", eventoCategoría: "vimeo", eventAction: "vimeo play", eventLabel: video_title });

Así que lo siguiente que debes hacer es crear un Disparador de Eventos Personalizado que escuche TODOS los eventos de vídeo. Más tarde, se asignará a la etiqueta de Google Analytics.

En GTM, ve a Triggers > Nuevo > Evento personalizado e introduce los siguientes ajustes:

Paso 4. Crear una etiqueta de Google Analytics

Por último, pero no menos importante, Google Analytics. Ahora tienes que enviar un evento y pasar los datos correspondientes con él. Crear una nueva etiqueta, seleccionar Universal Analytics como Tipo de Etiqueta, elegir Evento como Tipo de Pista, e introducir las tres variables de la Capa de Datos.

Esto significa que cada vez que se crea un evento de vídeo, un evento de Google Analytics será enviado a los servidores de Google y las tres variables serán reemplazadas dinámicamente con los datos reales.

Si eventLabel es igual a Video Title Lorem Ipsum, este valor exacto se pasará a Google Analytics.

Sólo asegúrate de introducir la variable de configuración de GA en su menú desplegable especial (ver la captura de pantalla a continuación).

Paso 5. Prueba de prueba

No olvides probar toda esta configuración. Habilita el modo de vista previa y depuración del GTM, ve a una página con un reproductor de Vimeo incorporado y haz clic en Play. Lo siguiente que debe ver es un evento de vídeo en el flujo de eventos del modo de vista previa y depuración. Haga clic en él y vea si la etiqueta de Universal Analytics se ha disparado.

Además, no olvides consultar los informes en tiempo real de Google Analytics. Los eventos de vídeo aparecerán en los informes de Tiempo real > Eventos. Dentro de 24 horas (pero normalmente mucho antes), esos datos de eventos también aparecerán en los informes estándar: Comportamiento > Eventos > Eventos principales.

El proceso completo en pocas palabras

• Hemos creado una variable JS personalizada que devuelve true si el reproductor de Vimeo está incrustado en una página.
• Luego creamos un Pageview Trigger que comprueba si el reproductor de vídeo Vimeo está incrustado en la página web (gracias a una variable JavaScript personalizada)
• Luego creamos una etiqueta HTML personalizada (un Vimeo Auto-Event Listener). Y se disparará en todas las páginas donde el reproductor de Vimeo esté incrustado. Importante : aunque todavía no haya interactuado con el reproductor, esa etiqueta se disparará.
• Cada vez que se produce una interacción con el reproductor de Vimeo, el oyente enviará un evento de Capa de Datos con los siguientes datos:
  • Nombre del evento: video (este valor nunca cambia)
  • eventoCategoría: Vimeo (este valor nunca cambia)
  • eventAction. Valores posibles: Vídeo reproducido, vídeo en pausa , 10%, 25%, 50%, 75%, 90% o 100%.
  • eventLabel: [Título del vídeo] (este valor cambia dinámicamente y depende de un vídeo).
• Ha creado 3 variables de capa de datos y un disparador de eventos personalizado (para el evento de vídeo).
• Por último, has creado una etiqueta de Google Analytics que se dispara en el evento de vídeo y enviará los valores de esas 3 variables de capa de datos a Google Analytics.

Capítulo 3. Seis recetas de seguimiento de vídeo del Google Tag Manager. Todas unificadas.

Lo creas o no, pero el flujo que he descrito en la sección de seguimiento de reproductores de Vimeo se aplica a un montón de otros reproductores de vídeo que no son de Youtube:

Dado que la mayoría de las recetas de GTM son creadas por distintos autores, su convención de nombres también es diversa. Es por eso que he pasado algún tiempo y las he unificado (e incluido la 6ª receta – Seguimiento en Youtube con la funcionalidad GTM incorporada).

¿Qué significa esto? Bueno, si utilizas varios tipos de reproductores de vídeo en tu sitio web, los oyentes de los eventos automáticos de vídeo dispararán eventos siguiendo el mismo patrón de nomenclatura. En otras palabras, los datos en sus informes de eventos de Google Analytics serán consistentes. Por ejemplo, los oyentes de auto-eventos de Vimeo dispararán este evento de Capa de datos:

dataLayer.push({ evento: "video", eventoCategoría: "vimeo", eventoAcción: "reproducir video vimeo", eventoLabel: "título del video - id del video" });

Mientras que el reproductor de vídeo HTML5 enviaría esto de forma diferente.

dataLayer.push({ evento: "vídeo", eventoCategoría: "video", eventoAcción: "reproducir", eventLabel: video_url });

Como resultado, los informes de los eventos serían caóticos.

De todos modos, aquí tienes los datos que recibirás de cada oyente de auto-eventos de vídeo:

P.D. Algunos oyentes de reproductores de vídeo también envían eventos de vídeo reanudado y de error de vídeo.

P.P.S. El oyente del reproductor de JS enviará la URL del archivo de vídeo en lugar del título si ese vídeo no tiene título.

No dudes en descargar cualquiera de estas recetas del Google Tag Manager y comienza a realizar el seguimiento de los reproductores de vídeo en un abrir y cerrar de ojos. ¿No te dije que Google Tag Manager Video Tracking era bastante fácil?

Una cosa que he notado es que la receta HTML5 no funciona bien con otras (bueno, al menos con algunas de ellas). A veces, supera todas las interacciones y otros oyentes de video dejan de trabajar. Así que asegúrate de que el oyente del evento automático HTML5 no se dispare en la misma página que el reproductor JW, etc. Todo lo demás debería estar bien. Si notas algún error, por favor, házmelo saber.

Rastreo de video con el Google Tag Manager: Palabras finales

Cuando se trata de rastreo de video con Google Tag Manager, lo primero que probablemente te viene a la mente es el rastreo de videos incrustados en Youtube. Bueno, no te culpo, ya que es la plataforma de alojamiento de videos más popular del mundo.

Pero si se trata de un reproductor de video que no es de Youtube, eso todavía es posible con algunas soluciones personalizadas.

En esta entrada del blog, he explicado cómo puedes rastrear tanto los vídeos de Youtube como los que no lo son, incrustados en tu sitio.

Y para ahorrarle tiempo, también he incluido un montón de recetas de cocina que puede descargar, importar, configurar y comenzar a rastrear los videos en minutos.

Sólo tienes que descargar cualquiera de ellas, importarlas a tu cuenta de GTM, y empezar a rastrear los videos en un abrir y cerrar de ojos.

Todas estas soluciones de rastreo de videos de Google Tag Manager siguen el mismo principio, así que una vez que domines una, las conquistarás todas.