Este artículo se presenta como una versión revisada de una publicación anterior del 2016, cuando el disparador nativo de YouTube aún no formaba parte de Google Tag Manager (GTM). En otoño de 2017, el equipo de GTM lanzó varias características interesantes, y el disparador nativo de YouTube fue una de las incorporaciones más esperadas. Antes de esta actualización, el sector dependía de soluciones personalizadas para el seguimiento de videos de YouTube, desarrolladas por Bounteous o Cardinal Path.
A pesar de que el nuevo disparador de YouTube fue una gran adición a la funcionalidad de GTM, no está exento de problemas. Por diversas razones, que explicaré más adelante, este disparador no puede rastrear algunos reproductores de YouTube. Como consecuencia, es común ver publicaciones en comunidades o foros de GTM solicitando ayuda para el seguimiento de videos de YouTube.
En este artículo, compartiré varias estrategias y soluciones que puedes implementar para rastrear videos cuando el disparador de YouTube no funciona en Google Tag Manager.
Qué esperar del disparador nativo de YouTube en GTM
Así es como debería funcionar el seguimiento de videos de YouTube en un escenario ideal:
Debes tener al menos un disparador de video de YouTube habilitado en una página.
Cuando interactúas con el reproductor de video incrustado de YouTube, un evento de video de YouTube aparece en la consola de Vista previa y depuración. Esto sucede porque el oyente de eventos automático de YouTube captura la interacción y la envía a la Capa de Datos.
Si esto ocurre, estás listo para continuar. Activa las variables de video integradas en GTM, crea una etiqueta (por ejemplo, Evento GA4) y actívala en esos eventos de capa de datos de video de YouTube.
Sin embargo, esto no siempre sucede. El problema principal con el disparador de YouTube en GTM es que no todos los videos son rastreables. ¿Por qué sucede esto?
Razones por las que el disparador nativo de YouTube no funciona en Google Tag Manager
Una de las principales causas de este problema es lo que se conoce como videos cargados de forma perezosa (lazy-loaded). Por ejemplo, si un reproductor de video no se carga con el documento completo de la página, sino más tarde (por ejemplo, en un popup después de que un usuario hace clic en un botón grande en tu página de inicio), Google Tag Manager considera que es un video cargado de forma perezosa y el disparador integrado de GTM no rastreará sus interacciones.
Otra razón común por la que el disparador de YouTube no funciona es la ausencia del parámetro de consulta enablejsapi en el código del reproductor de video incrustado. Cuando este parámetro está configurado en 1, el sitio web (y GTM) puede comenzar a escuchar el reproductor a través de la API de JavaScript.
Otras razones posibles son que el video de YouTube incrustado utiliza el modo de privacidad mejorada o tiene un parámetro de consulta origin configurado en nulo. A continuación, examinemos más de cerca estos problemas y sus soluciones.
Cómo solucionar el problema del disparador de YouTube en Google Tag Manager (+ algunas alternativas)
Opción #1. Habilitar el soporte de API de JavaScript
Lo primero que debes hacer si no ves eventos de video de YouTube en la consola de Vista previa y depuración es habilitar el soporte de API de JavaScript. ¿Cómo puedes hacerlo? Tienes dos opciones:
#1.1 Solicitar a un desarrollador (o cambiarlo tú mismo si tienes acceso al código del sitio web) agregar un parámetro de consulta adicional enablejsapi=1 a la URL del video de YouTube incrustado. Antes de hacer eso, asegúrate de que este sea realmente el problema. Inspecciona el reproductor de video y busca el elemento iframe que carga el video. Verifica si la URL contiene enablejsapi=1. Si no es así, puedes solicitar a un desarrollador que agregue este parámetro a la URL del video incrustado.
#1.2 O utiliza la casilla de verificación en la configuración del disparador: Agregar soporte de API de JavaScript a todos los videos de YouTube. Al habilitar esta casilla, Google Tag Manager revisará los videos incrustados de YT en una página. Si algunos de ellos carecen de este parámetro de consulta, se añadirá automáticamente.
La principal ventaja de la segunda solución es que no requiere la intervención de un desarrollador. Sin embargo, por otro lado, puede causar un efecto de parpadeo en el reproductor. Esto significa que GTM volverá a cargar el reproductor una vez para cargarlo con el parámetro de consulta enablejsapi presente. Esto puede convertirse en un problema si un video en tu página comienza a reproducirse automáticamente (ya que podría comenzar a reproducirse, luego GTM lo recargará y comenzará a reproducirse nuevamente). Este es un caso MUY raro (pero aún vale la pena saberlo).
Importante: Si el video de YT incrustado ya utiliza el parámetro enablejsapi que está configurado en 0 (enablejsapi=0), GTM no cambiará su valor a 1. Lamentablemente, así es como funciona GTM actualmente (gracias a Simo Ahava por su comentario).
Importante #2: Debes agregar enablejsapi a la URL como un parámetro de consulta válido. Esto significa que debe ir después del signo de interrogación y, si hay múltiples parámetros de consulta, deben estar conectados con un ampersand &.
Además, si no hay un ampersand delante de enablejsapi (cuando debería estar), eso tampoco es correcto.
Si te encuentras con ampersands incorrectos (por ejemplo, codificados como &), debes solicitar a tu desarrollador que corrija esto.
Otra nota importante de Simo es que si la URL del reproductor incrustado contiene el parámetro de consulta origin configurado en nulo (origin=null), el disparador de YouTube tampoco funcionará. Pide a un desarrollador que elimine ese parámetro de la URL (o que contenga la URL del dominio en el que se incrusta el reproductor).
Opción #2. Experimentar con la nueva configuración «Habilitar este disparador en»
El disparador de YouTube de Google Tag Manager te permite controlar cuándo se activa la funcionalidad de seguimiento en una página:
En el momento más temprano en que se carga el contenedor de GTM (evento gtm.js)
Cuando el Documento Object Model está listo, conocido como DOM Ready (evento gtm.dom)
Cuando todos los scripts se han cargado en una página, conocido como Window Loaded (evento gtm.load)
Por defecto, el disparador de YouTube se habilita en el evento DOM Ready. Sin embargo, puedes intentar retrasarlo y habilitarlo en Window Loaded. Esto puede ayudar si el video se inyecta dinámicamente en la página, y eso sucede después de que el evento de DOM ready ya se ha activado.
Opción #3. Cargar la biblioteca de la API de Iframe de YouTube
Aparte del requisito de enablejsapi=1, hay dos cosas más que debes tener en cuenta para hacer que el oyente de YouTube comience a funcionar. El disparador de YT integrado funcionará si se cumple al menos una de estas dos condiciones:
Un video incrustado debe estar presente en una página cuando se carga el contenedor de GTM.
O el script de la API de Iframe de YouTube debe estar presente en una página cuando se carga el contenedor de GTM.
Si una de estas dos condiciones está presente en una página, el oyente de YT se activará y comenzará a escuchar las interacciones con el video.
Sin embargo, como mencioné al principio de este artículo, el problema principal surge con los videos cargados de forma perezosa. Cuando GTM se carga, el video cargado de forma perezosa (y el script de la API de Iframe de YouTube) están ausentes; por lo tanto, el oyente nunca se activa.
¿Una solución? Carga el script de la API de YouTube antes de habilitar el disparador de YouTube. Crea una etiqueta HTML personalizada con el siguiente código:
<script src="https://www.youtube.com/iframe_api">
Y actívala en Todas las páginas (o solo en aquellas donde pueda aparecer el video de YouTube cargado de forma perezosa). Asegúrate de elegir el disparador de Vista de página.
Luego, activa el disparador de YouTube en el evento DOM Ready. O si has configurado la etiqueta HTML personalizada para que se active en DOM Ready, entonces establece el disparador de YT para que se active en el evento Window Loaded.
Aún no he utilizado ambos en el mismo evento, pero presumo que puede haber algunas condiciones raras (puedo estar equivocado, así que siéntete libre de corregirme).
Y eso es todo. Cuando se carga la página, el script de la API de YouTube ya está disponible; por lo tanto, el disparador de YouTube se activará y escuchará las interacciones con el video. Como resultado, deberías comenzar a ver eventos de video de YouTube en la consola de Vista previa y depuración.
Sin embargo, otros factores pueden seguir interfiriendo con tu seguimiento de YT (por ejemplo, el parámetro enablejsapi está configurado en «0» o está ausente), así que asegúrate de haber leído otros consejos aquí también.
Este no es un remedio infalible (pero sigue siendo un consejo útil). ¡Adoro a la comunidad de GTM y el aprendizaje constante!
Opción #4. Modo de privacidad mejorada
Los reproductores de video de YouTube también pueden incrustarse con el modo de privacidad mejorada (que no almacena cookies en el navegador del visitante). Sin embargo, si esta configuración está habilitada, el disparador de YouTube no funcionará (porque, en este caso, el video se cargará no desde youtube.com sino desde youtube-nocookie.com).
¿Cómo puedes saber si el reproductor de video incrustado está en modo de privacidad mejorada?
Inspecciona el reproductor y verifica el origen del iframe (mira el atributo src). Si el dominio es youtube-nocookie.com, eso indica el modo de privacidad mejorada.
¿Qué opciones tienes?
Desactivar el modo de privacidad mejorada cambiando youtube-nocookie.com por youtube.com en el código del reproductor incrustado (esto debe hacerse en el código fuente del sitio web o en el editor del sistema de gestión de contenido. Sin embargo, a la luz del GDPR, esta puede no ser la mejor opción).
Aceptar la derrota y omitir el seguimiento de YouTube.
Utilizar un oyente personalizado y modificar su código para comenzar a escuchar a youtube-nocookie.com en lugar de youtube.com. Si, por ejemplo, deseas comenzar a utilizar la solución #9 (de este artículo), reemplaza estos dos dominios por youtube-nocookie.com en el código de ese oyente (disponible en la etiqueta HTML personalizada).
Opción #5. Verificar si el video de YouTube incrustado contiene el atributo “src”
A veces, los videos de YouTube se incrustan de una manera no estándar. Al decir “no estándar”, me refiero a que el atributo src del video incrustado (que contiene la URL del video) no existe.
En su lugar, los desarrolladores utilizan el atributo data-src.
Para asegurarte de que estás tratando con este problema, inspecciona el reproductor de video, localiza el elemento iframe y verifica si el atributo src (ver la captura de pantalla a continuación) contiene la URL de www.youtube.com.
Si no es así, entonces el seguimiento de video de YouTube no funcionará.
En la captura de pantalla a continuación, el elemento iFrame tiene el atributo src, pero contiene la imagen, no la URL del video. En cambio, la URL del video se almacena en el atributo data-src.
¿Cuál es la solución? Pide a un desarrollador que solucione este problema y almacene la URL del video en el atributo src. Esa es la única solución.
Opción #6. Cuando el atributo src se actualiza más tarde
Esta opción puede parecer un poco engañosa o confusa, pero ten paciencia. De hecho, está relacionada con la opción #5. Cuando los desarrolladores quieren optimizar la velocidad de carga de la página, uno de los lugares que definitivamente puede mejorar es la carga de los reproductores de video de YouTube de manera perezosa.
Por ejemplo, solo se muestra la miniatura cuando un reproductor está en una página. Cuando el visitante hace clic en el botón de reproducción, se carga el reproductor y se reproduce el video.
Lamentablemente, esto no suele ser compatible con el disparador de YouTube integrado en Google Tag Manager.
Imagina esta situación: cuando se carga la página, haz clic en Inspeccionar elemento en el reproductor. Si ese elemento inspeccionado contiene el atributo data-src (que contiene la URL del video) PERO:
El src no existe en ese mismo elemento
O el src existe, pero su valor no es https://www.youtube.com/embed/oasbsaoasd….., entonces continúa leyendo este consejo.
Ahora revisa otra cosa. Mientras inspeccionas ese elemento, haz clic en la miniatura del video/botón de reproducción. ¿El atributo src del reproductor recibe un nuevo valor, que es la URL del video + parámetros adicionales (como enablejsapi=1)?
Si esto es exactamente lo que ves en tu proyecto, aquí te explico por qué el disparador de YouTube no funciona. Una de las cosas que este disparador está buscando son elementos iframe que contengan el atributo src con la URL de un video de YouTube. Esta verificación ocurre cuando se carga el contenedor de GTM (pero depende de la configuración).
Durante la carga inicial de la página, tus reproductores de YouTube no contienen el atributo “src” con la URL de YouTube (porque la URL se almacena en el atributo data-src). Cuando se carga GTM, el oyente de YouTube revisa todos los reproductores de YouTube en una página e inspecciona uno por uno. Cuando se inspecciona el elemento, se le agrega un nuevo atributo llamado data-gtm-yt-inspected…..
Aun cuando la URL del reproductor (en el atributo src) cambia, ese cambio ya no será notado por GTM (porque el reproductor ya fue inspeccionado y recibió ese atributo data-gtm-yt-inspected…).
¿Cómo puedes resolver esto? Necesitarás la intervención de un desarrollador.
Tu desarrollador deberá realizar cambios específicos en el código responsable de la carga perezosa del video. Debe asegurarse de que cada vez que un visitante haga clic en la miniatura del video y se cargue el reproductor real, se eliminen todos los atributos data-gtm-yt-inspected… que fueron añadidos. Esto obligará a GTM a volver a revisar el reproductor y comenzar a rastrearlo.
Ten en cuenta que en tu caso, el número de atributos data-gtm-yt-inspected… y sus nombres serán, probablemente, diferentes.
Opción #7. La URL del video de YouTube incrustado debe contener parámetros de consulta válidos
Cuando digo “parámetros de consulta válidos”, deben ir después de un signo de interrogación (en la URL). Múltiples parámetros deben estar conectados con un ampersand (&).
Este es un ejemplo correcto de la URL (que puedes ver si haces «Inspeccionar elemento» en el reproductor incrustado de YouTube):
Pero en algunos casos raros, podrías ver algo como esto:
Cada parámetro de URL está conectado con & en lugar de solo &. Esto rompe el seguimiento del reproductor de video de YouTube en GTM. La solución aquí es pedir a un desarrollador que identifique el código en el sitio que está causando esto y lo corrija.
Otras soluciones (sustitutos del disparador nativo de YouTube en GTM)
Aunque los consejos mencionados anteriormente deberían ser suficientes para solucionar el disparador de YouTube en Google Tag Manager, también puedes encontrar útiles las dos recomendaciones que se mencionan a continuación. Ambas son soluciones personalizadas (de hecho, así es como el seguimiento web funcionaba antes de que existiera el disparador nativo de YouTube).
Opción #8. Escucha personalizada de YouTube por Bounteous
Antes de que GTM ofreciera el disparador nativo de YouTube, las personas utilizaban las soluciones personalizadas de Bounteous o Cardinal Path. El oyente de Bounteous es compatible con videos cargados de forma perezosa (al menos en la mayoría de los casos que recuerdo). Por lo tanto, si por alguna razón ninguno de los consejos anteriores funcionó (aunque eso es muy poco probable), puedes intentar implementar esta opción.
Solo recuerda que esta solución personalizada utiliza disparadores y variables personalizadas (lo que significa que necesitarás crear Variables de Capa de Datos y Disparadores de Eventos Personalizados por tu cuenta. Los disparadores de video integrados no funcionarán aquí.
Opción #9. Solución modificada de Cardinal Path
Cardinal Path creó otra solución personalizada que fue popular en la industria. Sin embargo, recuerdo haber trabajado en un proyecto donde ni la solución de Bounteous ni esta de Cardinal Path funcionaron.
Como resultado, pedí a un colega que era desarrollador de JavaScript que modificara el oyente un poco. Ahora, el oyente está pendiente de los cambios en el reproductor de YouTube cada segundo. Así que incluso si el video se carga de forma perezosa, después de 1 segundo, se rastreará. Aquí está el código del oyente:
<script>
// habilitar la API de JavaScript para un reproductor incrustado
for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;)
if (/youtube.com/embed/.test(e[x].src))
if (e[x].src.indexOf('enablejsapi=') === -1)
e[x].src += (e[x].src.indexOf('?') === -1 ? '?' : '&') + 'enablejsapi=1';
var gtmYTListeners = [],
gtmYTListenersStates = []; // soporte para múltiples reproductores en la misma página
// adjuntar nuestro oyente de YT una vez que la API esté cargada
function onYouTubeIframeAPIReady() {
for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) {
if (/youtube.com/embed/.test(e[x].src)) {
gtmYTListeners.push(new YT.Player(e[x], {
events: {
onError: onPlayerError,
onReady: onPlayerReady
}
}));
YT.gtmLastAction = "p";
}
}
}
function onPlayerReady(e) {
var url = e.target.getVideoUrl();
gtmYTListenersStates[url] = e.target.getPlayerState();
setInterval(function () {
var state = e.target.getPlayerState();
if (gtmYTListenersStates[url] !== state) {
e.data = state;
onPlayerStateChange(e);
}
gtmYTListenersStates[url] = state;
}, 100);
}
// escuchar los estados de reproducción, pausa y fin
// también informar el % reproducido cada segundo
function onPlayerStateChange(e) {
e["data"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e["target"]);
var video_data = e.target["getVideoData"](),
label = video_data.title;
// Obtener el título de la página actual
var pageTitle = document.title;
if (e["data"] == YT.PlayerState.PLAYING && YT.gtmLastAction == "p") {
label = "Video Reproducido - " + video_data.title;
dataLayer.push({
'event': 'youtube',
'eventCategory': 'Youtube Videos',
'eventAction': pageTitle,
'eventLabel': label
});
YT.gtmLastAction = "";
}
if (e["data"] == YT.PlayerState.PAUSED) {
label = "Video Pausado - " + video_data.title;
dataLayer.push({
'event': 'youtube',
'eventCategory': 'Youtube Videos',
'eventAction': pageTitle,
'eventLabel': label
});
YT.gtmLastAction = "p";
}
}
// captura todo para informar errores a través de la capa de datos de GTM
// una vez que el error se expone a GTM, se puede rastrear en UA como un evento
function onPlayerError(e) {
dataLayer.push({
'event': 'error',
'eventCategory': 'Youtube Videos',
'eventAction': 'GTM',
'eventLabel': "youtube:" + e["target"]["src"] + "-" + e["data"]
});
}
// informar el % reproducido si coincide con 0%, 25%, 50%, 75% o finalizado
function onPlayerPercent(e) {
console.log("onPlayerPercent");
if (e["getPlayerState"]() == YT.PlayerState.PLAYING) {
var t = e["getDuration"]() - e["getCurrentTime"]() e["lastP"]) {
var video_data = e["getVideoData"](),
label = video_data.title;
// Obtener el título de la página actual
var pageTitle = document.title;
e["lastP"] = t;
label = t * 100 + "% Video reproducido - " + video_data.title;
dataLayer.push({
'event': 'youtube',
'eventCategory': 'Youtube Videos',
'eventAction': pageTitle,
'eventLabel': label
});
}
e["lastP"] != 1 && setTimeout(onPlayerPercent, 1000, e);
}
}
// cargar la API de JS de Youtube y comenzar
var j = document.createElement("script"),
f = document.getElementsByTagName("script")[0];
j.src = "//www.youtube.com/iframe_api";
j.async = true;
f.parentNode.insertBefore(j, f);
</script>
Este código enviará los eventos de “youtube” a la Capa de Datos. La publicación del blog de Cardinal Path explica todo si necesitas determinar qué variables y disparadores debes crear. Todo lo que necesitas hacer es actualizar el código de la etiqueta HTML personalizada de Cardinal Path con el que publiqué anteriormente.
La solución no es perfecta (en comparación con las mencionadas al principio de este artículo), y puede causar algún parpadeo en el video, pero si buscas un plan B, esto podría ser una opción.
Recuerda que esta solución también utiliza disparadores y variables personalizadas (lo que significa que necesitarás crear Variables de Capa de Datos y Disparadores de Eventos Personalizados por tu cuenta. Los disparadores de video integrados no funcionarán aquí.
Opción Bonus #10. URL de video cambiada
Este es un caso extremo, pero aún vale la pena verificar. Recientemente, me encontré con un caso donde ninguna de las soluciones mencionadas anteriormente funcionó (esto ocurrió en #MeasureSlack). Un reproductor de video apareció en un popup solo después de que un visitante hizo clic en un botón específico en una página.
Pero había algo diferente que rompía el seguimiento del reproductor.
El reproductor de video de YouTube siempre estaba en la página, pero estaba oculto. Cuando se cargó GTM, el oyente de YouTube lo identificó correctamente y estaba listo para comenzar a escuchar. Sin embargo, cuando se hizo clic en el botón que abre un popup con un video de YouTube, algún JavaScript personalizado en la página cambió la URL del video de YouTube (agregó el parámetro ?autoplay=1). Esto causó que el iframe se recargara y creara una nueva instancia del iframe, que GTM ya no rastrea.
El seguimiento de YouTube de GTM verifica los reproductores en una página solo una vez; por lo tanto, esa nueva instancia es ignorada.
Aquí hay un poco más de detalles. Abrí el inspector de elementos en mi navegador Chrome y busqué rápidamente /embed/ (porque tus videos de YouTube incrustados tienen eso en la URL).
Aquí tienes una captura de pantalla de la URL del reproductor incrustado mientras el popup aún es invisible.
Memoriza esto. La URL contiene el nombre del host, /embed/some_id, y dos parámetros de consulta (enablejsapi y origin).
Sin embargo, cuando hago clic en el botón que abre un popup con un video de YouTube, su URL cambia a esta:
Se agrega un nuevo parámetro a la URL, autoplay=1. Este cambio en la URL causó el problema de que el seguimiento de YouTube de GTM no funcionaba. Y esto no está relacionado SOLO con autoplay. Podría haber habido cualquier parámetro o cualquier otro cambio. El seguimiento de YouTube no funcionaría.
¿Cuál es la solución? Debes informar a los desarrolladores que no cambien la URL del video. O tener esos parámetros añadidos a la URL del video de YT desde el principio.
La causa de este problema fue identificada (para nadie que se sorprenda) por Simo Ahava.
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional
Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos.El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
