In der letzten Zeile des JavaScript-Mess-Snippets wird der Befehlsliste ga() ein send-Befehl hinzugefügt, um einen Seitenaufruf an Google Analytics zu senden:
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
Das sendende Objekt ist der Tracker, der in der vorherigen Codezeile für die Erstellung geplant wurde. Die gesendeten Daten sind die auf diesem Tracker gespeicherten Daten.
In diesem Leitfaden werden die verschiedenen Möglichkeiten zum Senden von Daten an Google Analytics beschrieben. Außerdem erfahren Sie, wie Sie festlegen, welche Daten gesendet werden.
Treffer, Treffertypen und das Measurement Protocol
Wenn ein Tracker Daten an Google Analytics sendet, wird das als Treffer bezeichnet und 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 Konzepte und Methoden beschrieben, die für alle Treffertypen gelten. Einzelne Anleitungen für die einzelnen Treffertypen finden Sie im linken Navigationsbereich unter Häufige Nutzerinteraktionen erfassen.
Der Treffer ist eine HTTP-Anfrage, die aus Feld- und Wertpaaren besteht, die als Abfragestring codiert sind 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, sehen Sie die gesendeten Treffer auf dem Tab „Network“. Suchen Sie nach Anfragen, die an google-analytics.com/collect gesendet wurden.
Welche Daten gesendet werden
Wenn ein Treffer an das Measurement Protocol gesendet wird, senden Tracker alle derzeit gespeicherten und gültigen Measurement Protocol-Parameter. Beispielsweise werden Felder wie title und location gesendet, cookieDomain und hitCallback jedoch nicht.
In einigen Fällen möchten Sie Felder für den aktuellen Treffer an Google Analytics senden, jedoch nicht für nachfolgende Treffer. Ein Beispiel hierfür ist ein Ereignis, 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, müssen Sie den Tracker mit der Methode set aktualisieren.
Sendemethode
Die send-Methode eines Trackers kann direkt für das Tracker-Objekt selbst oder durch Hinzufügen eines send-Befehls zur ga()-Befehlswarteschlange aufgerufen werden. Da du in den meisten Fällen keinen Verweis auf das Tracker-Objekt hast, 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 lautet:
ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);
Wie oben 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 Werte verwendet, die im Tracker gespeichert sind.
Bei Aufrufen des Befehls send muss ein hitType angegeben werden. Je nach Typ sind möglicherweise auch andere Parameter erforderlich. Weitere Informationen erhalten Sie in den einzelnen Leitfäden zum Messen gängiger Nutzerinteraktionen im linken Navigationsbereich.
Die einfachste Methode, den Befehl send, der für alle Treffertypen funktioniert, besteht darin, alle Felder mit dem Parameter fieldsObject 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 Befehl send für den Treffertyp „event“ 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 im Abschnitt „Parameter“ der Referenz der Sendemethode.
Benannten Tracker verwenden
Wenn Sie einen benannten Tracker anstelle des Standard-Trackers verwenden, können Sie seinen Namen im Befehlsstring übergeben.
Der folgende send-Befehl wird auf dem Tracker "myTracker" aufgerufen:
ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');
Auf dem Tracker-Objekt selbst
Wenn du einen Verweis auf das Tracker-Objekt hast, kannst du 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 gesendet wird, damit Sie sofort darauf reagieren können. Dies ist häufig der Fall, wenn Sie eine bestimmte Interaktion erfassen müssen, durch die ein Nutzer die aktuelle Seite verlassen würde. Viele Browser beenden die Ausführung von JavaScript, sobald die Seite entladen wird. Das bedeutet, dass die analytics.js-Befehle zum Senden von Treffern möglicherweise nie ausgeführt werden.
Ein Beispiel: Sie möchten ein Ereignis an Google Analytics senden, mit dem erfasst wird, dass ein Nutzer auf die Schaltfläche zum 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.
Das Problem lässt sich so umgehen, dass das Ereignis nicht mehr entladen wird. Sie können den Treffer dann wie gewohnt an Google Analytics senden und das Formular programmatisch noch einmal senden.
hitCallback
Wenn Sie nach dem Senden eines Treffers benachrichtigt werden möchten, legen Sie das Feld hitCallback fest. hitCallback ist eine Funktion, die aufgerufen wird, sobald der Treffer gesendet wurde.
Im folgenden Beispiel sehen Sie, wie Sie die Standardaktion zum Senden eines Formulars abbrechen, einen Treffer an Google Analytics senden und das Formular dann mit der hitCallback-Funktion 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 Beispiel oben funktioniert gut, aber es gibt 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 nie ausgeführt wird, können Nutzer das Formular nie senden.
Wenn Sie wichtige Websitefunktionen in die Funktion hitCallback einfügen, sollten Sie immer eine Zeitüberschreitungsfunktion verwenden, um Fälle zu bewältigen, in denen die analytics.js-Bibliothek nicht geladen werden kann.
Im nächsten Beispiel wird der obige Code mit einer Zeitüberschreitung aktualisiert. Wenn der Nutzer eine Sekunde lang auf die Schaltfläche zum Senden klickt und hitCallback noch 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 Muster oben an vielen Stellen auf Ihrer Website verwenden, ist es wahrscheinlich einfacher, eine Dienstprogrammfunktion zu erstellen, mit der Zeitüberschreitungen verarbeitet werden.
Die folgende Dienstprogrammfunktion akzeptiert eine Funktion als Eingabe und gibt eine neue Funktion zurück. Wenn die zurückgegebene Funktion vor dem Zeitlimit aufgerufen wird (das Standardzeitlimit beträgt eine Sekunde), wird das Zeitlimit gelöscht und die Eingabefunktion aufgerufen. Wenn die zurückgegebene Funktion nicht vor dem Zeitlimit 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;
}
Sie können jetzt alle hitCallback-Funktionen einfach mit einer Zeitüberschreitung umschließen, damit Ihre Website wie erwartet funktioniert, auch wenn die Treffer nicht gesendet werden oder die analytics.js-Bibliothek nicht 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 wird in analytics.js die HTTP-Methode und der Transportmechanismus ausgewählt, 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 navigator.sendBeacon-Methode.
Bei den ersten beiden Methoden wird das im vorherigen Abschnitt beschriebene Problem verwendet. Häufig werden Treffer nicht gesendet, wenn die Seite entladen wird. Die Methode navigator.sendBeacon ist dagegen eine neue HTML-Funktion, die zur Lösung dieses Problems erstellt wurde.
Wenn der Browser Ihres Nutzers navigator.sendBeacon unterstützt, können Sie 'beacon' als transport-Mechanismus festlegen. Sie müssen sich dann keine Gedanken über das Festlegen eines Treffer-Callbacks machen.
Mit dem folgenden Code wird der Transportmechanismus in Browsern, die ihn unterstützen, auf 'beacon' gesetzt.
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 mitunter komplexe Implementierungen erfordern. In vielen Fällen wurden diese Implementierungen jedoch bereits als analytics.js-Plug-ins entwickelt und verfügbar gemacht. Im nächsten Leitfaden erfahren Sie, wie Sie analytics.js-Plug-ins mit der Befehlswarteschlange ga() verwenden.