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