Rubriky
Blog o webové analytice

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

GTM scrolling spa

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).

scroll promenna GTM

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é.

 

.