Ako v GTM správne odmerať HTML5 audio prehrávač

Máš na webe audio prehrávač a chceš vedieť, či ho ľudia naozaj používajú? V tomto článku ti ukážem, ako pomocou Google Tag Manager a Google Analytics 4 správne odmerať interakcie s HTML5 audio prehrávačom: play, pause, progress percentá aj dokončenie prehrávania.

Dôležité: Tento postup funguje iba pre audio prehrávače, ktoré nie sú vložené cez iFrame a používajú štandardnú HTML značku <audio>.

Čo budeme merať?

play: spustenie prehrávania
pause: pozastavenie prehrávania
finished: dokončenie celého audio záznamu
Progress %: percentuálny postup (každých 10 %)

Krok 1: Custom HTML tag s meracím kódom

V GTM vytvor nový tag typu Custom HTML a vlož do neho nasledujúci kód:

(function() {
  var divisor = 10;
  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;
          dataLayer.push({
            'event': 'audio',
            'audioPlayerAction': 'Progress %' +
              audios_status[e.target.id].greatest_marker,
            'audioTitle': decodeURIComponent(
              e.target.currentSrc.split('/').pop())
          });
        }
        break;
      case 'play':
        dataLayer.push({
          'event': 'audio',
          'audioPlayerAction': 'play',
          'audioTitle': decodeURIComponent(
            e.target.currentSrc.split('/').pop())
        });
        break;
      case 'pause':
        dataLayer.push({
          'event': 'audio',
          'audioPlayerAction': 'pause',
          'audioTitle': decodeURIComponent(
            e.target.currentSrc.split('/').pop()),
          'audioValue': audios_status[e.target.id].current
        });
        break;
      case 'ended':
        dataLayer.push({
          'event': 'audio',
          'audioPlayerAction': 'finished',
          'audioTitle': decodeURIComponent(
            e.target.currentSrc.split('/').pop())
        });
        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] = {
      greatest_marker: 0,
      _progress_markers: {},
      current: 0
    };
    for (var j = 0; j < 100; j++) {
      audios_status[audioTagId]._progress_markers[
        divisor * Math.floor(j / divisor)] = false;
    }
    audios[i].addEventListener('play',       eventHandler, false);
    audios[i].addEventListener('pause',      eventHandler, false);
    audios[i].addEventListener('ended',      eventHandler, false);
    audios[i].addEventListener('timeupdate', eventHandler, false);
  }
})();

Krok 1.1: JavaScript premenná na detekciu prehrávača

Aby sa tag spúšťal iba na stránkach, kde audio prehrávač existuje, vytvor novú premennú typu Custom JavaScript:

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

Pomenuj ju js – audio player je na stránke.

Krok 1.2: DOM Ready trigger

Vytvor trigger typu DOM Ready s podmienkou:

Premenná: js – audio player je na stránke
Operátor: equals
Hodnota: true

Tento trigger priradí Custom HTML tagu. Spustí sa až po načítaní DOM a iba ak prehrávač na stránke je.

Krok 2: Custom Event Trigger a premenné dátovej vrstvy

Vytvor trigger typu Custom Event s názvom udalosti: audio

Potom vytvor dve premenné Data Layer Variable:

audioPlayerAction: akcia (play, pause, finished, Progress %10…)
audioTitle: názov súboru zo src URL

Krok 3: GA4 Event tag

Vytvor nový tag typu Google Analytics: GA4 Event:

Event name: audio_interaction
Trigger: Custom Event: audio
Event parameters:
- action → premenná audioPlayerAction
- audio_title → premenná audioTitle

Krok 4: Testovanie v GTM Preview

Zapni Preview mód v GTM
Navštív stránku s audio prehrávačom
Klikni Play, potom Pause
V GTM Preview skontroluj, či sa spustil Custom HTML tag pri DOM Ready
Skontroluj, či sa po kliknutí Play objaví Custom Event audio s hodnotou audioPlayerAction = play
Overuj udalosti aj priamo v GA4 cez DebugView

Záver

Len skopírovaním kódu a pár úpravami v GTM meriame interakcie s audio prehrávačom. Dáta z GA4 ti potom povedia, koľko percent poslucháčov dosiahne 50 %, 75 % alebo 100 % prehrávania. Je to cenná informácia pre tvorbu obsahu.

Ak chceš toto meranie nasadiť na viacero webov naraz, celú konfiguráciu vieš preniesť cez export a import GTM kontajnera.