Il y a quelques années, j’ai écrit un article sur le suivi des interactions avec le widget SoundCloud via Google Tag Manager. Lorsqu’une plate-forme fournit une API d’intégration JavaScript, il est étonnamment facile de suivre les interactions avec le joueur. Vous l’avez vu avec YouTube, avec SoundCloud, avec JWPlayer, et maintenant vous allez voir comment faire cela avec le lecteur Mixcloud.
Si vous ne savez pas ce qu’est Mixcloud, eh bien, c’est un service de streaming extrêmement populaire pour les DJ, les podcasts, les émissions de radio et d’autres médias radio publiés. Puisqu’ils offrent une solution d’intégration pratique pour n’importe quelle émission que vous aimez, il est logique de commencer à suivre si les gens utilisent réellement le widget, n’est-ce pas ?
Comment le configurer
Tout d’abord, vous devez ajouter le widget du lecteur à votre site. Pour ce faire, sélectionnez l’émission que vous souhaitez intégrer, puis cliquez sur le Bouton Partager.
Une superposition devrait s’ouvrir avec à la fois un Partager Et un Intégrer option. Choisissez ce dernier.
Configurez les visuels du lecteur comme vous le souhaitez. Une fois que vous avez terminé, décochez la case à côté de Wordpressaprès quoi la zone de texte doit contenir un iframe balise intégrée.
Cette iframe tag est ce que vous devez ajouter à votre site Web. Il est important que vous utilisiez le format exact fourni, afin que l’API JavaScript fonctionne sans aucun problème.
Une chose que vous voudrez ajouter à la balise, cependant, est un unique IDENTIFIANT attribut. Cela rend BEAUCOUP plus facile de cibler le bon joueur. Alors, si le iframe ressemble à ça:
<iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2Fdj_umek%2Fbehind-the-iron-curtain-with-umek-episode-294%2F&hide_cover=1&mini=1&light=1" frameborder="0"></iframe>Ajouter id="myPlayer" comme ça:
<iframe id="myPlayer" width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2Fdj_umek%2Fbehind-the-iron-curtain-with-umek-episode-294%2F&hide_cover=1&mini=1&light=1" frameborder="0"></iframe>Maintenant, ce joueur particulier peut être identifié avec le myPlayer identifiant.
La balise HTML personnalisée de Google Tag Manager
L’ensemble de la solution de suivi est contenu dans une seule balise HTML personnalisée. Créez donc une nouvelle balise HTML personnalisée et ajoutez-y le code suivant :
<script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript"></script> <script> (function() { /* Change the CSS selector within document.querySelector to capture * the correct player iframe. * * Available events are 'progress', 'buffering', 'play', 'pause', * 'ended' and 'error'. If you want to stop tracking any one of these, * just remove them from the events Array. */ var playerIframe = document.querySelector('#myPlayer'), events = ['progress', 'buffering', 'play', 'pause', 'ended', 'error']; if (playerIframe) { var player = Mixcloud.PlayerWidget(playerIframe); var key = ''; var sendDataLayer = function(event, key, currentProgress) { window.dataLayer.push({ event: 'mixcloud', mixcloudEvent: { name: event, key: key, progress: currentProgress } }); }; player.ready.then(function() { events.forEach(function(event) { try { player.events[event].on(function(progress, duration) { player.getCurrentKey().then(function(key) { var currentProgress; if (progress && duration) { if (progress === Math.round(duration * 0.25)) { currentProgress = '25%'; } else if (progress === Math.round(duration * 0.5)) { currentProgress = '50%'; } else if (progress === Math.round(duration * 0.75)) { currentProgress = '75%'; } } if (event !== 'progress' || !!currentProgress) { sendDataLayer(event, key, currentProgress); } }); }); } catch(e) {} }); }); } })(); </script>Configurez cette balise pour qu’elle se déclenche sur un Affichage de la page / Prêt pour le DOM déclencheur, et si vous ne souhaitez le déclencher que sur certaines pages, vous pouvez modifier le déclencheur en conséquence. Voici un exemple :
Comment ça fonctionne
Ce tracker ajoute un écouteur au lecteur donné pour tous les événements que vous avez spécifiés dans le events Déployer. Chaque fois qu’un tel événement est enregistré par la page, un dataLayer.push() a lieu avec la structure suivante :
{ event: 'mixcloud', mixcloudEvent: { name: '', key: '', progress: '' } } Comme vous pouvez le voir, le progress l’événement mesure la distance parcourue par l’utilisateur dans l’émission. Il a des déclencheurs pour 25%, 50% et 75%. je n’en ai pas ajouté pour 100%comme le ended l’événement est la même chose.
Déclencheurs et variables
La prochaine chose que vous devrez faire est de créer un déclencheur d’événement personnalisé pour le mixcloud un événement. C’est très simple, et le déclencheur devrait ressembler à ceci :
Enfin, vous aurez besoin de trois variables de couche de données. Un pour mixcloudEvent.nameun pour mixcloudEvent.keyet un pour mixcloudEvent.progress.
Vous devriez maintenant avoir tout ce dont vous avez besoin pour commencer à suivre les interactions avec le widget.
Une balise d’événement Google Analytics type peut ressembler à ceci :
Par exemple, lorsqu’un progress événement pour atteindre la mi-parcours est enregistré, l’événement ressemblerait à ceci :
Catégorie d’événement: Mixcloud
Action d’événement: progression : /syte/subfm170217/
Libellé de l’événement: 50%
Vous pouvez le rendre encore plus polyvalent grâce aux dimensions personnalisées et aux statistiques personnalisées.
Résumé
C’était (espérons-le) une astuce simple pour vous aider à suivre le lecteur Mixcloud. Avec une API JavaScript robuste, c’est vraiment facile à faire.
L’API JavaScript Mixcloud fonctionne avec des promesses, de sorte que l’approche fonctionnelle présentée dans la balise HTML personnalisée peut sembler désordonnée, et en tant que telle, il y a place à l’amélioration via la refactorisation.
Si vous avez plus d’un widget sur la page que vous souhaitez suivre, vous devrez dupliquer le code correspondant pour chaque joueur sur la page. Par example:
... var player = document.querySelector('#myPlayer'); var player2 = document.querySelector('#myPlayer2'); ... if (player) { player.ready.then(function() { ... }); } if (player2) { player2.ready.then(function() { ... }); } ... Amusez-vous à écouter et à suivre ces pistes !
