In der letzten Zeile des Snippets für die JavaScript-Messung wird der ga()-Befehlswarteschlange ein send-Befehl hinzugefügt, um einen Seitenaufruf an Google Analytics zu senden:
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
Das Objekt, das gesendet wird, ist der Tracker, der in der vorherigen Codezeile zur Erstellung geplant wurde. Die gesendeten Daten sind die auf diesem Tracker gespeicherten Daten.
In diesem Leitfaden werden die verschiedenen Möglichkeiten beschrieben, wie Sie Daten an Google Analytics senden. Außerdem erfahren Sie, wie Sie steuern können, welche Daten gesendet werden.
Treffer, Treffertypen und das Measurement Protocol
Wenn ein Tracker Daten an Google Analytics sendet, wird das Senden eines Treffers bezeichnet. Jeder Treffer muss einen Treffertyp haben. Das Google Analytics-Tag sendet einen Treffer vom Typ pageview. Andere Treffertypen sind screenview, event, transaction, item, social, exception und timing. In diesem Leitfaden werden die für alle Treffertypen verwendeten Konzepte und Methoden erläutert. Die individuellen Anleitungen für jeden Treffertyp finden Sie links im Navigationsbereich unter Häufige Nutzerinteraktionen messen.
Der Treffer ist eine HTTP-Anfrage, die aus Feld- und Wertpaaren besteht, die als Abfragestring codiert und an das Measurement Protocol gesendet werden.
Wenn Sie die Entwicklertools Ihres Browsers geöffnet haben, wenn Sie eine Seite laden, auf der analytics.js verwendet wird, können Sie die gesendeten Treffer auf dem Tab „Network“ sehen. Suchen Sie nach Anfragen, die an google-analytics.com/collect gesendet wurden.
Welche Daten werden gesendet?
Wenn ein Treffer an das Measurement Protocol gesendet wird, senden Tracker alle derzeit gespeicherten Felder, die gültige Measurement Protocol-Parameter sind. Beispiel: Felder wie title und location werden gesendet, cookieDomain und hitCallback jedoch nicht.
In manchen Fällen möchten Sie Felder für den aktuellen Treffer an Google Analytics senden, aber nicht für nachfolgende Treffer. Ein Beispiel dafür ist ein Ereignistreffer, bei dem die Felder eventAction und eventLabel nur für den aktuellen Treffer relevant sind.
Wenn Sie nur Felder mit dem aktuellen Treffer senden möchten, können Sie sie als Argumente an die Methode send übergeben. Damit Felddaten mit allen nachfolgenden Treffern gesendet werden, sollten Sie mit der Methode set den Tracker aktualisieren.
Die Sendemethode
Die send-Methode eines Trackers kann direkt über das Tracker-Objekt selbst oder durch Hinzufügen eines send-Befehls zur ga()-Befehlswarteschlange aufgerufen werden. Da Sie in den meisten Fällen keinen Verweis auf das Tracker-Objekt haben, wird die Verwendung der ga()-Befehlswarteschlange empfohlen, um Tracker-Daten an Google Analytics zu senden.
ga()-Befehlswarteschlange verwenden
Die Signatur zum Hinzufügen eines send-Befehls zur ga()-Befehlswarteschlange sieht so aus:
ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);
Wie bereits erwähnt, werden die in den Parametern hitType, ...fields und fieldsObject angegebenen Werte nur für den aktuellen Treffer gesendet. Sie werden weder im Tracker-Objekt gespeichert noch mit nachfolgenden Treffern gesendet.
Wenn eines der mit dem Befehl send übergebenen Felder bereits für das Tracker-Objekt festgelegt ist, werden die im Befehl übergebenen Werte anstelle der im Tracker gespeicherten Werte verwendet.
Aufrufe des send-Befehls müssen einen hitType angeben. Je nach Typ sind möglicherweise auch andere Parameter erforderlich. Weitere Informationen finden Sie in den jeweiligen Leitfäden zum Messen häufiger Nutzerinteraktionen.
Die einfachste Methode, den Befehl send zu verwenden, der für alle Treffertypen funktioniert, besteht darin, mit dem Parameter fieldsObject alle Felder zu übergeben. Beispiel:
ga('send', {
hitType: 'event',
eventCategory: 'Video',
eventAction: 'play',
eventLabel: 'cats.mp4'
});
Bei bestimmten Treffertypen können häufig verwendete Felder direkt als Argumente an den Befehl send übergeben werden. Der obige send-Befehl für den Treffertyp „Ereignis“ könnte beispielsweise so umgeschrieben werden:
ga('send', 'event', 'Video', 'play', 'cats.mp4');
Eine vollständige Liste der Felder, die als Argumente für die verschiedenen Treffertypen übergeben werden können, finden Sie in der Referenz zur Sendemethode im Abschnitt "Parameter".
Benannten Tracker verwenden
Wenn Sie anstelle des Standard-Trackers einen benannten Tracker verwenden, können Sie dessen Namen in der Befehlszeichenfolge übergeben.
Der folgende send-Befehl wird für den Tracker „myTracker“ aufgerufen:
ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');
Im Tracker-Objekt selbst
Wenn Sie einen Verweis auf das Tracker-Objekt haben, können Sie die send-Methode dieses Trackers direkt aufrufen:
ga(function(tracker) {
tracker.send('event', 'Video', 'play', 'cats.mp4');
});
Wissen, wann der Treffer gesendet wurde
In einigen Fällen müssen Sie wissen, wann ein Treffer an Google Analytics gesendet wurde, damit Sie direkt im Anschluss Maßnahmen ergreifen können. Dies kommt häufig vor, wenn Sie eine bestimmte Interaktion aufzeichnen müssen, die einen Nutzer von der aktuellen Seite wegführen würde. Viele Browser beenden die Ausführung von JavaScript, sobald die Seite entfernt wird. Daher werden Ihre analytics.js-Befehle zum Senden von Treffern möglicherweise nicht ausgeführt.
Ein Beispiel hierfür ist, wenn Sie ein Ereignis an Google Analytics senden möchten, um zu erfassen, dass ein Nutzer auf die Schaltfläche „Senden“ eines Formulars geklickt hat. In den meisten Fällen wird durch Klicken auf die Schaltfläche „Senden“ sofort die nächste Seite geladen und ga('send', ...)-Befehle werden nicht ausgeführt.
Die Lösung für dieses Problem besteht darin, das Ereignis abzufangen und das Entfernen der Seite zu verhindern. Anschließend können Sie den Treffer wie gewohnt an Google Analytics senden. Sobald er gesendet wurde, lässt sich das Formular programmatisch noch einmal einreichen.
hitCallback
Legen Sie das Feld hitCallback fest, um benachrichtigt zu werden, wenn ein Treffer gesendet wurde. hitCallback ist eine Funktion, die aufgerufen wird, sobald der Treffer erfolgreich gesendet wurde.
Das folgende Beispiel zeigt, wie Sie die standardmäßige Sendeaktion eines Formulars abbrechen, einen Treffer an Google Analytics senden und das Formular dann mit der Funktion hitCallback noch einmal senden:
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: function() {
form.submit();
}
});
});
Umgang mit Zeitüberschreitungen
Das obige Beispiel funktioniert gut, es gibt jedoch ein schwerwiegendes Problem. Wenn die analytics.js-Bibliothek aus irgendeinem Grund nicht geladen werden kann, wird die Funktion hitCallback nie ausgeführt. Und wenn die Funktion hitCallback nicht ausgeführt wird, können Nutzer das Formular auch nicht senden.
Wenn Sie wichtige Websitefunktionen innerhalb der hitCallback-Funktion platzieren, sollten Sie immer eine Zeitüberschreitungsfunktion verwenden, um zu reagieren, wenn die analytics.js-Bibliothek nicht geladen werden kann.
Im nächsten Beispiel wird der obige Code so aktualisiert, dass ein Zeitlimit verwendet wird. Verstreicht eine Sekunde, nachdem der Nutzer auf die Schaltfläche „Senden“ geklickt hat und hitCallback nicht ausgeführt wurde, wird das Formular trotzdem noch einmal gesendet.
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Creates a timeout to call `submitForm` after one second.
setTimeout(submitForm, 1000);
// Keeps track of whether or not the form has been submitted.
// This prevents the form from being submitted twice in cases
// where `hitCallback` fires normally.
var formSubmitted = false;
function submitForm() {
if (!formSubmitted) {
formSubmitted = true;
form.submit();
}
}
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: submitForm
});
});
Wenn Sie das obige Muster an vielen Stellen auf Ihrer Website verwenden, ist es wahrscheinlich einfacher, eine Dienstprogrammfunktion zum Verarbeiten von Zeitüberschreitungen zu erstellen.
Die folgende Dienstfunktion akzeptiert eine Funktion als Eingabe und gibt eine neue Funktion zurück. Wenn die zurückgegebene Funktion vor dem Zeitlimit aufgerufen wird (Standardzeitlimit beträgt eine Sekunde), löscht sie das Zeitlimit und ruft die Eingabefunktion auf. Wenn die zurückgegebene Funktion nicht vor Ablauf des Zeitlimits aufgerufen wird, wird die Eingabefunktion unabhängig davon aufgerufen.
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
Jetzt können Sie alle hitCallback-Funktionen ganz einfach mit einem Zeitlimit verknüpfen, damit Ihre Website auch dann wie erwartet funktioniert, wenn Ihre Treffer nicht gesendet werden oder die analytics.js-Bibliothek nie geladen wird.
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: createFunctionWithTimeout(function() {
form.submit();
})
});
});
Verschiedene Transportmechanismen angeben
Standardmäßig wählt analytics.js die HTTP-Methode und den Transportmechanismus aus, mit denen Treffer optimal gesendet werden. Die drei Optionen sind 'image' (mit einem Image-Objekt), 'xhr' (mit einem XMLHttpRequest-Objekt) oder 'beacon' mit der neuen Methode navigator.sendBeacon.
Bei den beiden Methoden handelt es sich um das im vorherigen Abschnitt beschriebene Problem, bei dem beim Entladen der Seite häufig keine Treffer gesendet werden. Die Methode navigator.sendBeacon ist dagegen eine neue HTML-Funktion, die entwickelt wurde, um dieses Problem zu lösen.
Wenn der Browser Ihres Nutzers navigator.sendBeacon unterstützt, können Sie 'beacon' als transport-Mechanismus festlegen, damit Sie sich nicht um das Festlegen eines Treffer-Callbacks kümmern müssen.
Mit dem folgenden Code wird der Transportmechanismus in Browsern, die ihn unterstützen, auf 'beacon' festgelegt.
ga('create', 'UA-XXXXX-Y', 'auto');
// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');
Nächste Schritte
Das Messen bestimmter Arten von Nutzerinteraktionen kann manchmal komplexe Implementierungen erfordern. In vielen Fällen wurden diese Implementierungen jedoch bereits entwickelt und als analytics.js-Plug-ins zur Verfügung gestellt. Im nächsten Leitfaden wird erläutert, wie Sie mit der ga()-Befehlswarteschlange analytics.js-Plug-ins verwenden.