Cómo rastrear el reproductor de audio HTML5 con Google Tag Manager y GA

Actualizado: 15 de noviembre. Supongo que la mayoría de la comunidad GTM está familiarizada con un oyente de eventos personalizados que probablemente ya tiene el estatus de legendario. Incluso este Twitter (que vi hoy en mi feed) lo confirmó:

Sí, estoy hablando del escuchador de video HTML5 de David Vallejo que se usa para rastrear casi cualquier otro reproductor de video que no sea Youtube o Vimeo (o cualquier otra cosa en el iFrame). Pero la entrada de hoy en el blog no trata del vídeo.

Tabla de contenidos

Hace algún tiempo, descubrí una cosa llamada Eventos mediáticos (todavía estoy en el principio de mi viaje en JavaScript, así que perdonen mi ignorancia). Resultó que hay un montón de interacciones que pueden ser rastreadas (por ejemplo, reproducción, pausa, etc.) en los reproductores de vídeo (y también en los audios). El oyente de David capta esos eventos muy exactos y los empuja a la Capa de Datos.

Pero su oyente hace eso sólo para los reproductores de video HTML5. El audio no está soportado.

A menos que… cambies una palabra de su código. Literalmente, una palabra.

P.D. En el resultado final, habrá más palabras cambiadas (pero se hizo sólo para coincidir con la convención de nombres apropiada). Pero para poder empezar a escuchar los eventos de audio, es suficiente con cambiar una palabra del código de David.

Escuchador de audio HTML5 para GTM (también conocido como una palabra puede hacer la diferencia)

Echemos un vistazo al código de escucha de David. Ya que no hay números de líneas de código, deberías buscar en algún lugar la marca del 60% de su código.

Localiza esta línea:

var videos = document.getElementsByTagName('video');

Significa que el código está buscando elementos que están usando la etiqueta HTML

Así que una palabra que tenemos que cambiar es «video» .

Eso es lo mínimo que hay que hacer para adaptar el oyente al audio HTML5. Pero para mantener las cosas en orden y tener la convención de nombres adecuada, he cambiado más palabras (por ejemplo, he reemplazado todas las otras palabras «video» en el código y lo he cambiado a «audio»).

Entonces, el resultado final del audio HTML5 para el Google Tag Manager es este:

Requisitos para que esta solución funcione

Este oyente sólo admite los reproductores de audio incrustados en una página que:

  • No están en el iFrame
  • Usa la etiqueta  HTML

Ambas condiciones deben cumplirse. Si el oyente no funciona (y no ve los eventos de audio en el modo de previsualización y depuración del GTM, inspeccione el reproductor y lo más probable es que vea que no hay una etiqueta

En cuanto al reproductor de audio, basta con abrir las herramientas de desarrollo de su navegador, ir a la pestaña «Elementos» (también conocida como «Inspector DOM») y hacer una búsqueda rápida (por ejemplo, CTRL + F). En el campo de búsqueda, introduzca »

De hecho, por alguna razón, es bastante común que los reproductores de audio se construyan sin usar la etiqueta.

En cuanto al iFrame, deberías inspeccionar el reproductor de audio, subir al árbol de elementos (árbol DOM) y ver si no hay un

Entonces, ¿cómo rastreamos realmente el reproductor de audio HTML5 con GTM?

Comparado con el rastreo de video HTML5, el proceso de rastreo del reproductor de audio es bastante similar:

  1. Implementar el escuchador del reproductor de audio HTML5 (con una etiqueta HTML personalizada)
  2. Crear variables personalizadas de desencadenamiento de eventos y de capas de datos
  3. Crear una etiqueta de Google Analytics que enviará los datos del reproductor de audio a GA
  4. Prueba

#1. Etiqueta HTML personalizada

Primero, necesitamos activar el reproductor de audio HTML5 de una página. Como se trata de una solución personalizada, esto debe hacerse con una etiqueta HTML personalizada. Así que ve a GTM > Tags > New > Custom HTML y pega el código mencionado.

¿Cuándo deberías activar este escuchador? Hay dos posibles respuestas:

  • Si tienes MUCHAS páginas con reproductores de audio, puedes configurar esa etiqueta HTML personalizada para que simplemente se dispare en el disparador DOM Ready (tendrás que crearlo tú mismo).
  • Si tienes un oyente sólo en ciertas páginas, podemos seguir la práctica habitual, activar el oyente sólo en aquellas páginas en las que realmente existen reproductores de audio (también conocido como elemento HTML

#1.1. Crear una variable JavaScript personalizada

Volverá a ser cierto si  elemento está presente en una página. Si no es así, entonces será falso . Esta variable se utilizará en un disparador que decide si se activa o no la etiqueta Custom HTML (listener).

En GTM, vaya a Variables > Desplácese hacia abajo a Variables definidas por el usuario > Custom JavaScript y pegue el siguiente código:

function() { return (document.getElementsByTagName('audio').length > 0) ? true : false;}

Podemos nombrar la variable cjs – el reproductor de audio está en una página

#1.2. Crear un disparador que active al oyente sólo cuando el reproductor de audio esté presente

En Google Tag Manager, vaya a Triggers > Nuevo > DOM Ready. Queremos que dispare no sobre todos los eventos DOM Ready sino sólo sobre aquellos, cuando se hayan creado previamente cjs – el reproductor de audio está en una página …los retornos variables son verdaderos .

En otras palabras, si el reproductor de audio HTML5 está realmente en una página, sólo entonces se activará la etiqueta HTML personalizada.

Asigna este disparador a la etiqueta HTML personalizada.

#2. Disparador de Eventos Personalizados y Variables de la Capa de Datos

Después de crear la etiqueta HTML (con el código del oyente) y añadirle un disparador, guarda todo, habilita el modo de vista previa y depuración y ve al sitio web en el que estás trabajando (me refiero a donde está el reproductor de audio).

Actualiza esa página (debería aparecer el modo de vista previa y depuración).

Haz clic en el evento DOM Ready en el lado izquierdo y comprueba si se ha disparado la etiqueta Custom HTML. Si es así, está bien. Esto es exactamente lo que deberías esperar. Si se ha disparado la etiqueta Custom HTML, significa que el reproductor de audio está presente. Una vez que empieces a interactuar con el reproductor, empezarán a aparecer algunos eventos nuevos en el panel de Vista previa y Depuración.

Esos eventos son posibles porque el oyente está haciendo su trabajo, escucha las interacciones del jugador y luego las envía a la Capa de Datos para que el GTM pueda estar informado.

De todos modos, una vez que la etiqueta HTML personalizada se haya disparado, haga clic en Reproducir en el reproductor de audio, debería ver un nuevo evento de audio en el modo de Vista previa y Depuración, y luego haga clic en Pausa.

Si deja que el reproductor se reproduzca y verá aún más eventos (por ejemplo, cada 10% de la duración del audio, un nuevo evento será empujado. Además, se admiten las pausas, la reproducción y los eventos terminados).

Haz clic en cualquiera de los eventos de audio y ve a la pestaña Capa de datos. Verás algunos datos útiles relacionados con ese reproductor de audio, como audioPlayerAction y audioTitle.

Aunque estos datos son visibles en el modo de vista previa, no pueden utilizarse como disparadores o variables, a menos que se indique específicamente al GTM que lo haga. Esto se puede hacer creando el disparador de eventos personalizados y varias variables de la capa de datos. Así que hagamos eso.

Vaya a Triggers > Nuevo > Evento personalizado e introduzca los siguientes ajustes:

Entonces vamos a crear dos Variables de la Capa de Datos. Recuerda, esos ajustes son sensibles a las mayúsculas y minúsculas.

No creé la variable audioValor porque no la uso (pero tú puedes). Devuelve el umbral (en segundos) de donde el video fue pausado (al menos, eso creo).

#3. Etiqueta de evento de Google Analytics

El siguiente paso es enviar los datos del evento del reproductor de audio a Google Analytics. En GTM, vaya a Tags > New > Universal Analytics e introduzca la siguiente configuración:

Si ha dado diferentes nombres a las Variables de la Capa de Datos, entonces introduzca esos nombres exactos en los ajustes de la etiqueta de eventos de GA.

En la sección de activación de la etiqueta, haga clic en cualquier lugar y agregue el activador de eventos personalizados que hemos creado en el capítulo anterior de esta entrada de blog.

#4. Probemos

Así que esto es lo que se ha hecho hasta ahora:

  • Se creó una etiqueta HTML personalizada que contiene el receptor del reproductor de audio HTML5. Dispararé en todas las páginas o sólo en aquellas en las que esté presente el reproductor de audio (gracias por la variable Custom JS). Depende de ti qué opción elegir.
  • Las variables Custom Event Trigger y Data Layer fueron creadas para atrapar todo lo que el oyente del reproductor de audio está empujando a la Capa de Datos.
  • La etiqueta de eventoGA fue creada y se disparará cada vez que un evento llamado audio sea enviado por el oyente del reproductor de audio. Esa etiqueta de evento transferirá los valores de audioPlayerAction y audioTitle.

Habilitar el modo de vista previa y depuración del GTM, actualizar la página con el reproductor de audio.

Comience a interactuar con el reproductor, por ejemplo, haga clic en el botón Reproducir. El resultado esperado:

  • El evento deaudio aparecerá en el lado izquierdo del modo de vista previa y depuración
  • Haz clic en él y deberías ver la etiqueta del evento de la AG siendo disparada

Si todo está bien, ve a tus informes en tiempo real de la AG > Eventos. Comprueba si esos eventos también son visibles allí. Si no es así, lee esta guía para obtener algunas ideas sobre cómo solucionar los problemas.

Eso es todo. Ya puedes seguir con esta solución. Sólo recuerda, si no ves los eventos de audio en el modo de Vista previa y Depuración, lo más probable es que tu reproductor no esté construido con el elemento  o esté en el iFrame. Entonces esta guía no te ayudará.

Sin embargo, si tu reproductor no está en el iFrame y usa la etiqueta.

Cómo rastrear el reproductor de audio HTML5 con el Google Tag Manager: Palabras finales

Así que ahí lo tienes. Con un pequeño ajuste en la solución ya existente, nos las arreglamos para empezar a rastrear un conjunto diferente de interacciones en una página, el reproductor de audio HTML5. Esto no habría sido posible sin el brillante código de escucha de video HTML5 de David Vallejo.

Aquí está la lista de elementos que necesitaban ser hechos para configurar esto manualmente:

  • El reproductor de audio HTML5 se implementa a través de una etiqueta HTML personalizada
  • Se creó el Disparador de Eventos Personalizados que capta los eventos de audio
  • Las variables de la capa de datos fueron creadas para obtener los valores de audioPlayerAction y audioTitle de la capa de datos. Esos valores aparecen allí porque el oyente lo hace
  • Finalmente, se creó la etiqueta de Google Analytics que se dispara cada vez que ocurre un evento de audio en la Capa de Datos. La etiqueta también envía los valores de audioPlayerAction y audioTitle.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Política de Privacidad · Aviso Legal · Política de Cookies · Contacto
Copyright © 2021 - funneldeventa.com <