Nutzertimings – Web-Tracking (ga.js)

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

Einführung

Studien haben gezeigt, dass die Ladezeit einer Website insgesamt verbessert wird, wenn die Ladezeit einer Seite reduziert wird. Google Analytics bietet eine Reihe von leistungsstarken Berichten, mit denen die Ladezeit der Seiten automatisch erfasst wird. Aber was ist, wenn Sie die Zeit zum Laden einer bestimmten Ressource verfolgen möchten?

Dauert es beispielsweise zu lange, eine beliebte JavaScript-Bibliothek zu laden, was die Nutzerfreundlichkeit der Website beeinträchtigt?

Mithilfe des Nutzertimings können Sie diese Frage beantworten, indem Sie einen nativen Zeitraum in Google Analytics anbieten.

Ein funktionierendes Beispiel findest du im Beispiel für Nutzertimings.

Nutzertimings einrichten

Zum Erfassen der Daten zum Nutzertiming müssen Sie die Methode _trackTiming verwenden, die Zeitdaten an Google Analytics sendet.

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

Wofür die Parameter stehen:

Parameter Wert Required Zusammenfassung
category string ja Ein String zur Kategorisierung aller Variablen für das Nutzertiming in logische Gruppen, um die Berichterstellung zu vereinfachen. Du kannst beispielsweise den Wert jQuery verwenden, wenn du erfasst hast, wie lange das Laden der entsprechenden JavaScript-Bibliothek gedauert hat.
variable string ja Ein String, der den Namen der Aktion der zu verfolgenden Ressource angibt. Sie können beispielsweise den Wert von JavaScript Load verwenden, wenn Sie die Zeit erfassen möchten, die zum Laden der jQuery-JavaScript-Bibliothek benötigt wurde. Beachten Sie, dass dieselben Variablen in mehreren Kategorien verwendet werden können, um das Timing für ein Ereignis zu verfolgen, das in diesen Kategorien vorkommt, z. B. Javascript Load und Page Ready Time.
time number ja Die Anzahl der Millisekunden, die für Berichte an Google Analytics verstrichen sind. Wenn das Laden der jQuery-Bibliothek 20 Millisekunden dauert, senden Sie den Wert von 20.
opt_label string Nein Ein String, mit dem Sie die Nutzertimings in den Berichten flexibel visualisieren können. Mit Labels können Sie sich auch auf verschiedene Untertests für dieselbe Kombination aus Kategorie und Variable konzentrieren. Wenn wir beispielsweise jQuery aus dem Google Content Delivery Network geladen haben, verwenden wir den Wert Google CDN.
opt_sampleRate number Nein Eine Zahl, die manuell den Prozentsatz der Besucher überschreibt, deren Timing-Treffer an Google Analytics gesendet werden. Der Standardwert ist die gleiche Anzahl wie die allgemeine Datenerfassung für die Websitegeschwindigkeit und basiert auf einem Prozentsatz der Besucher. Wenn Sie also _trackTiming-Treffer für 100% der Besucher erfassen möchten, verwenden Sie den Wert 100. Jeder Treffer wird auf das Limit von 500 Treffern pro Sitzung angerechnet.

Zurück nach oben

Nutzungsdauer verfolgen

Wenn Sie die Methode _trackTiming verwenden, geben Sie die Anzahl der Millisekunden an, die im Parameter time verbracht werden. Als Entwickler müssen Sie also Code schreiben, um diesen Zeitraum zu erfassen. Am einfachsten ist es, wenn Sie zu Beginn eines Zeitraums einen Zeitstempel und am Ende dieses Zeitraums einen weiteren Zeitstempel erstellen. Dann kannst du den Unterschied zwischen beiden Zeitstempeln nutzen, um Zeit zu verbringen.

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 Zeitstempel des Starts wird abgerufen, indem ein neues Date-Objekt erstellt und die Zeit in Millisekunden abgerufen wird. Als Nächstes wird die Funktion setTimeout verwendet, um die Funktion myCallback in 200 Millisekunden aufzurufen. Nachdem die Callback-Funktion ausgeführt wurde, wird der endTime-Zeitstempel durch Erstellen eines neuen Date-Objekts abgerufen. Dann wird die Differenz zwischen Ende und Startzeit berechnet, um die Zeit zu berechnen. Die tatsächlich aufgewendete Zeit wird an Google Analytics gesendet.

Dieses Beispiel ist einfach, zeigt aber das Konzept zum Erfassen der Zeit. Sehen wir uns ein realistischeres Beispiel an.

Zurück nach oben

Zeitaufwand für das Laden einer JavaScript-Ressource

Viele Websites enthalten JavaScript-Bibliotheken von Drittanbietern oder fordern Daten über JSON-Objekte an. Auch wenn deine Website diese Ressourcen zu Hause schnell laden könnte, können sie für Nutzer in anderen Ländern sehr langsam laden. Diese langsam ladenden Ressourcen können die Nutzerfreundlichkeit der Website für internationale Nutzer beeinträchtigen.

Mit der Funktion „Nutzergeschwindigkeit“ können Sie erfassen und Berichte dazu erstellen, wie lange das Laden dieser Ressourcen dauert.

Das folgende einfache Beispiel zeigt, wie Sie die Zeit einer Funktion erfassen können, 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 sehr ähnlich.

In diesem Beispiel ist loadJs eine Dienstprogrammfunktion, die JavaScript-Ressourcen lädt, indem ein Skriptelement dynamisch erstellt und an das DOM des Browsers angehängt wird. Die Funktion akzeptiert zwei Parameter: eine URL als String und eine Callback-Funktion, die ausgeführt wird, nachdem das Skript geladen wurde.

In loadJs wird ein Startzeitstempel in startTime gespeichert. Nachdem die Ressource geladen wurde, wird die Callback-Funktion ausgeführt. In der Callback-Funktion wird der End-Zeitstempel abgerufen und zur Berechnung der Zeit verwendet, die zum Laden der JavaScript-Ressource benötigt wurde. Die aufgewendete Zeit wird mithilfe der Methode _trackTiming an Google Analytics gesendet.

Rufen Sie dazu Folgendes auf:

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 anschließend die Callback-Funktion aus, die wiederum die Ladezeit der Ressource an Google Analytics sendet.

Zurück nach oben

Mit mehreren Nutzertimings arbeiten

Angenommen, Sie möchten mithilfe des obigen Codes 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 eine eindeutige Instanz der Start- und Endzeit für jede Ressource, die Sie erfassen möchten, beibehalten.

Beachten Sie auch, dass die Kategorie- und Variablenparameter für _trackTiming hartcodiert sind. Wenn Sie also loadJs verwenden, um mehrere Ressourcen zu laden, können Sie nicht jede Ressource in den Google Analytics-Berichten unterscheiden.

Beide Probleme können gelöst werden, indem die Zeitparameter und _trackTiming-Parameter in einem JavaScript-Objekt gespeichert werden.

JavaScript-Objekt zum Speichern von Nutzertimings erstellen

Mit diesem einfachen JavaScript-Objekt können die Nutzertiming-Daten für jede erfasste Ressource gespeichert werden:

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.

Timing der gespeicherten Nutzer wird gesendet

Nachdem wir die Möglichkeit haben, Zeitdaten für jede Ressource zu speichern, die wir erfassen möchten, können Sie loadJs so aktualisieren:

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 erstellt zuerst ein neues TrackTiming-Objekt, 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.

In loadJs wird die Methode startTime aufgerufen, um den Zeitstempel des Anfangs abzurufen und zu speichern.

Im vorherigen Beispiel könnte die Callback-Funktion leicht auf die Variable startTime zugreifen, weil sie global ist. Da startTime nun Teil des Objekts TrackTiming ist, müssen Sie eine Möglichkeit haben, dieses Objekt von der Funktion „loadJs“ an die Callback-Funktion zu übergeben.

Eine Lösung für dieses Problem besteht darin, dem Skriptelement das Objekt TrackTiming als Attribut hinzuzufügen. Da die Callback-Funktion über die Skriptmethode onload ausgeführt wird, wird dem Ereignis 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 verwendet werden, um auf unser TrackTiming-Objekt zuzugreifen.

Sobald wir auf das ursprüngliche TrackTiming-Objekt zugreifen können, beendet das Skript die Zeit und sendet die Daten.

Eine Live-Demo dieses Beispiels finden Sie auf unserer Beispielwebsite.

Dieses Muster zum Hinzufügen des TrackTiming-Objekts als Eigenschaft zum zu verfolgenden Objekt funktioniert in der Regel gut mit dem Erfassen anderer asynchroner Lademechanismen, z. B. der Verwendung des Objekts XMLHttpRequest.

Zurück nach oben

Tracking von XMLHttpRequests-Anfragen

Eine weitere gängige Methode zum Laden von Webseitenressourcen besteht darin, das Objekt XMLHttpRequest zu verwenden. Die Ladezeit dieser Ressourcen kann sowohl mit der Methode _trackTiming als auch mit dem Objekt TimeTracker erfasst werden.

In diesem Beispiel wird die Datei mit den Angeboten 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 ähnelt sehr dem Beispiel „loadJs“. Live-Demo ansehen

Zurück nach oben

Fehlerhafte Daten vermeiden

In den obigen Beispielen wird der Endzeitpunkt vom Beginn abgezogen. Dies funktioniert in der Regel gut, solange die Startzeit kürzer ist als die Endzeit. Wenn sich die Zeit im Browser ändert, kann es jedoch zu einem Problem werden. Wenn der Nutzer seine Maschinenzeit nach dem Festlegen der Startzeit ändert, können fehlerhafte Daten an Google Analytics gesendet werden. Ein großes Problem beim Senden eines großen unzulässigen Werts besteht darin, dass er die durchschnittlichen und die Gesamtmesswerte verzerrt.

Es empfiehlt sich, dafür zu sorgen, dass die genutzte Zeit größer als 0 und kleiner als ein Zeitraum ist, bevor du die Daten an Google Analytics sendest. Wir können die Sendemethode TimeTracker ä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 und Debugging überschreiben

Bei der Methode _trackTiming werden für alle von Google Analytics erfassten Websitegeschwindigkeitsmesswerte nur Daten mit derselben Geschwindigkeit an Google Analytics gesendet. Die Standardeinstellung ist 1% aller Besucher.

Für Websites mit hohem Traffic sollte die Standardeinstellung in Ordnung sein. Bei Websites mit weniger Zugriffen kannst du die Abtastrate erhöhen, indem du den optionalen Parameter für die Abtastrate festlegst. Beispiel:

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

Erfasst _trackTiming-Daten von 50% der Besucher.

Alternativ kannst du die Methode _setSiteSpeedSampleRate festlegen, um die Abtastrate für alle Zeitangaben der Websitegeschwindigkeit festzulegen, einschließlich der Methode _trackTiming. Beispiel:

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

Es werden außerdem Daten von _trackTiming von 50% der Besucher erhoben.

Wenn Sie eine Google Analytics-Implementierung testen und prüfen, haben Sie in der Regel nur wenig 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 Ereignisse erfassen

Im Beispiel oben wird die Methode _trackTiming verwendet, um nachzuverfolgen, wie lange es dauert, Ressourcen zu laden. Sie können diese Methode aber auch verwenden, um allgemeine Zeitspannen zu verfolgen. Du könntest beispielsweise Folgendes erfassen:

  • Die Zeit, die ein Besucher mit der Wiedergabe eines Videos verbringt.
  • Die Zeit, die Sie zum Erreichen eines Levels in einem Spiel brauchen.
  • Die Zeit, die ein Besucher einen Bereich einer Website liest

In jedem dieser Fälle kannst du das oben beschriebene JavaScript-Objekt TimeTracker wiederverwenden, um die Erfassung und Übermittlung der Daten, die du aufgewendet hast, an Google Analytics zu vereinfachen.