Rubriky
Blog o webové analytice

Vlastní časovač měřící opravdový strávený čas na stránce s dynamickou délkou dle obsahu. GTM + GA

Co jsem chtěl?

Změřit čas na obsahové stránce, tak abych mohl říci, že si uživatelé obsah opravdu přečetli. Samozřejmě se jedná o skript v Google tag manageru.

Požadované vlastnosti:

  • Začít měřit jen na načtené stránce (DOM ready), když uživatel stránku opravdu vidí.
  • Měřit reálný čas, který vidí uživatel stránku. Z toho plyne využití document.visibilityState a listeneru visibilitychange.
  • Chtěl jsem délku času měnit podle délky textu. Toho jsem chtěl využít pro definici kvalitně přečteného článku.

Spouštěč (GTM trigger) pro HTML script.

Spouští se jen když uživatel má načtený obsah stránky a vidí ji.

Všechny eventy  .* + zaškrtněte Use regex matching Jelikož mám ve stránce dost GTM eventů, tak mi stačí jen tohle pravidlo. U některých stránek bude potřeba přidat listener na změnu visibility.
Pravidlo:
gtm.dom equals true (Proměnná gtm.dom je dataLayer proměnná s jménem „gtm.dom“)
js.document.visibilityState equals visible Je javascript proměnná document.visibilityState (support 96.16%)s nastavením Convert undefined to notsupport  . Pro ostatní prohlížeče můžete udělat GTM triger Timer 30sec a stejně ho pojmenovat a dát podmínku naopak, se spustí na hodnotu notsupport.

 

Co ten dělá?

Spustí se jen na stránce, co je načtena na úrovni DOM a zároveň je stránka ve focus okně (spoušteč). Okno není zobrazeno do dalšího tabu prohlížeče a uživatel ho opravdu vidí.

Na začátku je nastavení:

var TimerDynamicSetting = {
      count: 0, // Kolikrát byl časovač spuštěn
      repeat: 2,  // Kolikrát se časovač má opakovat
      active: 1, // Je aktuálně časovač aktivní?
      customtime: 10000 // Jaká je minimální hodnota časovače v milisekundách.
    }

Pak následuje kód pro měření počtu slov a výpočet délky čtení obsahu.

Ten funguje tak, že pokud je na stránce obsahová stránka Proměnná {{dl.pagePostType2}} obsahující frázi single- .
Tuto proměnnou jsem získal z WordPress pluginu na GTM co mám velmi rád DuracellTomi’s Google Tag Manager for WordPress a doporučuji ho. Tato podmínka jde udělat i přes jinak, či tento obsah můžete smazat a nastavit čas v časovači na pevno.
Jinak se zde počítá, že rychlý čtenář zvládne 228 slov za minutu a já budu chtít aby touto rychlostí přečetl minimálně čtvrtinu obsah a to přičtu k minimálnímu času strávenému na stránce.
document.querySelector("#main") Je obecný selektor hlavního obsah pro wordpress.
Obecně toto je místo pro kreativitu.

  try {
    if ({{dl.pagePostType2}}.includes("single-")) {
      TimerDynamicSetting.customtime = TimerDynamicSetting.customtime + Math.floor((document.querySelector("#main")
.innerText.replace(/(^\s*)|(\s*$)/gi, "")
.replace(/[ ]{2,}/gi, " ").replace(/\n /, "\n")
.split(' ').length / 228) * 60 * 0.25) * 1000;
    }
  } catch (e) {;};

Pak už v kódu nasleduje kód pro nastavení a spuštění časovače s funkce pause a resume.
Pak je kód hlídající změny visibilityState.
Nakonec registrace hlídacích funkcí.

Celý kód časovače měřícího čas na viditelné stránce pak vypadá následovně:

<script>var TimerDynamicSetting = {
      count: 0,
      repeat: 2, 
      active: 1, // Is timmer active?
      customtime: 10000 // Minimum timer time in seconds
    },
    TimerDynamicvar;

 // Setting time according to content length
 // dl.pagePostType2 - WordPress variable from 
  try {
    if ({{dl.pagePostType2}}.includes("single-")) {
      TimerDynamicSetting.customtime = TimerDynamicSetting.customtime + Math.floor((document.querySelector("#main")
.innerText.replace(/(^\s*)|(\s*$)/gi, "")
.replace(/[ ]{2,}/gi, " ").replace(/\n /, "\n")
.split(' ').length / 228) * 60 * 0.25) * 1000;
    }
  } catch (e) {;};

  //Timer with pause and resume function
  function TimerDynamic(d, e) {
    var a, b, c = e;
    this.pause = function() {
      window.clearTimeout(a);
      c -= new Date - b;
    };
    this.resume = function() {
      b = new Date;
      window.clearTimeout(a);
      a = window.setTimeout(d, c);
    };
    this.resume();
  }

  function TimerDynamicStart() {
    TimerDynamicSetting.active = 1;
    TimerDynamicvar = new TimerDynamic(function() {
      TimerDynamicSetting.count += 1;
      TimerDynamicSetting.active = 0;
      window.dataLayer.push({
        event: "TimerDynamic",
        "TimerDynamic.count": TimerDynamicSetting.count,
        "TimerDynamic.repeat": TimerDynamicSetting.repeat,
        "TimerDynamic.customtime": TimerDynamicSetting.customtime * 0.001
      });
      clearTimeout(TimerDynamicvar);
      TimerDynamicSetting.count < TimerDynamicSetting.repeat && TimerDynamicStart();
    }, TimerDynamicSetting.customtime);
  }

  function handleVisibilityChangeForTimmer() {
    "hidden" == document.visibilityState ? 1 === TimerDynamicSetting.active && TimerDynamicvar.pause() : (window.dataLayer.push({
      event: "visibilityChange.on"
    }), 1 === TimerDynamicSetting.active && TimerDynamicvar.resume());
  }
  TimerDynamicStart();
  document.addEventListener("visibilitychange", handleVisibilityChangeForTimmer, !1);</script>

Tento kód se vloží do GTM značky typu HTML, nastaví se spustit 1x za stránku a přidá se k němu daný spouštěč.

A takhle vypadá zmenšená verze o stejně funkčnosti, ale poloviční velikosti:

var TimerDynamicSetting = {count:0, repeat:2, active:1, customtime:10000}, TimerDynamicvar;
try {{{dl.pagePostType2}}.includes("single-") && (TimerDynamicSetting.customtime += 1000 * Math.floor(document.querySelector("#main").innerText.replace(/(^\s*)|(\s*$)/gi, "").replace(/[ ]{2,}/gi, " ").replace(/\n /, "\n").split(" ").length / 228 * 15));} catch (b) {}
function dynamictimer(f){var a,b,c=TimerDynamicSetting.customtime;this.pause=function(){window.clearTimeout(a);c-=new Date-b};this.resume=function(){b=new Date;window.clearTimeout(a);a=window.setTimeout(f,c)};this.resume()}
function DynamicTimerStart(){TimerDynamicSetting.active=1;TimerDynamicvar=new dynamictimer(function(){TimerDynamicSetting.count+=1;TimerDynamicSetting.active=0;window.dataLayer.push({event:"TimerDynamic","TimerDynamic.count":TimerDynamicSetting.count,"TimerDynamic.repeat":TimerDynamicSetting.repeat,"TimerDynamic.customtime":.001*TimerDynamicSetting.customtime});clearTimeout(TimerDynamicvar);TimerDynamicSetting.count<TimerDynamicSetting.repeat&&DynamicTimerStart()})}DynamicTimerStart();
document.addEventListener("visibilitychange",function(){"hidden"==document.visibilityState?1===TimerDynamicSetting.active&&TimerDynamicvar.pause():(window.dataLayer.push({event:"visibilityChange.on"}),1===TimerDynamicSetting.active&&TimerDynamicvar.resume())},!1);

Kde to používám já?

Pokud je uživatel na článku a strávit tam takto definovaný čas, k tomu se dostatečně hýbe v rámci noidle time a viděl konec stránky, tak prohlásím, že uživatel dostatečně dobře přečetl obsah a odešlu si transakci s ecom defincí článku do Google analytics.

.