Rubriky
Blog o webové analytice

GTM skript měření scrollingu, co funguje i pro single page aplikace

Proč jsem si to naprogramoval sám?

  • Mám kolem sebe SPA (Single page aplikace), kde prostě klasický scroll nefunguje. Načte se jedenkrát a tím to hasne. Nejde řídit.
  • Nechci Jquery, protože je za mě dneska už zbytečná a mám rád vanilku bez závislostí.
  • Nechci žádný balast jako jsou kódy pro super staré GA classic etc. jen čisté GTM.
  • Nechci odeslat scroll více jak jedenkrát za danou vzdálenost na stránce, tedy pokud nechci.
  • Odesílám si event interactive jen pokud uživatel přescrolluje. alespoň celou jednu stránku, u příliš malých stránek ani scroll nezapnu, protože stránka je příliš malá.
  • Chci mí data délce stránky v počtu viditelný obrazovek etc

Kód se skládá ze dvou částí… úvodní nastavení + reset hodnot a samotná funkce měřením scrollu. Pokud přejdu na novou virtuální stránku, stačí když odešlu po načtení stránky reset (funkce „pagescrollinit()“) a mám hotovo skript měří i když mám single page aplikaci, co nemění URL ani znova nenačítá celou stránku. Samozřejmě lze znovu odpálit celý skript a tím to také resetovat. Skript měří 50% a 90% scroll a scroll přes celou první stránku, kterým ruším bounce rate. Skript je tvořen pro přehlednost a minimalismus, ano jde rozšířit třeba pro značku na 25%  či 75% , stačí jenom okopírovat pár kousků kódu. Můžete si to zkusit sami.

Měřící skript

Proměnná s daty

Jak je vidět na následujícím obrázku, vše je pěkně dostupne přes javascript a můžete si s tím hrát a co je hlavní číst z toho hodnoty.

K proměnným se dostanete i z GTM, stačí použít klasickou GTM proměnnou javascriptu. Pro příklad „pagescroll.DocPages“ a ta dle obrázku v tomto případě vrátí hodnotu 5, která říká, že délka stránky uživatele je 5 viewportu(obrazovek).

Co bude výstup?

event: „Scroll-2page“ pro zobrazení druhé stránky.

a měření vzdálenosti v procentech

event:“Scroll“ a eventAction:“90 %“ pro vzdálenost 90% stránky.

Mám to ověřené?

Ano provozuji to přes rok na několika webech.

Další triky

Skript si můžete rozdělit i na více častí viz poznámka „(bonus)“ a spustit ho první část ještě před odesláním pageview a odeslat si s pageview do GA obohacená o příznak (GA metriku) jestli se jedná o příliš malou stránku a jak dlouhá je stránka v počtech obrazovek.

A druhou část si spustit až GA pageview callback a tak zaručit, že nikdy nebude scroll dříve, než se odešle GA pageview.

Mimalistický reset scrollu je pak:

Naschvál jsem dal příznaky hloubky scrollu do jednotlivých proměnných, takže se můžete kdykoliv zeptat jestli „pagescroll.sc90“ je True a nemusíte si procházet mapu eventů a v tom hledat a zjišťovat aktuální stav, což v kombinaci s SPA je docela drsné.

 

.