¿El disparador de Youtube no funciona en el Google Tag Manager? 8 formas de arreglarlo

En el otoño de 2023, el equipo de Google Tag Manager lanzó múltiples características impresionantes y el disparador nativo de Youtube fue una de ellas. Antes de que eso ocurriera, la industria estaba utilizando soluciones de rastreo de video personalizadas creadas por Bounteous o Cardinal Path.

A pesar de que el nuevo disparador de Youtube fue una gran adición al conjunto de características dentro de GTM, no era (y sigue sin ser) a prueba de balas. Debido a factores particulares (los explicaré más adelante), no podrá rastrear algunos reproductores de YT. Por eso, de vez en cuando todavía se pueden ver nuevos mensajes que aparecen en las comunidades o foros del GTM pidiendo ayuda para rastrear los vídeos de YT.

En esta entrada del blog, compartiré varios consejos/ soluciones que puedes implementar para rastrear videos cuando el disparador de Youtube no funciona en el Google Tag Manager.

El resultado que debe esperar del disparador de Youtube incorporado en el GTM

Así es como el seguimiento de vídeo de Youtube debería funcionar en el escenario perfecto:

1. Debes tener al menos un disparador de vídeo de Youtube activado en una página
2. Cuando interactúas con el reproductor de vídeo incorporado de Youtube, un evento gtm.video aparece en la consola de Previsualización y Depuración (eso es porque el oyente del auto-evento de Youtube capta la interacción y la empuja a la Capa de Datos).
3. Si esto sucede, puedes irte. Habilita las variables de video incorporadas en GTM, crea una etiqueta (por ejemplo, Evento GA), y la dispara en esos eventos de Capa de Datos gtm.video.

Sin embargo, esto no siempre sucede. El principal problema que ocurre con el disparador de Youtube en el GTM es que gtm. video no aparece con todos los videos. ¿Por qué?

¿Por qué el disparador incorporado de Youtube no funciona en el Google Tag Manager?

La principal causa de este problema es una cosa llamada videos de pereza. Por ejemplo, si un reproductor de vídeo no se carga junto con el documento de la página entera sino más tarde (por ejemplo, en una ventana emergente después de que un usuario hace clic en un gran botón azul de su página de inicio), eso se considera un vídeo cargado por pereza y el disparador incorporado del GTM no rastreará sus interacciones.

Otra razón bastante popular para que el disparador de Youtube no funcione es la ausencia de la enablejsapi en el código del reproductor de video YT. Cuando este parámetro se establece en 1, el sitio web (y el GTM, por supuesto) puede empezar a escuchar el reproductor a través de la API de JavaScript.

Otras posibles razones son: el video incrustado en Youtube está usando el modo de privacidad mejorado o tiene un parámetro de origen de la consulta establecido en nulo. Echemos un vistazo más de cerca a ellos y cuáles son las posibles soluciones.

¿Cómo se puede corregir el desencadenante de Youtube en el Administrador de etiquetas de Google? (+ algunas alternativas)

Opción 1. Habilitar el soporte de la API de JavaScript para todos los vídeos incrustados en Youtube

Lo primero que puedes hacer con el disparador si no estás viendo los eventos gtm.video en la consola de Previsualización y Depuración es habilitar la compatibilidad con la API de JavaScript. ¿Cómo puedes hacer eso? Tienes dos opciones:

1.1 Pedir a un desarrollador (o cambiarlo usted mismo si tiene acceso al código del sitio web) que añada un parámetro de consulta adicional enablejsapi=1 a la URL del vídeo de Youtube incrustado. Antes de hacer eso, tienes que asegurarte de que esto es un problema en absoluto. Inspecciona el reproductor de vídeo y sigue buscando el elemento iframe que carga el vídeo de YT. Comprueba su atributo src. ¿Contiene la URL enablejsapi=1? Si la respuesta es negativa, entonces sí que puedes pedir a un desarrollador que añada este parámetro a la URL del vídeo incrustado.

1.2. Utiliza la casilla de verificación de la configuración del desencadenante: Añadir compatibilidad con la API de JavaScript a todos los vídeos de Youtube. Tras habilitar esta casilla de verificación, el Administrador de etiquetas de Google marcará los vídeos incrustados de YT existentes en una página y, si a algunos de ellos les falta este parámetro de consulta, se añadirá automáticamente.

La principal ventaja de la segunda solución es que no requiere la aportación de un desarrollador. Pero por otro lado, añadirá un efecto de parpadeo al reproductor. Esto significa que el GTM recargará al jugador una vez para cargarlo con el parámetro de consulta enablejsapi presente. Esto puede convertirse en un problema si un vídeo de la página comienza a reproducirse automáticamente (porque podría comenzar a reproducirse, entonces el GTM lo recargará y comenzará a reproducirse de nuevo). Este es un caso MUY raro de borde (pero aún así vale la pena saberlo).

Un buen ejemplo: https://www.youtube.com/embed/93ba93bas?feature=oembed&enablejsapi=1

Mal ejemplo: https://www.youtube.com/embed/93ba93bas?feature=oembed&enablejsapi=1

Además, si no hay un ampersand delante del enablejsapi (cuando debería serlo), eso tampoco es bueno.

Si se trata del problema de los ampersands incorrectos (por ejemplo, codificados &), debes contactar con tu desarrollador y pedirle una solución.

Además, otra nota importante de Simo fue que si la URL del reproductor incrustado contiene el parámetro de consulta origen que se establece en null(origin=null), el disparador de Youtube tampoco funcionará. Pide a un desarrollador que elimine ese parámetro de la URL (o debería contener la URL del dominio en el que está incrustado el reproductor).

Opción 2. Juega con el nuevo ajuste «Activar este disparador».

Una de las principales razones por las que publiqué esta entrada en el blog hoy es la nueva característica en GTM. El 6 de marzo, el equipo de Google Tag Manager añadió una nueva configuración a los disparadores de YT y Scroll. Ahora puedes controlar cuando el disparador está activado en una página:

• En el primer momento cuando el contenedor del GTM se carga( eventogtm.js )
• Cuando el Módulo de Objeto de Documento esté listo, también conocido como DOM Ready( eventogtm.dom )
• Cuando todos los guiones se cargan en una página, también conocida como ventana cargada( eventogtm.load )

Por defecto, el Disparador de Youtube está habilitado en el evento DOM Ready, sin embargo, puedes intentar retrasarlo y habilitarlo en Window Loaded. Tal vez eso ayude si el video se inyecta dinámicamente en la página y eso sucede después de que el evento DOM ready ya haya ocurrido.

Opción 3. Cargar la biblioteca de la API de Iframe de Youtube

Además del requisito de enablejsapi=1, hay dos cosas más que hay que tener en cuenta para que el oyente de Youtube empiece a trabajar. Si al menos una de esas dos cosas ( requisitos de lectura) se cumple, entonces el disparador de YT incorporado en el GTM funcionará:

• Un video incorporado debe estar ya presente en una página cuando el contenedor del GTM se carga
• O el script API de Youtube Iframe debe estar presente en una página cuando el contenedor GTM se carga

Así que si una de estas dos cosas están presentes en una página, entonces el oyente de YT se activará y empezará a escuchar las interacciones de video.

Sin embargo, como he mencionado al principio de esta entrada en el blog, el principal problema viene con los videos cargados de forma perezosa. Cuando el GTM se carga, el video cargado perezosamente (y el script de la API de Iframe de Youtube) no están presentes todavía, por lo tanto, el oyente nunca se activa.

¿Una solución? Cargar el script de la API de Youtube antes de que se active el Youtube Trigger. Crea una etiqueta HTML personalizada con el siguiente código:

Y dispararla en Todas las páginas (o sólo en aquellas páginas en las que sea posible que aparezca el vídeo de Youtube cargado perezosamente). Sólo asegúrate de elegir el disparador de vista de página.

Luego habilita el disparador de Youtube en el evento DOM Ready. O si has configurado la etiqueta Custom HTML para que se dispare en DOM Ready, entonces configura el disparador de YT para que se habilite en el evento Window Loaded.

No he intentado usar ambos en el mismo evento pero supongo que puede haber algunas condiciones de carrera (puede que me equivoque totalmente en eso, así que no dudes en corregirme).

Y eso es todo! Cuando la página se cargue, el script de la API de Youtube ya estará disponible, por lo que el disparador de Youtube se activará y se escucharán las interacciones de vídeo. Como resultado, deberías empezar a ver los eventos gtm.video en la consola de Previsualización y Depuración.

Sin embargo, otros factores pueden seguir interfiriendo con el seguimiento de YT (por ejemplo, el parámetro enablejsapi está establecido en «0» o no existe en absoluto), así que asegúrate de haber leído también otros consejos aquí.

Esta no es una bala de plata (pero aún así es un consejo muy útil). Me encanta la comunidad GTM y el aprendizaje constante!

Opción 4. Modo de mejora de la privacidad

El reproductor de video de Youtube también puede ser incorporado con el modo de privacidad mejorado (que no almacena cookies en el navegador del visitante). Sin embargo, si esta configuración está activada, el disparador de Youtube no funcionará (porque en este caso, el vídeo no se cargará desde youtube.com sino desde youtube-nocookie.com, en su lugar).

¿Cómo puedes saber si el reproductor de vídeo incrustado está en el modo de mejora de la privacidad?

Inspecciona el reproductor y comprueba con es el origen del iframe (consulta el atributo src ). Si el dominio es youtube-nocookie.com, ese es el modo de mejora de la privacidad.

¿Qué opciones tienes?

• Deshabilita el modo de mejora de la privacidad cambiando el 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 contenidos. Sin embargo, a la luz de GDPR esta podría no ser la mejor opción).
• Acepta la derrota y salta el seguimiento de Youtube.
• Usar un oyente personalizado y modificar su código para empezar a escuchar youtube-nocookie.com en lugar de youtube.com. Si, por ejemplo, quieres empezar a utilizar la solución nº 8 (de esta entrada de blog), sustituye estos dos dominios por el código de ese oyente de youtube-nocookie.com (está disponible en la etiqueta personalizada de HTML).

Opción 5. Comprueba si el vídeo 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», quiero decir que el atributo src del vídeo incrustado (que contiene la URL del vídeo) no existe.

En su lugar, los desarrolladores utilizan el atributo data-src .

Para asegurarse de que se trata de un problema, debería inspeccionar el reproductor de vídeo, localizar el elemento iframe y comprobar si el atributo src (consulte la captura de pantalla siguiente) contiene la dirección URL www.youtube.com.

Si no es así, el seguimiento del vídeo en Youtube no funcionará.

En la captura de pantalla que aparece a continuación, el elemento iFrame tiene el atributo src pero contiene la imagen, no la dirección URL del vídeo. En su lugar, la URL del vídeo se almacena en el atributo data-src.

¿Cuál es la solución? Pide a un desarrollador que corrija este problema y almacene la URL del vídeo en el atributo src . Es la única solución.

Opción 6. Cuando el atributo src se actualiza más tarde

El subtítulo de esta opción puede parecer un poco engañoso o confuso, pero ten paciencia. De hecho, está bastante relacionado 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 las cosas son los reproductores de video de Youtube de carga lenta.

Por ejemplo, cuando un reproductor está en una página, sólo se muestra la miniatura. Cuando el visitante hace clic en el botón de reproducción, se carga el reproductor real y luego se ve el vídeo.

Lamentablemente, esto no suele ser compatible con el activador incorporado de Youtube en el Administrador de etiquetas de Google.

He aquí una situación: cuando la página se carga, haga clic en Inspeccionar elemento en el reproductor. Si ese elemento inspeccionado contiene el atributo data-src (que contiene la dirección URL del vídeo) 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, comprueba otra cosa. Mientras inspeccionas ese elemento, haz clic en el botón de reproducción/imagen en miniatura del vídeo. ¿Obtuvo el atributo src del reproductor un nuevo valor y ese valor es la dirección URL del vídeo + parámetros adicionales (como enablejsapi=1)?

Si esto es exactamente lo que estás viendo en tu proyecto, aquí tienes la explicación de por qué el activador de Youtube no funciona. Una de las cosas que busca este desencadenante son los elementos iframe que contienen el atributo src con la URL de un vídeo de Youtube. Esta comprobación se realiza cuando se carga el contenedor GTM (pero depende de la configuración).

Durante la carga de la página inicial, los reproductores de Youtube no contienen el atributo «src» con la dirección URL de Youtube (porque la dirección URL se almacena en el atributo data-src ). Cuando se carga el GTM, el oyente de Youtube comprueba todos los reproductores de Youtube de una página y los inspecciona una vez. Cuando el elemento es inspeccionado, obtiene un nuevo atributo, llamado data-gtm-y-inspected….

Incluso si la dirección URL del reproductor de Youtube (en el atributo src ) cambia, ese cambio ya no lo notará el GTM (porque el reproductor ya fue inspeccionado y obtuvo ese atributo data-gtm-y-inspected …

¿Cómo se puede solucionar esto? Necesitarás la aportación del desarrollador.

El desarrollador debe hacer ciertos cambios en el código que es responsable de la carga lenta del vídeo. Tu desarrollador tendrá que resolver esto.

Actualmente, cuando un visitante hace clic en la miniatura del vídeo, el atributo src se actualiza con la URL real de Youtube. Para asegurarse de que el oyente de GTM Youtube se dé cuenta de esto, pide a un desarrollador que también añada alguna funcionalidad que elimine todos los atributos de data-gtm-y-inspected… que fueron añadidos. Esto debe hacerse cada vez que un visitante hace clic en la miniatura y se carga el reproductor de vídeo real.

Esto forzará a GTM a revisar el reproductor una vez más y comenzar a rastrearlo.

Tenga en cuenta que en su caso, el número de atributos de data-gtm-y-inspected… y sus nombres serán, muy probablemente, diferentes.

Otras soluciones (reemplazos del disparador incorporado de Youtube en el GTM)

Aunque los consejos mencionados anteriormente deberían ser suficientes para arreglar el Disparador de Youtube en el Google Tag Manager, también podrías encontrar útiles dos consejos que se mencionan a continuación. Ambos son personalizados (de hecho, así es como la industria del rastreo web estaba retrocediendo en los viejos tiempos del rastreo de Youtube).

Opción 7. Escuchador de Youtube personalizado por Bounteous

Antes de que GTM ofreciera el disparador incorporado de Youtube, la gente usaba las soluciones personalizadas de Bounteous’ o Cardinal Path. El oyente de Bounteous’ soporta los videos de pereza (al menos en la mayoría de los casos que recuerdo). Así que si por alguna razón, ninguno de los consejos anteriores ayudó (aunque es muy poco probable), puedes intentar implementar este.

Sólo recuerda que esta solución personalizada utiliza disparadores y variables personalizadas (lo que significa que tendrás que crear variables de capa de datos y disparadores de eventos personalizados por tu cuenta. Los disparadores de vídeo incorporados no funcionarán aquí.

P.D. Aquí hay un LINK de la receta del GTM (que creó automáticamente disparadores, variables, etc.).

Opción 8. Solución del Camino Cardenalicio modificada

Otra solución personalizada que fue popular en la industria fue creada por Cardinal Path. Sin embargo, recuerdo haber trabajado en un proyecto donde ni la solución de Bounteous ni la de Cardinal Path funcionaron.

Como resultado, le pedí a un colega mío que es un desarrollador de JavaScript que modificara un poco el oyente. Ahora ese oyente está escuchando los cambios del reproductor de Youtube cada segundo. Así que incluso si el vídeo está cargado perezosamente, después de 1 segundo será rastreado. Aquí está el código del oyente:

Esto empujará los eventos de «youtube» a la Capa de Datos. Si no estás seguro de qué variables y disparadores debes crear, todo está explicado en la entrada del blog del Camino Cardenalicio. Todo lo que necesitas hacer es actualizar el código de la etiqueta HTML personalizada de Cardinal Path con el que he publicado arriba.

La solución no es perfecta (comparada con las que están al principio de la entrada) y puede causar algunos parpadeos en el video pero si estás buscando un plan B, este puede ser.

En este caso, también deberías recordar que esta solución utiliza disparadores y variables personalizadas (lo que significa que tendrás que crear variables de capa de datos y disparadores de eventos personalizados por tu cuenta. Los disparadores de vídeo incorporados no funcionarán aquí.

Opción de bono #9. Cambió la URL del video

Este es un caso límite, pero aún así vale la pena comprobarlo. Así que, recientemente me encontré con un caso en el que ninguna de las soluciones mencionadas funcionaba (esto ocurrió en el #MedidaSlack). Un reproductor de video apareció en un popup sólo después de que un visitante hiciera clic en cierto botón de una página.

Pero había algo diferente que rompió el seguimiento del reproductor.

Aparentemente, el reproductor de video de Youtube siempre estaba presente en una página pero estaba oculto. Cuando el GTM se cargó, el oyente de Youtube detectó con éxito el reproductor de vídeo y estaba listo para empezar a escuchar. Sin embargo, al hacer clic en el botón (que abre una ventana emergente de vídeo), algunos JavaScript personalizados en una página cambiaron la URL del vídeo de Youtube (añadieron un parámetro adicional ?autoplay=1). Esto hizo que el iFrame se recargara y creara una nueva instancia del iFrame, que ya no es rastreado por GTM.

El seguimiento incorporado de GTM en Youtube comprueba los reproductores de vídeo en una página sólo una vez, por lo que esa nueva instancia es ignorada.

Aquí hay un poco más de detalles. Básicamente, abrí el inspector de elementos en mi navegador Chrome e hice una búsqueda rápida de /embed/ (porque tus videos incorporados en Youtube tienen eso en la URL).

Aquí hay una captura de pantalla de la URL del reproductor incrustado mientras la ventana emergente es todavía invisible.

Memoriza esto. La URL contiene el nombre de host, /embed/some_id, y dos parámetros de consulta(enablejsapi y origin).

Sin embargo, cuando hago clic en el botón que abre una ventana emergente con un vídeo de Youtube, su URL cambia a esta:

Se añade un nuevo parámetro de consulta a la URL, autoplay=1. Este cambio de URL causó el problema de que el seguimiento de GTM Youtube no funcionaba. Y esto no está relacionado SOLAMENTE con autoplay. Podría haber habido cualquier parámetro o cualquier otro cambio. El seguimiento de Youtube no habría funcionado.

¿Cuál es la solución? Necesitas decirle a los desarrolladores que no cambien la URL del video. O que añadan esos parámetros a la URL del vídeo de YT desde el principio.

Esta causa de este problema fue descubierta (para sorpresa de nadie) por Simo Ahava.

Conclusión: qué hacer cuando el disparador de Youtube no funciona en el Google Tag Manager

Así que ahí lo tienes. 8 formas de resolver el puzle cuando el disparador incorporado de Youtube no funciona en el Google Tag Manager. Aquí están las claves para llevar:

• El disparador predeterminado de Youtube rastreará correctamente los videos de YT si:
  1. enablejsapi se añade a la URL del reproductor de vídeo de Youtube incorporado y se establece en 1 (puedes comprobarlo inspeccionando el iframe del vídeo de Youtube y comprobando su atributo src ).
  2. y se cumple una de estas condiciones:
     • El reproductor de vídeo de Youtube ya está presente en una página cuando se carga el contenedor de GTM (y por eso los vídeos cargados con pereza no se rastrean de forma predeterminada)
     • El script API de Iframe de Youtube ya está presente cuando se carga el contenedor GTM

El problema de enablejsapi puede ser resuelto por un desarrollador (pídele que añada este parámetro al src del iframe) o activando la casilla Add JavaScript API support to all Youtube videos en su activador GTM. Sin embargo, si la URL del vídeo ya contiene el enablejsapi=0 (significa desactivado), pídale a un desarrollador que lo establezca en 1 en el código fuente del sitio web.

En cuanto a las otras dos condiciones (en las que debe cumplirse al menos una), cree una etiqueta HTML personalizada que contenga el script de la API de Iframe de Youtube y ejecútela antes de que se active el activador de Youtube.

Todos los disparadores de páginas asignados a esa etiqueta HTML personalizada deberían hacer el truco.

Si estas configuraciones no funcionan (aunque deberían), considera la posibilidad de consultar otros consejos:

• Comprueba si tus vídeos incrustados utilizan el modo de privacidad mejorado de Youtube
• Intenta implementar escuchas personalizadas en Youtube. Estas soluciones no son muy elegantes (comparadas con la funcionalidad incorporada del GTM) pero aún así podrían servir como un plan B.
• Comprueba si la URL del reproductor YT embebido no contiene el parámetro de consulta origin=null. Si lo contiene, debería ser eliminado (o establecido en el dominio de la página principal).

Como siempre, la sección de comentarios está a su disposición. ¿Me he perdido algo? Házmelo saber.