Menu

Hvordan sette opp Scroll Tracking på nettsiden din?

Krister Ross 9 år ago 0 82
5 min

Scroll Tracking er en målemetode som måler hvor langt ned på en side på ditt nettsted brukeren leser. Det vil si, vi måler når brukeren scroller nedover, og hvor langt ned brukeren scroller. 

Dette kan gi innsikt i om hvor mye lest innholdet vårt er, blant mange andre ting. Medier som Dagbladet og VG benytter slik teknologi når de analyserer atferd på enkeltvise artikkelsider og navigasjonssider.

Scroll Tracking er dessverre ikke noe som kommer standard i Google Analytics. Derfor skal jeg vise steg for steg, hvordan du kan sette dette opp på din egen side. Når jeg skriver denne artikkelen, så har jeg heller ikke dette på min side, så jeg kommer til å sette opp dette samtidig for min egen side, mens jeg skriver. 

Jeg benytter veiledningen som Justin Cutroni (Google Analytics Evangelist) har satt opp på sin blogg.

 

 

seksjoner av siden

I bilde over ser du forsiden til krister-ross.com.

Siden er her delt inn i 3 forskjellige farger. Scroll trackingen kommer til å fungere litt som vist på bildet, der det registreres en handling/event når scrollingen passerer hver farge.

  • Først registerer Scroll trackingen at siden er åpnet. 
  • Så registrerer Scroll Trackingen at brukeren har begynt å lese, ved å scrolle nedover.
  • Deretter registrerer Scroll Trackingen at brukeren har kommet til slutten av innholdet. 
  • Til slutt så registrerer Scroll Trackingen at brukeren har scrollet gjennom hele siden og har nådd bunnen av siden.

Cutroni har laget en rapport basert på hva han har registrert på sin side.

cutroni_report

Copyright Justin Cutroni Cutroni.com

Scroll Tracking koden (hentet fra Cutroni.com)

Ettersom oppsettet her benytter seg av “Custom Dimension” (skreddersydde dimensjoner), er denne informasjonen kun tilgjengelig gjennom “Custom Reports” (Skreddersydde Rapporter) eller “Custom Dashboards” (Paneler).

Husk at det er ikke bare å kopiere koden som står her, du er også nødt til å sette opp de skreddersydde dimensjonene for at dette skal fungere.

Implementering av kode

  1. Slå av Debugging. Denne vil bli triggerhappy på grunn av dette oppsettet.
  2. Forberedelse: Finn ut hvor langt du ønsker de forskjellige stegene skal være. Hvor langt ned skal brukeren scrolle, før du registrerer det.
  3. Spesifiser hvor slutten av innholdet er. Dette er ganske viktig!
    Spesifiser klassen på div’en hvor innholdet ditt er lokalisert. 
  4. Sett koden helt til slutt i HTML koden.
  5. Opprett Custom Dimension for side i Google Analytics. Ta vare på index.
    custom_dimension_scroll
  6. Opprett Custom Metrics for “Endtime”, “ScrollTime” og “TotalTime”.
    custom_metrics_scroll
  7. Jeg pleier å lage konstanter og variabler først, av samtlige custom dimensions og metrics, for å ha litt mer lesbart innhold i taggen, samt at oppsettet av taggen går kjappere.
    tagoppsett_scrollVed å bruke previewfunksjonen til Google Tag Manager, får du også hentet ut hva som kommer av verdier og variabler i dataLayer, når du tester dette ut. Her får du kontrollsjekket det du skal legge inn i variabler og konstanter.
    scrollmonitor_preview
  8. Til slutt tester du, og setter opp rapport i Google Analytics basert på det du nå har satt opp. Et lite tips, du kan også bruke calculated metrics (anslåtte/kalkulerte beregninger) i rapporten, med tanke på scrollrate osv.

Koden jeg har brukt:

Jeg har latt “universal analytics-koden være kommentert ut i scriptet, i tilfelle du ønsker å benytte denne koden uten Google Tag Manager, men bare med Universal. Du er da nødt til å endre innoldet i kallene bare, til å passe til din side.

<!– GTM ScrollMonitor V1.0 – Krister Melandsø Ross
krister-ross.com
–>

<script>
jQuery(function($) {
// Debug flag
var debugMode = false;

// Default time delay before checking location
var callBackTime = 100;

// # px before tracking a reader
var readerLocation = 150;

// Set some flags for tracking & execution
var timer = 0;
var scroller = false;
var endContent = false;
var didComplete = false;

// Set some time variables to calculate reading time
var startTime = new Date();
var beginning = startTime.getTime();
var totalTime = 0;

// Get some information about the current page
var pageTitle = document.title;

// Track the aticle load
if (!debugMode) {
  dataLayer.push({
  ‘event’ : ‘ScrollMonitor’,
  ‘reading’ : ‘ArticleLoaded’,
  ‘page’ : pageTitle,
});
   //ga(‘send’, ‘event’, ‘Reading’, ‘ArticleLoaded’, pageTitle, {‘nonInteraction’: 1});
} else {
   //alert(‘The page has loaded. Woohoo.’);
}

// Check the location and track user
function trackLocation() {
bottom = $(window).height() + $(window).scrollTop();
height = $(document).height();

// If user starts to scroll send an event
if (bottom > readerLocation && !scroller) {
  currentTime = new Date();
  scrollStart = currentTime.getTime();
  timeToScroll = Math.round((scrollStart – beginning) / 1000);
if (!debugMode) {
  dataLayer.push({
  ‘event’ : ‘ScrollMonitor’,
  ‘reading’ : ‘StartReading’,
  ‘page’ : pageTitle,
  ‘scrollTime’ : timeToScroll,
});
   //ga(‘send’, ‘event’, ‘Reading’, ‘StartReading’, pageTitle, timeToScroll, {‘metric1’ : timeToScroll});
} else {
   //alert(‘started reading ‘ + timeToScroll);
}
scroller = true;
}

// If user has hit the bottom of the content send an event
if (bottom >= $(‘.td-post-content’).scrollTop() + $(‘.td-post-content’).innerHeight() && !endContent) {
  currentTime = new Date();
  contentScrollEnd = currentTime.getTime();
  timeToContentEnd = Math.round((contentScrollEnd – scrollStart) / 1000);
if (!debugMode) {
  if (timeToContentEnd < 60) {
    dataLayer.push({
    ‘event’ : ‘ScrollMonitor’,
    ‘reading’ : ‘Scanner’,
    ‘page’ : pageTitle,
  });
//ga(‘set’, ‘dimension5’, ‘Scanner’);
} else {
  dataLayer.push({
  ‘event’ : ‘ScrollMonitor’,
  ‘reading’ : ‘Reader’,
  ‘page’ : pageTitle,
});
//ga(‘set’, ‘dimension5’, ‘Reader’);
}
dataLayer.push({
  ‘event’ : ‘ScrollMonitor’,
  ‘reading’ : ‘ContentBottom’,
  ‘page’ : pageTitle,
  ‘endtime’ : timeToContentEnd
});
   // ga(‘send’, ‘event’, ‘Reading’, ‘ContentBottom’, pageTitle, timeToContentEnd, {‘metric2’ : timeToContentEnd});
} else {
   //alert(‘end content section ‘+timeToContentEnd);
}
endContent = true;
}

// If user has hit the bottom of page send an event
if (bottom >= height && !didComplete) {
  currentTime = new Date();
  end = currentTime.getTime();
  totalTime = Math.round((end – scrollStart) / 1000);
    if (!debugMode) {
    dataLayer.push({
    ‘event’ : ‘ScrollMonitor’,
    ‘reading’ : ‘PageBottom’,
    ‘page’ : pageTitle,
    ‘totalTime’ : totalTime
  });
   //ga(‘send’, ‘event’, ‘Reading’, ‘PageBottom’, pageTitle, totalTime, {‘metric3’ : totalTime});
} else {
   // alert(‘bottom of page ‘+totalTime);
}
didComplete = true;
}
}

// Track the scrolling and track location
$(window).scroll(function() {
if (timer) {
 clearTimeout(timer);
}

// Use a buffer so we don’t call trackLocation too often.
timer = setTimeout(trackLocation, callBackTime);
});
});
</script>
<!– ScrollMonitor End –>

Dette er første gangen jeg har satt opp dette for Google Tag Manager. Legg gjerne igjen en kommentar om det er noe du lurer på.

Find this content useful? Share it with your friends!
Written By

I en årrekke har Krister jobbet med bedrifter og organisasjoner i alle størrelser, små lokale til store internasjonale. Helt siden gutterommet har interessen ligget på psykologi og teknologi, hvilket har kulminert i hans lidenskap; optimalisering av nettsteder. En god fredagskveld for Krister, kan inneholde en god italiensk vin og Google Analytics.

Leave a Reply

Leave a Reply

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *