Stäng Huvudmeny

Exakt metod för att spåra page scroll [jQuery hack]

Just do it Webbutveckling

Vi är mitt uppe i arbetet med en ny episk Conversionista plattform och i den processen undersöker vi självklart en hel del olika funktioner som potentiellt ska få ta plats på den nya siten.

En lösning som vår utvecklare, Pedro, har tagit fram, tror vi att många av er skulle kunna ha nytta utav – så vad bättre än att dela med oss av den här?

Har du inte koll på programmering är det här kanske väl avancerat men låt oss förklara lite snabbt varför du borde föreslå den här lösningen till ditt utvecklar-team:

Idén kom ursprungligen från att vi ville återskapa den progress bar som bl.a. Hubspot använder sig av i sin blogg.

 


 

”Det kan väl inte vara så svårt” tänker kanske ni.

Problematiken låg i att vi inte bara ville basera scroll-mätningen på vilka element som laddades in på sidan, utan vad betraktaren faktiskt såg på sidan.

Det finns en hel del lösningar för hur du tar reda på hur mycket användaren har scrollat, men ingen av de tar hänsyn till element så som header och footer, samtidigt som de tar med användarens perspektiv i beräkningarna.

 

Så varför är det här ett problem?

För oss fyller funktionen att korrekt kunna spåra hur användarna scrollar på sidan 2 huvudsakliga syften:

 

    1. Sätta upp mål och events

    Att sätta upp mål baserat på hur mycket av innehållet en användare har läst kan användas till mycket. Exempelvis så kan du ha det med i beräkningarna när du sätter upp processer för lead scoring, eller personaliserar innehåll baserat på vad användaren tidigare har läst på sidan.

    Om ni inte har möjlighet att göra en liknande implementering som oss så hittar ni Simo Ahava’s metod för att spåra content med enhanced ecommerce HÄR – en bra alternativ lösning för dig som vill förstå hur användare konsumerar innehåll i ex. en blogg.

     

    2. Aktivera innehåll på scroll

    Ni har precis producerat riktigt grymt innehåll till er site och vill passa på att fånga leads bland de som läser texten. Ni tänker att det vore perfekt att ha ett formulär som aktiveras precis när användaren läst en specifik del av innehållet.

    Att trigga innehåll baserat på scroll är inga konstigheter – men när man inte har tillgång till exakta värden blir det lätt en gissningslek.

    Med lite otur kan formuläret/pop-up fönstret/inforutan triggas på ett rent utsagt olämpligt ställe, och sudda ut möjligheten för att fånga användarens epost.

 

Kort och gott är en bra metod för tracking av scroll en förutsättning för att kunna sätta upp riktigt bra automatisering på er site.

Så med problematiken på plats, låt oss övergå till lite utvecklarlingo.

 
 

Så här löste vi problemet

Med en specifikation över den lösningen vi var ute efter på papper var det mycket lättare att kolla på det ur en analytisk synvinkel och att göra beräkningarna på hur vi skulle kunna lösa det.

Eftersom att vår blogg använder jQuery så verkade rimligt att fortsätta i samma riktning.

 
 
 

WAI Aria

Eftersom att syftet i grunden var att skapa en progress bar så ville vi att den skulle uppfylla villkoren för WAI Aria (Web Accessibility Initiative – Accessible Rich Internet Applications), valet föll på HTML5-elementet <progress>

<progress class="progress reading-progress" aria-hidden="true"></progress>

 

Att definiera variablerna på vår sida

Vi utgår från storleken på vår header och lägger till 100px av padding/marginal till dess att själva innehållet är synligt.

const articleStart = $("main").offset().top + 100;

Vi vill sedan definiera 45% av sidhöjden, där majoriteten av användare tittar på innehåll när de scrollar (baserat på egna eyetracking test)

const readingPosition = $(window).height() * 0.45;

Efter det måste vi definiera var vårt innehåll slutar, för bloggposter är det precis ovanför kommentarsfältet.

const footerStart = $("#comments").offset().top - (readingPosition + 250);

 

Så till matematiken:

const counterStart  = articleStart - readingPosition;
const counterMax = footerStart - readingPosition;
const distance 	= counterMax - counterStart;

Vi använder i uträkningen konstanter (const) för att definer värderna, dessa kommer att vara unika och kommer inte att ändras.

Det är inte fallet för den sista raden, som definerar den faktiska positionen för användarens blick.

let scrollTop = $(window).scrollTop();

 

Funktionen

Med alla värden på plats kan vi påbörja en enkel IF/ELSE funktion.

function calculateProgress() {
	scrollTop = $(window).scrollTop();
	let progressMax = scrollTop / distance;
	if (scrollTop > counterStart) {
		if (progressMax > 1) {
			$('.reading-progress').val(1); // If the user scrolls past the comments it would set a value bigger than 1.
		}
		else {
			$('.reading-progress').val(progressMax);
		}
	}
}

Det var allt. Nu behöver du bara köra funktionen när en användare scrollar på sidan.

$(document).on('scroll', calculateProgress);

Det här scriptet laddar efter det att sidan har laddats till fullo, så att du inte får fel estimeringar för innehållet.

 

Hur du kan använda de här i ditt optimeringsarbete

Med allt på plats kan du använda samma script för att aktivera andra script – använd bara värdet progressMax. Om du exempelvis vill ha ett formulär (#signup) för att fånga leads som visas efter att användaren scrollat 47% av innehållet och lägga till en custom cookie i samband med det, så behöver du bara lägga till en till IF-function till scriptet och definiera CSS-klasserna.

Det skulle se ut då här:

function calculateProgress() {
	scrollTop = $(window).scrollTop();
	let progressMax = scrollTop / distance;
	if ( scrollTop > counterStart ) {
		if ( progressMax > 1 ) {
			$('.reading-progress').val(1); // If the user scrolls past the comments it would set a value bigger than 1.
		}
		else {
			$('.reading-progress').val(progressMax);
		}
		if ( progressMax > 0.47 ) {
			$('#signup').addClass('slideInUp');
			document.cookie = "Has seen the signup form";
		}
	}
}

SlideInUp är en CSS klass som finns defineriad i Animate.CSS biblioteket.

 

Bekymmer med prestanda

Ytterligare en sak som vi behöver tänka på är scriptet kommer att aktiveras varje gång som användaren scrollar på sidan, och beroende på hur mycket kod du har skrivit, och hur mycket som redan finns på sidan så kan det komma att påverka prestandan.

Det bästa sättet att undkomma detta är att applicera en ”Throttle” på eventet, istället för att aktivera varje sekund så kan du sätta ett 100 millisekunders fönster och öka prestandan med 10,000%

Här nedan hittar du en demo från CSS Tricks över hur skillnaden ser ut:

Allt du behöver är ett 1 kb javascript som laddas efter ditt jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

Och, istället för att trigga funktionen på varje scroll som vi gjorde nyss så kan du göra det med throttle eventet:

$("document").on('scroll', ( $.throttle( 100, calculateProgress ) ) );

 
Så! Det var det.

Följer ni instruktionerna har ni alltså en grym metod för att mäta page scroll på er sida – något som inte bara kan generera en snygg progress bar, utan användas för att samla värdefulla insikter om hur era besökare rör sig på sajten, och konsumerar innehåll.

 


Om Pedro

Frågor om webbutveckling? (Och Wordpress i synnerhet) Pedro is your guy. När han inte knappar kod, eller stöttar Conversionista-teamet med implementation av A/B-tester, så förser han oss med episk Brasiliansk BBQ under våra AW's. Grym resurs att ha på kontoret m.a.o.

Comments