Můžete si nainstalovat nějáký divoký MP3 přehrávač do webu.
Bude zpomalovat každou stránku webu bude dělat problém s vykreslením, cashe a mimifikací.
Nebo můžete použít HTML5 audio prohlížeče, dle https://www.w3schools.com/html/html5_audio.asp
Ano tohle jsem si napsal jednoduše, protože jsem to potřeboval. Žádný wordpress plugin mě neuspokojoval, zpomalovali web, nešli zapnout jen na vyraných stránkách. A jelikož jsem GTM geek tak jsem to chtěl přes něj. Tohle je výsledek co se mi líbí a funguje. Není závislý na obsahu či jiné externí knihovně. Vycházel jsem ze skriptu od David Vallejo na měření HTML5 videa. Stačilo pár uprav a doladění k obrazu svému a skript se během chviky naučil měřit HTML5 audio. Jde to udělat i přímo vložením jednoduchých skriptů do stránky jako u toho návodu, ale to se mi moc nelíbilo. Další cizí knihovny a embeded playery jsem nechtěl, ať z důvodů dalšího načítání či špatného měření nebo horšího označení přes rich snippets. Pokud bych měl možnost mezi výběrem HTML5 a embeded playerem tak si vyberu raději HTML5. Ve vlastním playeru si mohu nastavit stahování souboru, jde pěkně nastylovat, cokoliv se stane je to na mojí straně, funkčnost je minimálně závislá na dalších třetích stranách, nemám pak na webu další nebezpečný Js třetím strany a co hůře od neznámého vývojáře. Všechny dnešní prohlížeče mají plnou podporu HTML5 přehrávače.
Ukázka kódu HTML5 audio přehrávače:
Pokud se na to zadíváte není to nic těžkého.
Ukázka funkčního HTML5 audio přehravače je:
Samotný obsah HTML značky do GTM:
<script>
//
// Google tag manager tracking for HTML5 Audio
// https://www.w3schools.com/html/html5_audio.asp
// Marek Lecian - Creative Commons Attribution-ShareAlike 4.0 International - 08.10.2018
//
(function () {
var divisor = 25;
var audios_status = {};
function eventHandler(e) {
switch (e.type) {
case 'timeupdate':
audios_status[e.target.id].current = Math.round(e.target.currentTime);
var pct = Math.floor(100 * audios_status[e.target.id].current / e.target.duration);
for (var j in audios_status[e.target.id]._progress_markers) {
if (pct >= j && j > audios_status[e.target.id].greatest_marker) {
audios_status[e.target.id].greatest_marker = j;
}
}
if (audios_status[e.target.id].greatest_marker && !audios_status[e.target.id]._progress_markers[audios_status[e.target.id].greatest_marker]) {
audios_status[e.target.id]._progress_markers[audios_status[e.target.id].greatest_marker] = true;
window.dataLayer.push({
'event': 'audio',
'eventCategory': 'audio',
'eventAction': audios_status[e.target.id].greatest_marker + '%',
'eventLabel': decodeURIComponent(e.target.currentSrc),
'eventValue': 0,
'eventNonInteraction': false
});
}
break;
case 'play':
window.dataLayer.push({
'event': 'audio',
'eventCategory': 'audio',
'eventAction': 'play',
'eventLabel': decodeURIComponent(e.target.currentSrc),
'eventValue': 0,
'eventNonInteraction': false
});
break;
case 'pause':
window.dataLayer.push({
'event': 'audio',
'eventCategory': 'audio',
'eventAction': 'pause',
'eventLabel': decodeURIComponent(e.target.currentSrc),
'eventValue': audios_status[e.target.id].current,
'eventNonInteraction': false
});
break;
case 'ended':
window.dataLayer.push({
'event': 'audio',
'eventCategory': 'audio',
'eventAction': '100%',
'eventLabel': decodeURIComponent(e.target.currentSrc),
'eventValue': 1,
'eventNonInteraction': false
});
break;
default:
break;
}
}
var audios = document.getElementsByTagName('audio');
for (var i = 0; i < audios.length; i++) {
var audioTagId;
if (!audios[i].getAttribute('id')) {
audioTagId = 'html5_audio_' + Math.random().toString(36).slice(2);
audios[i].setAttribute('id', audioTagId);
} else {
audioTagId = audios[i].getAttribute('id');
}
audios_status[audioTagId] = {};
audios_status[audioTagId].greatest_marker = 0;
audios_status[audioTagId]._progress_markers = {};
for (j = 0; j < 100; j++) {
audios_status[audioTagId].progress_point = divisor * Math.floor(j / divisor);
audios_status[audioTagId]._progress_markers[audios_status[audioTagId].progress_point] = false;
}
audios_status[audioTagId].current = 0;
audios[i].addEventListener("play", eventHandler, false);
audios[i].addEventListener("pause", eventHandler, false);
audios[i].addEventListener("ended", eventHandler, false);
audios[i].addEventListener("timeupdate", eventHandler, false);
audios[i].addEventListener("ended", eventHandler, false);
}
})();
</script>Spouštění pravidlo
Buď všechny stránky nebo jak já, jen stránky obsahující v cestě slovo podcast.
Odchytávání eventů v GTM Google analytics značkou:
Stačí použít klasický univerzální autotrack značku událostí Google analytics. Klasicky pojmenované proměnné dataLayeru.
Líbílo se vám to?
Napište mi na sociálních sítích…