GTM skript měření scrollingu, co funguje i pro single page aplikace Marek Lecián Webový analytik

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>

// (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>

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