El seguimiento de la interacción del usuario con los reproductores de audio en la web se ha vuelto esencial para los especialistas en marketing y los analistas de datos. Comprender cómo los usuarios interactúan con el contenido multimedia puede ofrecer información valiosa sobre su comportamiento y preferencias. En este artículo, exploraremos cómo utilizar Google Tag Manager (GTM) y Google Analytics (GA) para rastrear un reproductor de audio HTML5, optimizando así la forma en que analizamos las métricas de reproducción.
Si bien muchos en la comunidad de GTM están familiarizados con el uso del rastreador de eventos de video HTML5, la adaptación para audio puede no ser tan evidente. Este artículo se centrará en cómo realizar esa adaptación y asegurarse de que se recopilen datos significativos sobre las interacciones con el audio.
¿Qué es Google Tag Manager y cómo se utiliza para rastrear audio HTML5?
Google Tag Manager es una herramienta gratuita que permite a los usuarios gestionar etiquetas de seguimiento en su sitio web sin necesidad de modificar el código directamente. Esto incluye la capacidad de rastrear eventos específicos, como las interacciones con los reproductores de audio HTML5. La integración con Google Analytics permite analizar estos eventos y obtener información detallada sobre el comportamiento del usuario.
Para rastrear un reproductor de audio, se utiliza un listener o escucha que detecta eventos como play, pause, y ended. Estos eventos se envían a la capa de datos de GTM, desde donde pueden ser recogidos por Google Analytics.
Eventos multimedia en HTML5
Los eventos multimedia son acciones que los usuarios pueden realizar en un reproductor de audio o video. Algunos eventos clave que podemos rastrear incluyen:
play: cuando el usuario comienza a reproducir el audio.
pause: cuando el usuario detiene la reproducción.
ended: cuando el audio ha terminado de reproducirse.
timeupdate: cuando la posición de reproducción del audio se actualiza.
Estos eventos permiten a los analistas entender mejor cómo los usuarios interactúan con el contenido, determinando el tiempo de escucha y las tasas de finalización.
Adaptando el listener de video para audio
El rastreador de eventos diseñado originalmente para reproductores de video HTML5 puede ser adaptado para audio con un simple cambio en el código. La clave está en modificar el elemento que se busca en el DOM. En lugar de video, simplemente cambiamos a audio. Esto permite que el listener comience a escuchar eventos de audio.
El código adaptado se verá de la siguiente manera:
<script>
// Esta escucha se basa en el listener HTML5 de video de David Vallejo, editado para audio
(function() {
var divisor = 10;
var audios_status = {};
function eventHandler(e) {
switch (e.type) {
case 'timeupdate':
// Lógica para manejar la actualización del tiempo
break;
case 'play':
// Lógica para manejar el evento de reproducción
break;
case 'pause':
// Lógica para manejar el evento de pausa
break;
case 'ended':
// Lógica para manejar el final de la reproducción
break;
default:
break;
}
}
var audios = document.getElementsByTagName('audio');
for (var i = 0; i < audios.length; i++) {
audios[i].addEventListener("play", eventHandler, false);
audios[i].addEventListener("pause", eventHandler, false);
audios[i].addEventListener("ended", eventHandler, false);
audios[i].addEventListener("timeupdate", eventHandler, false);
}
})();
</script>
Requisitos para el seguimiento de audio HTML5
Para que la solución de seguimiento funcione, es necesario que los reproductores de audio cumplan con ciertos requisitos:
No deben estar en un iFrame: El código no puede acceder a reproductores de audio que se encuentran dentro de un iFrame debido a restricciones de seguridad del navegador.
Utilizar la etiqueta <audio>: Solo se pueden rastrear los reproductores que utilicen la etiqueta HTML5 adecuada.
Si el reproductor no cumple con estas condiciones, el seguimiento no funcionará. Puedes verificar esto usando las herramientas de desarrollo de tu navegador para inspeccionar el DOM y buscar la etiqueta <audio>.
Pasos para rastrear el reproductor de audio HTML5 con GTM
El proceso para rastrear el reproductor de audio HTML5 es bastante similar al de los videos. A continuación se presentan los pasos a seguir:
Implementar el listener de audio HTML5 a través de una etiqueta HTML personalizada.
Crear un disparador de evento personalizado y variables de capa de datos.
Crear una etiqueta de Google Analytics para enviar los datos del reproductor de audio a GA.
Realizar pruebas para asegurarse de que todo funcione correctamente.
Implementación de una etiqueta HTML personalizada
Para comenzar, debemos crear una etiqueta HTML personalizada en GTM que contenga el código del listener. Debes navegar a GTM > Etiquetas > Nueva > HTML Personalizado y pegar el código adaptado que discutimos anteriormente.
Es importante activar este listener en los momentos adecuados:
Si hay muchos reproductores de audio en varias páginas, puedes disparar la etiqueta HTML en el evento de DOM Ready.
Si solo deseas rastrear en páginas específicas, configura el disparador para que se active solo cuando el reproductor de audio esté presente.
Creación de una variable JavaScript personalizada
Para determinar si un reproductor de audio está presente en la página, se puede crear una variable JavaScript personalizada que devuelva true o false dependiendo de la existencia de la etiqueta <audio>.
Nombra la variable como cjs – audio player is on a page.
Disparador que activa el listener
En GTM, debes crear un disparador que se active solo cuando la variable cjs – audio player is on a page devuelva true. Esto garantiza que el código del listener solo se ejecute en páginas que tienen un reproductor de audio.
Disparadores de eventos personalizados y variables de capa de datos
Después de establecer la etiqueta HTML y el disparador, es esencial verificar que el listener funcione correctamente. Activa el modo de Vista Previa y Depuración en GTM y visita la página donde se encuentra el reproductor de audio. Al interactuar con el reproductor, deberías ver eventos en el panel de depuración.
Para capturar los datos de los eventos, crea disparadores de eventos personalizados y variables de capa de datos que recojan información como audioPlayerAction y audioTitle cuando se registren eventos en el reproductor.
Crear una etiqueta de evento de Google Analytics
Finalmente, para enviar los datos de los eventos del reproductor de audio a Google Analytics, crea una nueva etiqueta de evento de GA4 en GTM. Asegúrate de que esta etiqueta se dispare con los disparadores que configuraste anteriormente.
Visualización de datos en Google Analytics 4
Para aprovechar al máximo los datos recopilados, es importante registrarlos como dimensiones personalizadas en GA4. Esto permitirá que los datos aparezcan en tus informes y análisis. Para registrar dimensiones personalizadas, sigue estos pasos:
Accede a tu propiedad de GA4 y dirígete a Administración > Definiciones de datos > Definiciones personalizadas.
Haz clic en Crear dimensión personalizada y completa los detalles necesarios, como el nombre del parámetro del evento.
Con las dimensiones personalizadas configuradas, podrás utilizarlas en la creación de informes de exploración en GA4.
Consideraciones finales sobre el rastreo de reproductores de audio HTML5
Con un pequeño ajuste en la solución existente, es posible rastrear diferentes interacciones en páginas que utilizan un reproductor de audio HTML5. Este proceso no solo proporciona valiosos datos sobre la interacción del usuario, sino que también puede ser un factor crucial para mejorar el contenido y la estrategia de marketing. Recuerda que seguir estos pasos te permitirá recopilar información detallada sobre el comportamiento del usuario con el audio, lo que es esencial en la era del contenido multimedia.
Asegúrate de haber completado estos pasos:
La etiqueta del listener del reproductor de audio HTML5 está implementada correctamente.
Se ha creado un disparador de evento personalizado que captura los eventos de audio.
Las variables de capa de datos están configuradas para extraer audioPlayerAction y audioTitle a partir del Data Layer.
Finalmente, se ha creado una etiqueta de Google Analytics 4 que se activa cada vez que ocurre un evento de audio.
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.
