In der letzten Zeile des Snippets für die JavaScript-Messung wird der ga()-Befehlswarteschlange der Befehl send hinzugefügt, um einen Seitenaufruf an Google Analytics zu senden:
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
Das Objekt, das sendet, 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 erfahren Sie, wie Sie Daten an Google Analytics senden und steuern, welche Daten gesendet werden.
Treffer, Treffertypen und 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. Weitere Treffertypen sind screenview, event, transaction, item, social, exception und timing. In diesem Leitfaden werden die für alle Treffertypen verwendeten Konzepte und Methoden beschrieben. Individuelle Anleitungen für jeden Treffertyp finden Sie im linken Navigationsbereich im Abschnitt 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 mit analytics.js laden, können Sie die gesendeten Treffer auf dem Tab „Netzwerk“ sehen. Suchen Sie nach Anfragen, die an google-analytics.com/collect gesendet wurden.
Welche Daten werden gesendet?
Beim Senden eines Treffers an das Measurement Protocol senden Tracker alle derzeit gespeicherten Felder, die gültige Measurement Protocol-Parameter darstellen. Beispiel: Felder wie title und location werden gesendet, cookieDomain und hitCallback jedoch nicht.
In einigen Fällen werden Felder für den aktuellen Treffer an Google Analytics gesendet, nachfolgende Treffer werden jedoch nicht unterstützt. Ein Beispiel hierfü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 send-Methode
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 meistens keinen Verweis auf das Tracker-Objekt haben, wird die Verwendung der ga()-Befehlswarteschlange empfohlen, um Tracker-Daten an Google Analytics zu senden.
Mit der ga()-Befehlswarteschlange
Die Signatur zum Hinzufügen eines send-Befehls zur ga()-Befehlswarteschlange lautet:
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 nicht im Tracker-Objekt gespeichert und auch nicht 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.
In Aufrufen des send-Befehls muss ein hitType angegeben werden. Je nach Typ sind möglicherweise noch weitere Parameter erforderlich. Weitere Informationen finden Sie in den jeweiligen Leitfäden zum Messen häufiger Nutzerinteraktionen in der linken Navigationsleiste.
Die einfachste Methode zur Verwendung des Befehls 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 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 einen benannten Tracker anstelle des Standard-Trackers verwenden, können Sie dessen Namen in der Befehlszeichenfolge übergeben.
Der folgende send-Befehl wird für den Tracker mit dem Namen „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');
});
Erkennen, 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. Das kommt häufig vor, wenn Sie eine bestimmte Interaktion aufzeichnen müssen, durch die ein Nutzer von der aktuellen Seite weggeleitet wird. Viele Browser beenden die Ausführung von JavaScript, sobald der Ladevorgang der Seite beginnt. Das bedeutet, dass Ihre analytics.js-Befehle zum Senden von Treffern möglicherweise nie ausgeführt werden.
Das ist beispielsweise der Fall, 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 dieses Problems 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. Nachdem er gesendet wurde, können Sie das Formular programmatisch noch einmal einreichen.
hitCallback
Legen Sie das Feld hitCallback fest, um benachrichtigt zu werden, wenn ein Treffer gesendet wurde. Die Funktion hitCallback wird aufgerufen, sobald der Treffer erfolgreich gesendet wurde.
Das folgende Beispiel zeigt, wie Sie die Standardübermittlungsaktion eines Formulars abbrechen, einen Treffer an Google Analytics senden und das Formular dann mit der Funktion hitCallback noch einmal einreichen:
// 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, aber es weist ein schwerwiegendes Problem auf. 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 nicht senden.
Wenn Sie wichtige Websitefunktionen innerhalb der hitCallback-Funktion platzieren, sollten Sie immer eine Zeitüberschreitungsfunktion verwenden, wenn beim Laden der analytics.js-Bibliothek ein Fehler auftritt.
Im nächsten Beispiel wird der obige Code so aktualisiert, dass ein Zeitlimit verwendet wird. Wenn eine Sekunde verstreicht, nachdem der Nutzer auf die Schaltfläche „Senden“ geklickt hat und das 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 Umgang mit 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 (das Standardzeitlimit beträgt eine Sekunde), löscht sie das Zeitlimit und ruft die Eingabefunktion auf. 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;
}
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 dem 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 tritt das im vorherigen Abschnitt beschriebene Problem auf. Beim Entladen der Seite werden oft keine Treffer gesendet. Die Methode navigator.sendBeacon ist hingegen eine neue HTML-Funktion, die entwickelt wurde, um dieses Problem zu lösen.
Wenn der Browser des Nutzers navigator.sendBeacon unterstützt, kannst du 'beacon' als transport-Mechanismus festlegen. Du musst dir 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 erfordert manchmal komplexe Implementierungen. 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 die Verwendung von analytics.js-Plug-ins mit der ga()-Befehlswarteschlange erläutert.