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
<script> // (bonus) Part1: HTML INIT on .* event with prioprity one per page var pagescroll ={}; pagescrollinit(); // call for reset scroll in SPA function pagescrollinit(){ pagescroll = { min: 0.42, // measure only if doc have more than 2 pages of viewport. // yes 42 sc50: false, // scroll 50% sc90: false, // scroll 90% sc2pg: false, // scroll 2 viewports sclstop: 0, }; pagescrollinit2()}; function pagescrollinit2(){ pagescroll.DocSize = Math.round(SCViewportHeight() / SCDocHeight() * 10) / 10; // viewport / doc Height pagescroll.DocSizeName = SCViewportHeight() / SCDocHeight() < pagescroll.min ? "long-doc" : "too-small"; pagescroll.DocPages = Math.round(SCDocHeight() / SCViewportHeight()); // how many viewports is long webpage pagescroll.DocCP = Math.round(100*SCCurrentPosition() / SCDocHeight())/100; // current position in % pagescroll.TooSmall=(SCViewportHeight() / SCDocHeight() > pagescroll.min);} // the page is too short to scroll function SCDocHeight() { return void 0 !== document.height ? document.height : document.body.offsetHeight; } function SCCurrentPosition() { var e = "CSS1Compat" === (document.compatMode || ""); return parseInt(void 0 !== window.pageXOffset ? window.pageYOffset : e ? document.documentElement.scrollTop : document.body.scrollTop, 10) + parseInt(SCViewportHeight(), 10); } function SCViewportHeight() { return "number" == typeof window.innerHeight ? a = window.innerHeight : document.documentElement && document.documentElement.clientHeight ? a = document.documentElement.clientHeight : document.body && document.body.clientHeight && (a = document.body.clientHeight); } // (bonus) Part2: on GA pageview callback window.onscroll = function() { pagescrollinit2(); if (SCViewportHeight() / SCDocHeight() > pagescroll.min) {pagescroll.TooSmall = !0;} else { pagescroll.TooSmall = !1; var e = SCCurrentPosition() > pagescroll.sclstop ? !0 : !1; // the direction of scrolling pagescroll.sclstop = SCCurrentPosition(); var sc50 = SCCurrentPosition() >= 0.5 * SCDocHeight() ? !0 : !1, // scroll 50% sc90 = SCCurrentPosition() >= 0.9 * SCDocHeight() ? !0 : !1, // scroll 90% sc2pg = SCCurrentPosition() >= 2 * SCViewportHeight() ? !0 : !1; // scroll page 2 e && (sc50 && !pagescroll.sc50 && (window.dataLayer.push({event:"Scroll",eventAction:"50 %"}), pagescroll.sc50 = !0), sc90 && !pagescroll.sc90 && (window.dataLayer.push({event:"Scroll",eventAction:"90 %" }), pagescroll.sc90 = !0), sc2pg && !pagescroll.sc2pg && (window.dataLayer.push({event:"Scroll-2page"}), pagescroll.sc2pg = !0) ); } }; </script>
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:
<script>pagescrollinit()</script>
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é.