Nutzertimings – Web-Tracking (ga.js)

Dieses Dokument enthält eine umfassende Anleitung zur Verwendung der Methode _trackTiming.

Einleitung

Studien haben gezeigt, dass eine kürzere Ladezeit einer Seite die Nutzerfreundlichkeit einer Website verbessert. Google Analytics bietet eine Reihe leistungsstarker Berichte, die die Seitenladezeit automatisch erfassen. Aber was ist, wenn Sie die Zeit erfassen möchten, die zum Laden einer bestimmten Ressource benötigt wird?

Dauert beispielsweise das Laden einer beliebten JavaScript-Bibliothek zu lange und beeinträchtigt die Nutzerfreundlichkeit der Website?

Mithilfe von Nutzertimings können Sie diese Frage beantworten, indem eine native Methode zum Erfassen eines bestimmten Zeitraums in Google Analytics bereitgestellt wird.

Ein funktionierendes Beispiel ist der Beispielcode für das Nutzertiming.

Nutzertimings einrichten

Wenn Sie Daten zum Nutzertiming erfassen möchten, müssen Sie die Methode _trackTiming verwenden, mit der Zeitdaten an Google Analytics gesendet werden.

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

Die Parameter stellen hierbei Folgendes dar:

Parameter Wert Erforderlich Zusammenfassung
category string ja Ein String zur Kategorisierung aller Nutzertiming-Variablen in logische Gruppen für einfachere Berichtszwecke. Du kannst beispielsweise den Wert jQuery verwenden, wenn du die Zeit zum Laden einer bestimmten JavaScript-Bibliothek erfasst hast.
variable string ja Ein String, der den Namen der Aktion der erfassten Ressource angibt. Sie können beispielsweise den Wert von JavaScript Load verwenden, wenn Sie die Zeit zum Laden der jQuery-JavaScript-Bibliothek erfassen möchten. Dieselben Variablen können über mehrere Kategorien hinweg verwendet werden, um die Zeitangaben für ein Ereignis zu verfolgen, das diesen Kategorien entspricht, z. B. Javascript Load und Page Ready Time.
time number ja Die Anzahl der Millisekunden während der verstrichenen Zeit für die Berichterstellung an Google Analytics. Wenn das Laden der jQuery-Bibliothek 20 Millisekunden gedauert hat, würden Sie den Wert von 20 senden.
opt_label string nein Ein String, mit dem Nutzerzeiten in Berichten flexibler dargestellt werden können. Labels können auch verwendet werden, um sich auf verschiedene untergeordnete Tests für dieselbe Kategorie und Variablenkombination zu konzentrieren. Wenn wir beispielsweise jQuery aus dem Content Delivery Network von Google laden würden, verwenden wir den Wert Google CDN.
opt_sampleRate number nein Eine Zahl, mit der der Prozentsatz der Besucher manuell überschrieben werden kann, deren Timing-Treffer an Google Analytics gesendet werden. Der Standardwert ist derselbe Wert wie bei der allgemeinen Websitegeschwindigkeitsdaten und basiert auf einem Prozentsatz der Besucher. Wenn Sie also die _trackTiming-Treffer für 100% der Besucher erfassen möchten, verwenden Sie den Wert 100. Jeder Treffer wird auf das allgemeine Limit von 500 Treffern pro Sitzung angerechnet.

Zurück nach oben

Tracking-Zeit

Wenn Sie die Methode _trackTiming verwenden, geben Sie die Dauer von Millisekunden an, die im Parameter time aufgewendet werden soll. Es liegt also an Ihnen, dem Entwickler, Code zu schreiben, um diesen Zeitraum zu erfassen. Am einfachsten ist es, einen Zeitstempel am Anfang eines Zeitraums und einen weiteren Zeitstempel am Ende des Zeitraums zu erstellen. Dann können Sie die Differenz zwischen den beiden Zeitstempeln ermitteln, um die aufgewendete Zeit zu ermitteln.

Hier ein einfaches Beispiel:

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

Der Startzeitstempel wird abgerufen, indem ein neues Date-Objekt erstellt und die Zeit in Millisekunden abgerufen wird. Als Nächstes wird mit der Funktion setTimeout die Funktion myCallback in 200 Millisekunden aufgerufen. Sobald die Callback-Funktion ausgeführt wurde, wird der endTime-Zeitstempel durch Erstellen eines neuen Date-Objekts abgerufen. Dann wird die Differenz zwischen den Start- und Endzeiten berechnet, um die aufgewendete Zeit zu ermitteln. Die aufgewendete Zeit wird an Google Analytics gesendet.

Dieses Beispiel ist trivial, veranschaulicht aber das Konzept der Zeiterfassung. Sehen wir uns ein realistischeres Beispiel an.

Zurück nach oben

Nachverfolgen der Zeit für das Laden einer JavaScript-Ressource

Heutzutage verwenden viele Websites JavaScript-Bibliotheken von Drittanbietern oder fordern Daten über JSON-Objekte an. Während deine Website diese Ressourcen zu Hause schnell lädt, kann es sein, dass dieselben Ressourcen für Nutzer in anderen Ländern sehr langsam geladen werden. Diese langsam ladenden Ressourcen können die Nutzerfreundlichkeit der Website für internationale Nutzer beeinträchtigen.

Mit der Funktion „Nutzertiming“ für die Websitegeschwindigkeit kannst du erfassen und Berichte dazu erstellen, wie lange das Laden dieser Ressourcen dauert.

Das folgende einfache Beispiel zeigt, wie Sie die Zeit für eine Funktion erfassen, die JavaScript-Ressourcen asynchron lädt:

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

Dieses Beispiel ist dem vorherigen Beispiel sehr ähnlich.

In diesem Beispiel ist loadJs eine Dienstfunktion, die JavaScript-Ressourcen lädt. Dazu wird dynamisch ein Skriptelement erstellt und an das DOM des Browsers angehängt. Die Funktion akzeptiert zwei Parameter: eine URL als String und eine Callback-Funktion, die nach dem Laden des Skripts ausgeführt wird.

Innerhalb von loadJs wird ein Startzeitstempel in startTime gespeichert. Sobald die Ressource geladen wurde, wird die Callback-Funktion ausgeführt. In der Callback-Funktion wird der Endzeitstempel abgerufen und verwendet, um die zum Laden der JavaScript-Ressource benötigte Zeit zu berechnen. Die aufgewendete Zeit wird über die Methode _trackTiming an Google Analytics gesendet.

Durch den Aufruf:

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

Lädt die jQuery-Bibliothek asynchron aus dem Content Delivery Network von Google und führt nach Abschluss die Callback-Funktion aus, die wiederum die Ladezeit der Ressource an Google Analytics sendet.

Zurück nach oben

Mit Timings für mehrere Nutzer arbeiten

Angenommen, Sie möchten mit dem obigen Code mehrere JavaScript-Ressourcen laden. Da die Variable startTime global ist, wird die Variable startTime jedes Mal überschrieben, wenn Sie den Beginn eines bestimmten Zeitraums verfolgen. Dadurch wird die falsche Zeit generiert.

Als Best Practice sollten Sie also für jede Ressource, die Sie verfolgen möchten, eine eindeutige Instanz der Start- und Endzeit beibehalten.

Außerdem sind die Kategorie- und Variablenparameter für _trackTiming hartcodiert. Wenn Sie also loadJs zum Laden mehrerer Ressourcen verwenden, können Sie die einzelnen Ressourcen in den Google Analytics-Berichten nicht unterscheiden.

Beide Probleme lassen sich durch Speichern der Zeit- und _trackTiming-Parameter in einem JavaScript-Objekt lösen.

Ein JavaScript-Objekt zum Speichern von Nutzertimings erstellen

Hier siehst du ein einfaches JavaScript-Objekt, das zum Speichern der Nutzertiming-Daten für jede erfasste Ressource verwendet werden kann:

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

Wir können dieses Objekt jetzt verwenden, damit loadJs für mehrere Anfragen funktioniert.

Gespeicherte Nutzertimings werden gesendet

Da wir nun eine Möglichkeit haben, Zeitdaten für jede Ressource zu speichern, die Sie verfolgen möchten, können Sie loadJs wie folgt aktualisieren, um sie zu verwenden:

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

Der obige Code beginnt mit dem Erstellen eines neuen TrackTiming-Objekts, in dem die Kategorie, die Variable und das optionale Label an den Konstruktor übergeben werden. Das Objekt TrackTiming wird dann als Parameter an die Funktion loadJs übergeben.

Innerhalb von loadJs wird die Methode startTime aufgerufen, um den Startzeitstempel abzurufen und zu speichern.

Im vorherigen Beispiel konnte die Callback-Funktion einfach auf die Variable startTime zugreifen, da sie global war. Da startTime jetzt Teil des TrackTiming-Objekts ist, benötigen wir eine Möglichkeit, dieses Objekt von der LoadJs-Funktion an die Callback-Funktion zu übergeben.

Eine Strategie zur Lösung dieses Problems besteht darin, dem Skriptelement das Objekt TrackTiming als Attribut hinzuzufügen. Da die Callback-Funktion über die Skriptmethode onload ausgeführt wird, wird dem Callback ein Ereignisobjekt als Parameter übergeben. Dieses Ereignisobjekt kann dann verwendet werden, um das ursprüngliche Skriptobjekt abzurufen, das das Ereignis ausgelöst hat. Dieses Skriptobjekt kann wiederum für den Zugriff auf das TrackTiming-Objekt verwendet werden.

Sobald wir auf das ursprüngliche TrackTiming-Objekt zugreifen können, kann das Skript die Uhrzeit beenden und die Daten senden.

Auf unserer Beispielwebsite können Sie sich eine Live-Demo dieses Beispiels ansehen.

Dieses Muster zum Hinzufügen des TrackTiming-Objekts als Eigenschaft zum verfolgten Objekt eignet sich gut für das Tracking anderer asynchroner Lademechanismen wie der Verwendung des XMLHttpRequest-Objekts.

Zurück nach oben

XMLHttpRequests verfolgen

Eine weitere gängige Methode zum asynchronen Laden von Webseitenressourcen ist das XMLHttpRequest-Objekt. Die zum Laden dieser Ressourcen benötigte Zeit kann auch mit der Methode _trackTiming und dem TimeTracker-Objekt verfolgt werden.

In diesem Beispiel wird die Datei mit Zitaten vom Server geladen.

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

Dieses Beispiel sieht dem Beispiel „loadJs“ sehr ähnlich. Hier finden Sie die Live-Demo.

Zurück nach oben

Vermeiden, schlechte Daten zu senden

In den Beispielen oben subtrahiert der Code die Endzeit von der Startzeit, um die aufgewendete Zeit zu ermitteln. Dies funktioniert im Allgemeinen gut, solange der Beginn vor dem Ende liegt. Wenn sich die Uhrzeit im Browser ändert, kann es jedoch zu Problemen werden. Wenn der Nutzer die Maschinenzeit ändert, nachdem die Startzeit festgelegt wurde, können fehlerhafte Daten an Google Analytics gesendet werden. Ein großes Problem beim Senden eines großen fehlerhaften Werts besteht darin, dass die Durchschnitts- und Gesamtmesswerte verzerrt werden.

Daher empfiehlt es sich im Allgemeinen, dafür zu sorgen, dass die aufgewendete Zeit größer als 0 und kleiner als ein Zeitraum ist, bevor Sie die Daten an Google Analytics senden. Sie können die TimeTracker-Sendemethode oben ändern, um diese Prüfung durchzuführen:

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

Abtastrate überschreiben und Fehlerbehebung

Bei der Methode _trackTiming werden für alle von Google Analytics erfassten Messwerte zur Websitegeschwindigkeit nur Daten mit derselben Rate an Google Analytics gesendet. Standardmäßig ist dies auf 1% aller Besucher festgelegt.

Für Websites mit hohem Traffic sollte die Standardeinstellung in Ordnung sein. Bei Websites mit weniger Traffic können Sie die Stichprobenrate jedoch erhöhen, indem Sie den optionalen Parameter für die Stichprobenrate festlegen. Beispiel: 

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

_trackTiming-Daten von 50% der Besucher werden erfasst.

Alternativ können Sie die Methode _setSiteSpeedSampleRate festlegen, um die Abtastrate für alle Zeiten der Websitegeschwindigkeit einschließlich der Methode _trackTiming festzulegen. Beispiel:

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

Außerdem werden von 50% der Besucher _trackTiming-Daten erhoben.

Wenn Sie eine Google Analytics-Implementierung testen und verifizieren, haben Sie in der Regel nur sehr wenige Zugriffe auf die zu testende Website. Daher ist es in der Regel sinnvoll, die Abtastrate beim Testen auf 100% zu erhöhen.

Zurück nach oben

Andere Zeitereignisse verfolgen

Im Mittelpunkt des gesamten Beispiels oben liegt der Fokus auf der Methode _trackTiming, mit der ermittelt wird, wie lange das Laden von Ressourcen dauert. Diese Methode kann jedoch auch zum Erfassen der allgemeinen Dauer verwendet werden. Beispielsweise können Sie Folgendes erfassen:

  • Die Zeit, die ein Besucher damit verbringt, ein Video anzusehen.
  • Die Zeit, die benötigt wird, um ein Level in einem Spiel abzuschließen.
  • Die Zeit, die ein Besucher damit verbringt, einen Bereich einer Website zu lesen.

In jedem dieser Fälle kannst du das oben erwähnte JavaScript-Objekt TimeTracker wiederverwenden, um die Erfassung der aufgewendeten Zeit und das Senden der Daten an Google Analytics zu vereinfachen.