FAI DECOLLARE LA TUA WEB ANALYTICS. CON GOOGLE TAG MANAGER.

Le guide e i video tutorial gratuiti di Matteo Zambon, autore del libro "GTM per chi inizia"

Guida Avanzata: tracciare lo Scrolling di una pagina con Google Tag Manager

come-tracciare-lo-scrolling-di-una-pagina-con-google-tag-manager

Ormai abbiamo capito che grazie a Google Tag Manager siamo in grado di tracciare tutti i comportamenti degli utenti in un sito internet, anche i più improbabili o curiosi. Uno di questi è sicuramente l’evento Scroll del mouse.

Tracciare in quali pagine gli utenti “Scrollano” di più, ed addirittura sapere quanto hanno scrollato, può essere molto interessante ed utile per capire la qualità dei contenuti delle pagine e la loro propensione a creare interesse negli utenti.

Ecco come installare il monitoraggio dello Scrolling nelle pagine, con Google Tag Manager naturalmente.

PS: Lo script di tracciamento si basa sul framework javascript di jQuery, quindi dovresti installarlo nel sito (se hai wordpress è già incluso 😛 ).

Step 1 Crea il Tag Scroll Event

Come prima cosa crea un nuovo Tag per attivare l’evento Scroll. In Google Tag Manager seleziona quindi Tag > Nuovo.

Scegli prodotto: “Tag HTML personalizzato”
In Configura Tag incolla il seguente codice (oppure vai in fondo all’articolo, troverai il link):

Attenzione: alla fine dello script devi inserire il codice: jQuery(function() { jQuery.scrollDepth(); });

<script>
;(function ( $, window, document, undefined ) {

"use strict";

var defaults = {
minHeight: 0,
elements: [],
percentage: true,
userTiming: true,
pixelDepth: true,
nonInteraction: true,
gaGlobal: false,
gtmOverride: false
};

var $window = $(window),
cache = [],
scrollEventBound = false,
lastPixelDepth = 0,
universalGA,
classicGA,
gaGlobal,
standardEventHandler;

$.scrollDepth = function(options) {

var startTime = +new Date;

options = $.extend({}, defaults, options);

// Return early if document height is too small
if ( $(document).height() < options.minHeight ) {
return;
}

if (options.gaGlobal) {
universalGA = true;
gaGlobal = options.gaGlobal;
} else if (typeof ga === "function") {
universalGA = true;
gaGlobal = 'ga';
} else if (typeof __gaTracker === "function") {
universalGA = true;
gaGlobal = '__gaTracker';
}

if (typeof _gaq !== "undefined" && typeof _gaq.push === "function") {
classicGA = true;
}

if (typeof options.eventHandler === "function") {
standardEventHandler = options.eventHandler;
} else if (typeof dataLayer !== "undefined" && typeof dataLayer.push === "function" && !options.gtmOverride) {

standardEventHandler = function(data) {
dataLayer.push(data);
};
}

function sendEvent(action, label, scrollDistance, timing) {

if (standardEventHandler) {

standardEventHandler({'event': 'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventValue': 1, 'eventNonInteraction': options.nonInteraction});

if (options.pixelDepth && arguments.length > 2 && scrollDistance > lastPixelDepth) {
lastPixelDepth = scrollDistance;
standardEventHandler({'event': 'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': 'Pixel Depth', 'eventLabel': rounded(scrollDistance), 'eventValue': 1, 'eventNonInteraction': options.nonInteraction});
}

if (options.userTiming && arguments.length > 3) {
standardEventHandler({'event': 'ScrollTiming', 'eventCategory': 'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventTiming': timing});
}

} else {

if (universalGA) {

window[gaGlobal]('send', 'event', 'Scroll Depth', action, label, 1, {'nonInteraction': options.nonInteraction});

if (options.pixelDepth && arguments.length > 2 && scrollDistance > lastPixelDepth) {
lastPixelDepth = scrollDistance;
window[gaGlobal]('send', 'event', 'Scroll Depth', 'Pixel Depth', rounded(scrollDistance), 1, {'nonInteraction': options.nonInteraction});
}

if (options.userTiming && arguments.length > 3) {
window[gaGlobal]('send', 'timing', 'Scroll Depth', action, timing, label);
}

}

if (classicGA) {

_gaq.push(['_trackEvent', 'Scroll Depth', action, label, 1, options.nonInteraction]);

if (options.pixelDepth && arguments.length > 2 && scrollDistance > lastPixelDepth) {
lastPixelDepth = scrollDistance;
_gaq.push(['_trackEvent', 'Scroll Depth', 'Pixel Depth', rounded(scrollDistance), 1, options.nonInteraction]);
}

if (options.userTiming && arguments.length > 3) {
_gaq.push(['_trackTiming', 'Scroll Depth', action, timing, label, 100]);
}

}

}

}

function calculateMarks(docHeight) {
return {
'25%' : parseInt(docHeight * 0.25, 10),
'50%' : parseInt(docHeight * 0.50, 10),
'75%' : parseInt(docHeight * 0.75, 10),
// Cushion to trigger 100% event in iOS
'100%': docHeight - 5
};
}

function checkMarks(marks, scrollDistance, timing) {
// Check each active mark
$.each(marks, function(key, val) {
if ( $.inArray(key, cache) === -1 && scrollDistance >= val ) {
sendEvent('Percentage', key, scrollDistance, timing);
cache.push(key);
}
});
}

function checkElements(elements, scrollDistance, timing) {
$.each(elements, function(index, elem) {
if ( $.inArray(elem, cache) === -1 && $(elem).length ) {
if ( scrollDistance >= $(elem).offset().top ) {
sendEvent('Elements', elem, scrollDistance, timing);
cache.push(elem);
}
}
});
}

function rounded(scrollDistance) {
// Returns String
return (Math.floor(scrollDistance/250) * 250).toString();
}

function init() {
bindScrollDepth();
}

// Reset Scroll Depth with the originally initialized options
$.scrollDepth.reset = function() {
cache = [];
lastPixelDepth = 0;
$window.off('scroll.scrollDepth');
bindScrollDepth();
};

// Add DOM elements to be tracked
$.scrollDepth.addElements = function(elems) {

if (typeof elems == "undefined" || !$.isArray(elems)) {
return;
}

$.merge(options.elements, elems);

// If scroll event has been unbound from window, rebind
if (!scrollEventBound) {
bindScrollDepth();
}

};

// Remove DOM elements currently tracked
$.scrollDepth.removeElements = function(elems) {

if (typeof elems == "undefined" || !$.isArray(elems)) {
return;
}

$.each(elems, function(index, elem) {

var inElementsArray = $.inArray(elem, options.elements);
var inCacheArray = $.inArray(elem, cache);

if (inElementsArray != -1) {
options.elements.splice(inElementsArray, 1);
}

if (inCacheArray != -1) {
cache.splice(inCacheArray, 1);
}

});

};

function throttle(func, wait) {
var context, args, result;
var timeout = null;
var previous = 0;
var later = function() {
previous = new Date;
timeout = null;
result = func.apply(context, args);
};
return function() {
var now = new Date;
if (!previous) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(later, remaining);
}
return result;
};
}

function bindScrollDepth() {

scrollEventBound = true;

$window.on('scroll.scrollDepth', throttle(function() {

var docHeight = $(document).height(),
winHeight = window.innerHeight ? window.innerHeight : $window.height(),
scrollDistance = $window.scrollTop() + winHeight,

// Recalculate percentage marks
marks = calculateMarks(docHeight),

// Timing
timing = +new Date - startTime;

// If all marks already hit, unbind scroll event
if (cache.length >= options.elements.length + (options.percentage ? 4:0)) {
$window.off('scroll.scrollDepth');
scrollEventBound = false;
return;
}

// Check specified DOM elements
if (options.elements) {
checkElements(options.elements, scrollDistance, timing);
}

// Check standard marks
if (options.percentage) {
checkMarks(marks, scrollDistance, timing);
}
}, 500));

}

init();

};

})( jQuery, window, document );
jQuery(function() { jQuery.scrollDepth(); });

</script>

Nello step successivo, scegli dove attivare questo Tag, io ho scelto di attivarlo in tutte le pagine.

Crea il Tag nominandolo “Scroll Event”.

Step 2 Visualizza in Anteprima

Attiva ora la modalità Visualizzazione in Anteprima e vai nel tuo sito web. Scrollando, vedrai comparire dei nuovi eventi sulla colonna sinistra della finestra relativa all’Anteprima che appare in fondo alla pagina. Questi nuovi eventi sono “ScrollDistance” e “ScrollTiming”. Come puoi vedere, nella scheda “Data Layer”, sono presenti una serie di Variabili che includono delle informazioni riguardo lo scroll. Andremo ora ad estrarre queste Variabili.

tracciare-scroll-visualizza-in-anteprima

Step 3 Crea le Variabili

Torna in Google Tag Manager, vai nella sezione Variabili e clicca su Nuova.
Scegli tipo: “Variabile di livello dati”
Nome variabile di livello dati: “eventCategory”
Versione livello dati: “Versione 2”.
Salva la Variabile e nominala “eventCategory”.

Segui lo stesso procedimento per creare le variabili “eventAction” ed “eventLabel”.

variabile-event-category

Step 4 Crea l’Attivatore

Vai su Attivatori, dal menu a sinistra di Google Tag Manager, e clicca su “Nuovo”

Scegli evento: “Evento personalizzato”
Allo step 2, Attiva su, inserisci come Nome evento: ScrollDistance

Questo non è altro che il nome dell’evento che hai visto prima nella Visualizzazione in Anteprima.

Salva l’Attivatore e nominalo “ScrollDistance Event”.

attivatore-scrolldistance-event

Step 5 Crea un nuovo Tag

Crea ora un nuovo Tag.

Scegli il prodotto: “Google Analytics”
Scegli un tipo di tag: “Universal Analytics”
ID monitoraggio: inserisci il tuo codice di monitoraggio di Analytics oppure la variabile{{gaID}}, se l’hai creata
Tipo di monitoraggio: “Evento”
Categoria: “{{eventCategory}}”
Azione: “{{eventAction}}”
Etichetta: “{{eventLabel}}”
Hit da non interazione: “False”

Clicca su “Continua” e, nell’ultima sezione “Attiva su” seleziona l’Attivatore “ScrollDistance Event” che hai creato allo step 4. Salva il tag nominandolo “GA – Event – Scroll”.

tag-evento-scroll

Ora è proprio tutto. Non ti resta che controllare il corretto funzionamento delle modifiche implementate, nuovamente con la modalità Visualizzazione in Anteprima. Se tutto funziona, puoi pubblicare con il tasto rosso “Pubblica”.

Se andrai a visualizzare, ora, gli eventi in Google Analytics vedrai comparire anche questi relativi agli Scroll degli utenti potendo monitorare anche la percentuale di scrolling per ogni evento (25%, 50%, 75%, 100%).

Prova ad implementare questa funzionalità molto interessante, se dovessi riscontrare problemi scrivimi pure commentando qui sotto. Buon Tag!

Fonte codice: https://github.com/robflaherty/jquery-scrolldepth/blob/fe381fa7eb7b9b5c1a638d6d9821ba605f442284/jquery.scrolldepth.js

8 commenti su “Guida Avanzata: tracciare lo Scrolling di una pagina con Google Tag Manager

  1. Ciao Matteo,
    Prima di tutto complimenti, le tue guide sono molto chiare ed efficaci.
    Solo una domanda, una volta che decido di implementare il tag su tutte le pagine, su Analytics, mi dirà precisamente su quale pagina gli utenti hanno fatto uno scroll del 25% ecc..?
    Ti ringrazio

    • Ciao Gianmarco,

      troverai degli eventi che ti indicano quei valori 🙂

  2. ciao, ho lette in giro che c’e’ un modo anche per tracciare lo scrolling in base a dei punti fissi della pagina, ad es. ancore inserite nella pagina stessa. hai qualche riferimento per questo caso?

    • Ciao Dario,
      prova a dare un occhio al sito dell’autore, mi sembra ci siano dei parametri configurabili: http://scrolldepth.parsnip.io/.
      E’ anche probabile che esistano altri framework js più dettagliati su questa tua esigenza, ma al momento non saprei consigliarti esattamente. Nel caso lo trovassi fammelo sapere che aggiorno l’articolo inserendo la tua alternativa.

      A presto!

  3. ciao, molto utile e appena implementato… sarebbe bello pero’ avere qualche riferimento anche per creare un report che consenta la lettura dei dati… suggerimenti??

  4. Ciao Matteo,
    grazie mille per la guida: da poco abbiamo creato una nuova pagina nel sito aziendale ed è abbastanza lunga, questa funzionalità ci servirà parecchio.
    La funzionalità è stata appena creata da me, quando potrò vedere l’evento in Analytics? 24-48 ore?
    Grazie ancora e a presto!

    • Ciao Alessandro. Su rapporti in tempo reale li vedi subito nella sezione eventi. Il resto lo vedi dopo 24 ore. A presto!

Hai ancora qualche dubbio? Chiedi pure qui sotto, sarò pronto a risponderti!

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Schermata dashboard Club Tag Manager Italia

Entra GRATIS nel Club Tag Manager Italia!

Ho riaperto temporaneamente le iscrizioni al Club: il posto – l’unico posto – dove puoi accedere a TUTTI i miei materiali avanzati (ore e ore di roba).

In aggiunta, nel Club rispondo a tutte le tue domande in un gruppo di Facebook riservato ai membri!

Richiedi subito il tuo PASS GRATUITO di 60 giorni per provare senza impegno il Club Tag Manager Italia!