Hace un par de años escribí Un articulo sobre el seguimiento de las interacciones con el Nube de sonido widget vía Administrador de etiquetas de GoogleCuando una plataforma ofrece una API de inserción de JavaScript, es sorprendentemente fácil rastrear las interacciones con el jugador. Ya lo has visto con YouTubecon SoundCloud, con Reproductor JWy ahora verás cómo hacer esto con el Nube mixta jugador.
Si no sabes qué es Mixcloud, bueno, es un servicio de streaming muy fashionable para DJ, podcasts, programas de radio y otros medios de radio publicados. Dado que ofrecen una Solución de inserción práctica Para cualquier programa que te guste, tiene sentido comenzar a rastrear si la gente realmente usa el widget, ¿verdad?
incógnita
El boletín informativo de Simmer
Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!
Cómo configurarlo
Primero, debes agregar el widget de reproductor a tu sitio. Para ello, selecciona el programa que deseas incrustar y haz clic en el botón Botón para compartir.
Una superposición debe abrirse con ambos Compartir y un Empotrar Opción. Elija la última.
Configura las imágenes del jugador como desees. Una vez que hayas terminado, Desmarca la casilla junto a WordPressdespués de lo cual el cuadro de texto debe contener un iframe etiqueta incrustada
Este iframe La etiqueta es lo que debes agregar a tu sitio internet. Es importante que makes use of exactamente el formato proporcionado para que la API de JavaScript funcione sin problemas.
Sin embargo, una cosa que querrás agregar a la etiqueta es un… IDENTIFICACIÓN atributo. Esto hace que sea MUCHO más fácil apuntar al jugador correcto. Entonces, si el iframe Se ve así:
<iframe width="100%" top="60" src="https://www.mixcloud.com/widget/iframe/?feed=httpspercent3Apercent2Fpercent2Fwww.mixcloud.compercent2Fdj_umekpercent2Fbehind-the-iron-curtain-with-umek-episode-294percent2F&hide_cover=1&mini=1&mild=1" frameborder="0">iframe>Agregar id="myPlayer" como esto:
<iframe id="myPlayer" width="100%" top="60" src="https://www.mixcloud.com/widget/iframe/?feed=httpspercent3Apercent2Fpercent2Fwww.mixcloud.compercent2Fdj_umekpercent2Fbehind-the-iron-curtain-with-umek-episode-294percent2F&hide_cover=1&mini=1&mild=1" frameborder="0">iframe>Ahora este jugador en specific puede ser identificado con el myPlayer Identificador.
La etiqueta HTML personalizada de Google Tag Supervisor
Toda la solución de seguimiento está contenida en una única etiqueta HTML personalizada. Por lo tanto, cree una nueva etiqueta HTML personalizada y agregue el siguiente código dentro:
<script src="//widget.mixcloud.com/media/js/widgetApi.js" sort="textual content/javascript">script>
<script>
(perform() {
/* Change the CSS selector inside doc.querySelector to seize
* the right participant iframe.
*
* Accessible occasions are 'progress', 'buffering', 'play', 'pause',
* 'ended' and 'error'. If you wish to cease monitoring any one among these,
* simply take away them from the occasions Array.
*/
var playerIframe = doc.querySelector('#myPlayer'),
occasions = ('progress', 'buffering', 'play', 'pause', 'ended', 'error');
if (playerIframe) {
var participant = Mixcloud.PlayerWidget(playerIframe);
var key = '';
var sendDataLayer = perform(occasion, key, currentProgress) {
window.dataLayer.push({
occasion: 'mixcloud',
mixcloudEvent: {
title: occasion,
key: key,
progress: currentProgress
}
});
};
participant.prepared.then(perform() {
occasions.forEach(perform(occasion) {
strive {
participant.occasions(occasion).on(perform(progress, length) {
participant.getCurrentKey().then(perform(key) {
var currentProgress;
if (progress && length) {
if (progress === Math.spherical(length * 0.25)) {
currentProgress = '25%';
} else if (progress === Math.spherical(length * 0.5)) {
currentProgress = '50%';
} else if (progress === Math.spherical(length * 0.75)) {
currentProgress = '75%';
}
}
if (occasion !== 'progress' || !!currentProgress) {
sendDataLayer(occasion, key, currentProgress);
}
});
});
} catch(e) {}
});
});
}
})();
script>Establezca esta etiqueta para que se energetic en un Vista de página / DOM listo Activador y, si solo desea activarlo en determinadas páginas, puede modificar el activador en consecuencia. A continuación, se muestra un ejemplo:
Cómo funciona
Este rastreador agrega un oyente al reproductor dado para todos los eventos que especificó en el occasions Matriz. Siempre que la página registre un evento de este tipo, se generará una dataLayer.push() se desarrolla con la siguiente estructura:
{
occasion: 'mixcloud',
mixcloudEvent: {
title: '',
key: '',
progress: ''
}
}
Como puedes ver, el progress El evento mide en qué punto del programa se encuentra el usuario. Tiene activadores para 25%, 50% y 75%No agregué uno para 100%como el ended El evento es la misma cosa.
Disparadores y variables
Lo siguiente que deberá hacer es crear un disparador de evento personalizado para el mixcloud evento. Es muy fácil y el disparador debería verse así:
Por último, necesitarás tres variables de capa de datos. Una para mixcloudEvent.titleuno para mixcloudEvent.keyy uno para mixcloudEvent.progress.
Ahora deberías tener todo lo que necesitas para comenzar a rastrear las interacciones con el widget.
Una etiqueta de evento típica de Google Analytics podría verse así:
Por ejemplo, cuando un progress Si se registra el evento por alcanzar la mitad del camino, el evento se vería así:
Categoría de evento: Nube mixta
Acción del evento: progreso: /syte/subfm170217/
Etiqueta de evento:50%
Puede hacerlo aún más versátil con dimensiones personalizadas y métricas personalizadas.
Resumen
Este fue (espero) un consejo easy para ayudarte a seguir el reproductor de Mixcloud. Con una API de JavaScript sólida, es realmente fácil de hacer.
La API de JavaScript de Mixcloud funciona con promesas, por lo que el enfoque funcional exhibido en la etiqueta HTML personalizada puede parecer desordenado y, como tal, hay lugar para mejoras mediante refactorización.
Si tienes más de un widget en la página que deseas seguir, tendrás que duplicar el código correspondiente para cada jugador de la página. Por ejemplo:
...
var participant = doc.querySelector('#myPlayer');
var player2 = doc.querySelector('#myPlayer2');
...
if (participant) {
participant.prepared.then(perform() {
...
});
}
if (player2) {
player2.prepared.then(perform() {
...
});
}
...
¡Diviértete escuchando y rastreando esas pistas!