Temps utilisateur - Suivi Web (ga.js)

Ce document fournit un guide complet sur l'utilisation de la méthode _trackTiming.

Présentation

Des études ont montré que réduire le temps de chargement d'une page améliore l'expérience utilisateur globale sur un site. Google Analytics propose un certain nombre de rapports performants qui suivent automatiquement le temps de chargement des pages. Mais que se passe-t-il si vous souhaitez suivre le temps nécessaire au chargement d'une ressource particulière ?

Par exemple, le chargement d'une bibliothèque JavaScript populaire prend-il trop de temps, ce qui nuit à l'expérience de certains utilisateurs ?

Les temps utilisateur vous permettent de répondre à cette question en offrant une méthode native pour suivre une période donnée dans Google Analytics.

Pour voir un exemple fonctionnel, consultez l'exemple de code concernant le temps utilisateur.

Configurer le temps utilisateur

Pour collecter des données de temps utilisateur, vous devez utiliser la méthode _trackTiming, qui envoie des données temporelles à Google Analytics.

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

Où les paramètres représentent les éléments suivants:

Paramètres Valeur Obligatoire Résumé
category string oui Chaîne permettant de catégoriser toutes les variables de temps utilisateur en groupes logiques afin de faciliter la création de rapports. Par exemple, vous pouvez utiliser la valeur jQuery si vous suivez le temps nécessaire pour charger cette bibliothèque JavaScript spécifique.
variable string oui Chaîne indiquant le nom de l'action de la ressource suivie. Par exemple, vous pouvez utiliser la valeur JavaScript Load si vous souhaitez suivre le temps nécessaire pour charger la bibliothèque JavaScript jQuery. Notez que les mêmes variables peuvent être utilisées dans plusieurs catégories afin de suivre la durée d'un événement commun à ces catégories, comme Javascript Load et Page Ready Time, etc.
time number oui Nombre de millisecondes écoulées pour créer un rapport dans Google Analytics. S'il faut 20 millisecondes pour charger la bibliothèque jQuery, vous devez envoyer la valeur 20.
opt_label string no Chaîne permettant de visualiser le temps utilisateur dans les rapports avec plus de flexibilité. Vous pouvez également utiliser les libellés pour vous concentrer sur différents sous-tests pour la même combinaison de catégories et de variables. Par exemple, si nous avons chargé jQuery à partir du réseau de diffusion de contenu Google, nous utilisons la valeur de Google CDN.
opt_sampleRate number no Nombre permettant de remplacer manuellement le pourcentage de visiteurs dont les appels temporels sont envoyés à Google Analytics. La valeur par défaut est identique à celle utilisée pour la collecte des données générales sur la vitesse du site. Elle est basée sur un pourcentage de visiteurs. Par exemple, si vous souhaitez effectuer le suivi des appels _trackTiming pour 100% des visiteurs, vous devez utiliser la valeur 100. Notez que chaque appel est comptabilisé dans la limite générale de 500 appels par session.

Haut de page

Suivi du temps passé

Lorsque vous utilisez la méthode _trackTiming, vous spécifiez le nombre de millisecondes passées dans le paramètre time. C'est donc à vous, en tant que développeur, d'écrire le code permettant de capturer cette période. Pour ce faire, le moyen le plus simple consiste à créer un horodatage au début d'une période et à créer un autre horodatage à la fin de la période. Vous pouvez ensuite prendre la différence entre les deux horodatages pour obtenir le temps passé.

Voici un exemple simple:

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']);
}

Pour récupérer l'horodatage de début, créez un objet Date et obtenez l'heure en millisecondes. Ensuite, la fonction setTimeout permet d'appeler la fonction myCallback en 200 millisecondes. Une fois la fonction de rappel exécutée, le code temporel endTime est récupéré en créant un objet Date. Ensuite, la différence entre les heures de fin et de début est calculée pour calculer le temps passé. Enfin, le temps passé est envoyé à Google Analytics.

Cet exemple est simple, mais illustre le concept de suivi du temps. Prenons un exemple plus réaliste.

Haut de page

Suivi du temps de chargement d'une ressource JavaScript

À l'heure actuelle, de nombreux sites incluent des bibliothèques JavaScript tierces ou demandent des données via des objets JSON. Même si votre site peut charger ces ressources rapidement chez eux, leur chargement peut être très lent pour les utilisateurs situés dans d'autres pays. Ces ressources qui se chargent lentement peuvent nuire à l'expérience des utilisateurs internationaux.

La fonctionnalité de temps utilisateur "Vitesse du site" peut vous aider à collecter et à signaler le temps de chargement de ces ressources.

Voici un exemple simple montrant comment suivre le temps passé par une fonction qui charge des ressources JavaScript de manière asynchrone:

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.
};

Notez que cet exemple est très semblable à l'exemple précédent.

Dans cet exemple, loadJs est une fonction utilitaire qui charge des ressources JavaScript en créant dynamiquement un élément de script et en l'associant au DOM du navigateur. La fonction accepte deux paramètres: une URL en tant que chaîne et une fonction de rappel qui sera exécutée une fois le script chargé.

Dans loadJs, un horodatage de début est stocké dans startTime. Une fois la ressource chargée, la fonction de rappel est exécutée. Dans la fonction de rappel, le code temporel de fin est récupéré et utilisé pour calculer le temps nécessaire pour charger la ressource JavaScript. Ce temps passé est envoyé à Google Analytics à l'aide de la méthode _trackTiming.

En appelant ce qui suit:

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

Charge de manière asynchrone la bibliothèque jQuery à partir du réseau de diffusion de contenu Google, puis exécute la fonction de rappel, qui envoie à son tour le temps de chargement de la ressource à Google Analytics.

Haut de page

Utiliser plusieurs temps utilisateur

Supposons que vous souhaitiez charger plusieurs ressources JavaScript à l'aide du code ci-dessus. Étant donné que la variable startTime est globale, la variable startTime est écrasée chaque fois que vous suivez le début d'une période, ce qui génère un temps de trajet incorrect.

Il est donc recommandé de gérer une instance unique des heures de début et de fin pour chaque ressource que vous souhaitez suivre.

Notez également que les paramètres de catégorie et de variable pour _trackTiming sont codés en dur. Ainsi, si vous utilisez loadJs pour charger plusieurs ressources, vous ne pourrez pas distinguer chaque ressource dans les rapports Google Analytics.

Ces deux problèmes peuvent être résolus en stockant les paramètres de minutage et _trackTiming dans un objet JavaScript.

Créer un objet JavaScript pour stocker les temps utilisateur

Voici un objet JavaScript simple qui permet de stocker les données de temps utilisateur pour chaque ressource suivie:

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;
}

Nous pouvons maintenant utiliser cet objet pour que loadJs fonctionne pour plusieurs requêtes.

Envoyer des temps utilisateur stockés

Maintenant que nous pouvons stocker les données temporelles pour chaque ressource que nous voulons suivre, voici comment mettre à jour loadJs afin de l'utiliser:

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.
}

Le code ci-dessus commence par créer un objet TrackTiming dans lequel la catégorie, la variable et le libellé facultatif sont transmis au constructeur. L'objet TrackTiming est ensuite transmis en tant que paramètre à la fonction loadJs.

Dans loadJs, la méthode startTime est appelée pour obtenir et stocker l'horodatage de début.

Dans l'exemple précédent, la fonction de rappel pouvait facilement accéder à la variable startTime, car elle était globale. Maintenant que startTime fait partie de l'objet TrackTiming, nous devons trouver un moyen de transmettre cet objet de la fonction loadJs à la fonction de rappel.

Pour résoudre ce problème, une stratégie consiste à ajouter l'objet TrackTiming en tant que propriété de l'élément de script. Étant donné que la fonction de rappel est exécutée à partir de la méthode de script onload, le rappel reçoit un objet d'événement en tant que paramètre. Cet objet d'événement peut ensuite être utilisé pour récupérer l'objet de script d'origine qui a déclenché l'événement. Cet objet de script peut à son tour être utilisé pour accéder à notre objet TrackTiming.

Une fois que nous pouvons accéder à l'objet TrackTiming d'origine, le script peut mettre fin à l'heure et envoyer les données.

Regardez une démonstration en ligne de cet exemple sur notre site d'exemples.

Ce modèle qui consiste à ajouter l'objet TrackTiming en tant que propriété de l'objet suivi tend à fonctionner correctement pour suivre d'autres mécanismes de chargement asynchrones tels que l'utilisation de l'objet XMLHttpRequest.

Haut de page

Suivi des XMLHttpRequests

Une autre méthode courante pour charger les ressources de page Web de manière asynchrone consiste à utiliser l'objet XMLHttpRequest. Le temps nécessaire au chargement de ces ressources peut également être suivi à l'aide de la méthode _trackTiming et de l'objet TimeTracker.

Voici un exemple qui charge le fichier de devis à partir du serveur.

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.
    }
  }
}

Cet exemple ressemble beaucoup à l'exemple loadJs. Regardez la démonstration en direct.

Haut de page

Éviter d'envoyer des données erronées

Dans les exemples ci-dessus, pour obtenir le temps passé, le code soustrait l'heure de fin de l'heure de début. Cela fonctionne généralement bien tant que l'heure de début est antérieure à l'heure de fin. Toutefois, cela peut poser un problème si l'heure dans le navigateur change. Si l'utilisateur modifie l'heure de sa machine après l'heure de début, des données incorrectes peuvent être envoyées à Google Analytics. L'envoi d'une grande valeur incorrecte présente un gros problème, car cela fausse vos métriques moyenne et totale.

Il est donc généralement recommandé de s'assurer que le temps passé est supérieur à 0 et inférieur à un certain temps avant d'envoyer les données à Google Analytics. Nous pouvons modifier la méthode d'envoi TimeTracker ci-dessus pour effectuer cette vérification:

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;
}

Remplacer le taux d'échantillonnage et débogage

La méthode _trackTiming n'envoie des données à Google Analytics qu'à la même fréquence pour toutes les métriques de vitesse du site collectées par Google Analytics. Par défaut, ce paramètre est défini sur 1% de l'ensemble des visiteurs.

Pour les sites qui génèrent un trafic important, la valeur par défaut ne devrait pas poser de problèmes. En revanche, pour les sites peu fréquentés, vous pouvez augmenter le taux d'échantillonnage en définissant le paramètre facultatif de taux d'échantillonnage. Exemple : 

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

Collecte les données _trackTiming auprès de 50% des visiteurs.

Vous pouvez également définir la méthode _setSiteSpeedSampleRate afin de définir le taux d'échantillonnage pour tous les temps de chargement du site, y compris la méthode _trackTiming. Par exemple:

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

Collecte également les données _trackTiming auprès de 50% des visiteurs.

En règle générale, lorsque vous testez et validez une mise en œuvre Google Analytics, le trafic vers le site que vous testez est très faible. Il est donc généralement utile d'augmenter le taux d'échantillonnage à 100% lors des tests.

Haut de page

Suivi d'autres événements temporels

Bien que l'ensemble de l'exemple ci-dessus se concentre sur l'utilisation de la méthode _trackTiming pour suivre le temps nécessaire au chargement des ressources, cette méthode peut également être utilisée pour suivre des durées générales. Par exemple, vous pouvez effectuer le suivi des éléments suivants:

  • Temps qu'un visiteur passe à regarder une vidéo.
  • Temps nécessaire pour terminer un niveau dans un jeu.
  • Temps qu'un visiteur passe à lire une section d'un site Web.

Dans chacun de ces cas, vous pouvez réutiliser le même objet JavaScript TimeTracker présenté ci-dessus pour simplifier la collecte et l'envoi des données sur le temps passé à Google Analytics.