Tempi utente - Monitoraggio web (ga.js)

Questo documento fornisce una guida completa su come utilizzare il metodo _trackTiming.

Introduzione

Alcuni studi hanno dimostrato che ridurre il tempo necessario per il caricamento di una pagina migliora l'esperienza utente complessiva di un sito. Google Analytics offre una serie di report efficaci che monitorano automaticamente il tempo di caricamento delle pagine. Ma cosa succede se vuoi monitorare il tempo necessario per il caricamento di una determinata risorsa?

Ad esempio, il caricamento di una libreria JavaScript popolare richiede troppo tempo, riducendo l'esperienza sul sito per determinati utenti?

I tempi utente ti consentono di rispondere a questa domanda fornendo un modo nativo per monitorare un periodo di tempo in Google Analytics.

Per un esempio funzionante, consulta il codice campione di Tempi utenti.

Impostazione dei tempi utente

Per raccogliere i dati relativi ai tempi utente, devi utilizzare il metodo _trackTiming, che invia dati temporali a Google Analytics.

_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);

Dove i parametri rappresentano:

Parametro Valore Obbligatorio Riepilogo
category string yes Una stringa per classificare tutte le variabili dei tempi utente in gruppi logici per semplificare la generazione di report. Ad esempio, potresti utilizzare il valore jQuery se monitori il tempo necessario per caricare la libreria JavaScript specifica.
variable string yes Una stringa per indicare il nome dell'azione della risorsa monitorata. Ad esempio, potresti utilizzare il valore di JavaScript Load se vuoi monitorare il tempo necessario per caricare la libreria JavaScript di jQuery. Tieni presente che le stesse variabili possono essere utilizzate in più categorie per monitorare la sincronizzazione di un evento comune a queste categorie, ad esempio Javascript Load e Page Ready Time e così via.
time number yes Il numero di millisecondi di tempo trascorso per la segnalazione a Google Analytics. Se il caricamento della libreria jQuery ha richiesto 20 millisecondi, dovresti inviare il valore 20.
opt_label string no Una stringa che può essere utilizzata per una maggiore flessibilità nella visualizzazione dei tempi utente nei report. Le etichette possono essere utilizzate anche per concentrarti su diversi esperimenti secondari per la stessa combinazione di categoria e variabile. Ad esempio, se caricassimo jQuery dalla rete CDN (Content Delivery Network) di Google, utilizzeremo il valore Google CDN.
opt_sampleRate number no Un numero per eseguire manualmente l'override della percentuale di visitatori i cui hit temporali vengono inviati a Google Analytics. Il valore predefinito è impostato sullo stesso numero della raccolta dei dati sulla velocità generale del sito e si basa su una percentuale di visitatori. Pertanto, se volessi monitorare gli hit _trackTiming per il 100% dei visitatori, dovrai utilizzare il valore 100. Tieni presente che ciascun hit viene conteggiato nel limite generale di 500 hit per sessione.

Torna all'inizio

Monitoraggio del tempo di utilizzo

Quando utilizzi il metodo _trackTiming, specifichi la quantità di millisecondi spesi nel parametro time. Spetta quindi a te, in qualità di sviluppatore, scrivere codice per acquisire questo periodo di tempo. Il modo più semplice per farlo è creare un timestamp all'inizio di un periodo di tempo e un altro timestamp alla fine del periodo. Quindi puoi ricavare la differenza tra i due timestamp per calcolare il tempo di utilizzo.

Ecco un esempio banale:

var startTime = new Date().getTime();

setTimeout(myCallback, 200);

function myCallback(event) {

  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;

  _gaq.push(['_trackTiming', 'Test', 'callback_timeout', timeSpent, 'animation']);
}

Il timestamp di inizio viene recuperato creando un nuovo oggetto Date e ricavando il tempo in millisecondi. Successivamente, la funzione setTimeout viene utilizzata per chiamare la funzione myCallback in 200 millisecondi. Una volta eseguita la funzione di callback, il timestamp endTime viene recuperato creando un nuovo oggetto Date. In seguito, viene calcolata la differenza tra l'ora di fine e l'ora di inizio per ottenere il tempo speso. Infine il tempo speso viene inviato a Google Analytics.

Questo esempio è banale, ma illustra il concetto di come rilevare il tempo. Diamo un'occhiata a un esempio più realistico.

Torna all'inizio

Monitoraggio del tempo impiegato per il caricamento di una risorsa JavaScript

Oggi molti siti includono librerie JavaScript di terze parti o richiedono dati tramite oggetti JSON. Anche se il tuo sito potrebbe caricare rapidamente queste risorse a casa, le stesse risorse potrebbero caricarsi molto lentamente per gli utenti di altri paesi. Queste risorse che si caricano lentamente possono ridurre l'esperienza sul sito per gli utenti internazionali.

La funzionalità Tempistiche utenti per la velocità del sito può aiutarti a raccogliere e segnalare il tempo necessario per il caricamento di queste risorse.

Ecco un semplice esempio che mostra come monitorare il tempo speso di una funzione che carica in modo asincrono le risorse JavaScript:

var startTime;

function loadJs(url, callback) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  var s = document.getElementsByTagName('script')[0];

  js.onload = callback;
  startTime = new Date().getTime();

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;
  _gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN']);

  // Library has loaded. Now you can use it.
};

Tieni presente che questo esempio è molto simile all'esempio precedente.

In questo esempio, loadJs è una funzione di utilità che carica risorse JavaScript creando dinamicamente un elemento script e collegandolo al DOM del browser. La funzione accetta due parametri: un URL come stringa e una funzione di callback che verrà eseguita dopo che lo script è stato caricato.

All'interno di loadJs, un timestamp di inizio è archiviato in startTime. Una volta caricata la risorsa, viene eseguita la funzione di callback. Nella funzione di callback, il timestamp di fine viene recuperato e utilizzato per calcolare il tempo necessario per caricare la risorsa JavaScript. Questo tempo trascorso viene inviato a Google Analytics utilizzando il metodo _trackTiming.

Pertanto, chiamando il numero:

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);

Verrà caricata in modo asincrono la libreria jQuery dalla rete CDN (Google Content Delivery) di Google e, al termine, verrà eseguita la funzione di callback, che a sua volta invia il tempo di caricamento della risorsa a Google Analytics.

Torna all'inizio

Lavorare con più tempi utente

Supponiamo che tu voglia caricare più risorse JavaScript utilizzando il codice riportato sopra. Poiché la variabile startTime è globale, ogni volta che monitori l'inizio di un periodo di tempo, la variabile startTime verrà sovrascritta, generando il tempo speso sbagliato.

Come best practice, devi quindi mantenere un'istanza univoca dell'ora di inizio e di fine per ogni risorsa che vuoi monitorare.

Nota inoltre che i parametri di categoria e variabile per _trackTiming sono hardcoded. Pertanto, se utilizzi loadJs per caricare più risorse, non potrai distinguere ogni risorsa nei report di Google Analytics.

Entrambi i problemi possono essere risolti memorizzando i parametri di temporizzazione e _trackTiming in un oggetto JavaScript.

Creazione di un oggetto JavaScript per l'archiviazione dei tempi utente.

Ecco un semplice oggetto JavaScript che può essere utilizzato per archiviare i dati dei tempi utente per ogni risorsa monitorata:

function TrackTiming(category, variable, opt_label) {
  this.category = category;
  this.variable = variable;
  this.label = opt_label ? opt_label : undefined;
  this.startTime;
  this.endTime;
  return this;
}

TrackTiming.prototype.startTime = function() {
  this.startTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.endTime = function() {
  this.endTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;
  window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  return this;
}

Ora possiamo utilizzare questo oggetto per far funzionare loadJs per più richieste.

Invio dei tempi utente memorizzati

Ora che abbiamo a disposizione un modo per archiviare i dati delle tempistiche per ogni risorsa che vogliamo monitorare, ecco come aggiornare loadJs per utilizzarla:

var tt = new TrackTiming('jQuery', 'Load Library', 'Google CDN');

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, myCallback, tt);

function loadJs(url, callback, tt) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  js.onload = callback;
  var s = document.getElementsByTagName('script')[0];

  tt.startTime();
  js.tt = tt;

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  target.tt.endTime().send();

  // Library has loaded. Now you can use it.
}

Il codice riportato sopra inizia con la creazione di un nuovo oggetto TrackTiming in cui la categoria, la variabile e l'etichetta facoltativa vengono trasmesse al costruttore. L'oggetto TrackTiming viene quindi passato come parametro alla funzione loadJs.

All'interno di loadJs, il metodo startTime viene chiamato per recuperare e archiviare il timestamp di inizio.

Nell'esempio precedente, la funzione di callback ha potuto accedere facilmente alla variabile startTime perché era globale. Ora che startTime fa parte dell'oggetto TrackTiming, dobbiamo trovare un modo per passare questo oggetto dalla funzione loadJs alla funzione di callback.

Per risolvere questo problema, una strategia consiste nell'aggiungere l'oggetto TrackTiming come proprietà all'elemento script. Poiché la funzione di callback viene eseguita dal metodo di script onload, al callback viene passato un oggetto evento come parametro. Questo oggetto evento può quindi essere utilizzato per recuperare l'oggetto script originale che ha attivato l'evento e questo oggetto script può essere a sua volta utilizzato per accedere all'oggetto TrackTiming.

Una volta che possiamo accedere all'oggetto TrackTiming originale, lo script può terminare l'ora e inviare i dati.

Guarda una demo dal vivo di questo esempio sul nostro sito dedicato.

Questo pattern di aggiunta dell'oggetto TrackTiming come proprietà dell'oggetto monitorato tende a funzionare bene nel monitoraggio di altri meccanismi di caricamento asincroni come l'utilizzo dell'oggetto XMLHttpRequest.

Torna all'inizio

Monitoraggio di XMLHttpRequest

Un altro modo comune per caricare in modo asincrono le risorse della pagina web è utilizzare l'oggetto XMLHttpRequest. Il tempo necessario per caricare queste risorse può essere monitorato anche utilizzando il metodo _trackTiming e l'oggetto TimeTracker.

Ecco un esempio che carica il file di preventivi dal server.

var url = ‘//myhost.com/quotes.txt’;
var tt = new TrackTime('xhr demo', 'load quotes');

makeXhrRequest(url, myCallback, tt);

function makeXhrRequest(url, callback, tt) {
  if (window.XMLHttpRequest) {
    var xhr = new window.XMLHttpRequest;
    xhr.open('GET', url, true);
    xhr.onreadystatechange = callback;

    tt.startTime();
    xhr.tt = tt;

    xhr.send();
  }
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  if (target.readyState == 4) {
    if (target.status == 200) {

      target.tt.endTime().send();

      // Do something with the resource.
    }
  }
}

Questo esempio è molto simile all'esempio loadJs. Guarda la demo dal vivo qui.

Torna all'inizio

Evitare di inviare dati errati

Negli esempi precedenti, per ottenere il tempo speso, il codice sottrae l'ora di fine dall'ora di inizio. Questa operazione in genere funziona bene purché l'ora di inizio sia inferiore a quella di fine. Tuttavia, può diventare un problema se l'ora nel browser cambia. Se l'utente cambia l'ora della macchina dopo l'ora di inizio impostata, potrebbero essere inviati dati errati a Google Analytics. Un grosso problema con l'invio di un valore elevato è che danneggerà le metriche medie e totali.

Pertanto, è generalmente consigliabile assicurarsi che il tempo speso sia maggiore di 0 e inferiore a un determinato periodo di tempo prima di inviare i dati a Google Analytics. Possiamo modificare il metodo di invio TimeTracker indicato sopra per eseguire questo controllo:

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;

  var hourInMillis = 1000 * 60 * 60;

  if (0 < timeSpent && timeSpent < hourInMillis) {
    window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  }

   return this;
}

Override della frequenza di campionamento e debug

Il metodo _trackTiming invia dati a Google Analytics alla stessa velocità per tutte le metriche di velocità del sito raccolte da Google Analytics. Per impostazione predefinita, il valore è pari all'1% di tutti i visitatori.

Per i siti con una grande quantità di traffico, l'impostazione predefinita è accettabile. Tuttavia, per i siti con meno traffico, puoi aumentare la frequenza di campionamento impostando il parametro facoltativo della frequenza di campionamento. Ad esempio: 

_gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN', 50]);

Raccoglierà dati _trackTiming dal 50% dei visitatori.

In alternativa, puoi impostare il metodo _setSiteSpeedSampleRate per impostare la frequenza di campionamento per tutti i tempi di velocità del sito, incluso il metodo _trackTiming. Ad esempio:

_gaq.push([‘_setSiteSpeedSampleRate’, 50]);

Raccoglierà anche dati _trackTiming dal 50% dei visitatori.

In genere, quando testi e verifichi un'implementazione di Google Analytics il traffico sul sito sottoposto a test è molto ridotto. Pertanto, in genere è utile aumentare la frequenza di campionamento al 100% durante il test.

Torna all'inizio

Monitoraggio di altri eventi temporali

Sebbene tutti gli esempi precedenti si concentrino sull'utilizzo del metodo _trackTiming per monitorare il tempo necessario per caricare le risorse, questo metodo può essere utilizzato anche per monitorare le durate generali. Ad esempio, puoi monitorare:

  • Il tempo che un visitatore trascorre a guardare un video.
  • Il tempo necessario per completare un livello in un gioco.
  • Il tempo che un visitatore trascorre leggendo una sezione di un sito web.

In ognuno di questi casi puoi riutilizzare lo stesso oggetto JavaScript TimeTracker presentato in precedenza per semplificare la raccolta e l'invio del tempo trascorso i dati a Google Analytics.