Auf dieser Seite wird beschrieben, wie Sie mit gtag.js-Befehlen Daten von Ihrer Website an Google Analytics senden.
Daten mit dem Befehl event senden
Nachdem Sie das allgemeine Snippet einer Webseite hinzugefügt haben, senden Sie mit dem Befehl event Daten an Google Analytics. Verwenden Sie beispielsweise den folgenden event-Befehl, um anzugeben, dass sich ein Nutzer mit seinem Google-Konto angemeldet hat:
gtag('event', 'login', {'method': 'Google'});
Weitere Informationen zum Befehl event finden Sie in der API-Referenz.
Daten an Gruppen und Properties weiterleiten
Sie können einen Satz von Messinformationen an eine oder mehrere Google Analytics-Property-IDs und einen weiteren an andere Property-IDs senden. Sie können Eigenschaften in Gruppen organisieren und Daten an sie weiterleiten.
Das folgende Codebeispiel zeigt, wie ein sign_in-Ereignis an eine Gruppe „agency“ (Agentur) weitergeleitet wird, die zwei Google Analytics-Properties enthält.
// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });
// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });
Weitere Informationen zum Gruppieren und Weiterleiten von Daten
Erkennen, wann ein Ereignis gesendet wurde
In einigen Fällen müssen Sie wissen, wann ein Ereignis erfolgreich 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 die nächste Seite geladen wird. Das bedeutet, dass Ihre gtag.js-event-Befehle möglicherweise nicht ausgeführt werden.
Sie können beispielsweise ein Ereignis an Google Analytics senden, um zu erfassen, dass ein Nutzer auf die Schaltfläche „Senden“ eines Formulars geklickt hat. Wenn Sie auf die Schaltfläche „Senden“ klicken, wird in den meisten Fällen sofort die nächste Seite geladen, bevor event-Befehle ausgeführt werden können.
Sie können versuchen, das Ereignis abzufangen, damit die nächste Seite nicht mehr geladen wird und an Google Analytics gesendet werden kann. Nachdem das Ereignis gesendet wurde, kannst du das Formular programmatisch einreichen.
Ereignis-Callback-Funktionen implementieren
Sie können eine Ereignis-Callback-Funktion implementieren, die aufgerufen wird, sobald ein Ereignis erfolgreich gesendet wurde.
Im folgenden Beispiel sehen Sie, wie Sie die Standardversandaktion eines Formulars abbrechen, ein Ereignis an Google Analytics senden und das Formular dann mithilfe der Ereignis-Callback-Funktion noch einmal senden:
// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevent the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Send the event to Google Analytics and
// resubmit the form once the hit is done.
gtag('event', 'signup_form_complete', {
'event_callback': function() {
form.submit();
}
});
});
Zeitüberschreitungen verarbeiten
Das obige Beispiel hat jedoch einen Nachteil: Wenn die gtag.js-Bibliothek nicht geladen wird, wird die Ereignis-Callback-Funktion nicht ausgeführt und Nutzer können das Formular auch nicht senden.
Wenn Sie wichtige Websitefunktionen innerhalb der Ereignis-Callback-Funktion platzieren, sollten Sie immer eine Zeitüberschreitungsfunktion verwenden, wenn die gtag.js-Bibliothek nicht geladen werden kann.
Im folgenden Beispiel wird der obige Code um ein Zeitlimit erweitert. Wenn eine Sekunde vergeht, nachdem der Nutzer auf die Schaltfläche „Senden“ geklickt hat und die Callback-Funktion für das Ereignis 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);
// Monitors whether or not the form has been submitted.
// This prevents the form from being submitted twice in cases
// where the event callback function 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.
gtag('event', 'signup_form_complete', {
'event_callback': submitForm
});
});
Wenn Sie das obige Muster auf Ihrer gesamten Website verwenden, erstellen Sie eine Dienstfunktion zum Umgang mit Zeitüberschreitungen.
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), 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;
}
Jetzt können Sie alle Callback-Funktionen für Ereignisse mit einem Zeitlimit umschließen, damit Ihre Website wie erwartet funktioniert, auch wenn Ihre Ereignisse nicht gesendet werden oder die gtag.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.
gtag('event', 'signup_form', { 'event_callback': {
createFunctionWithTimeout(function() {
form.submit();
})
}});
});
Verschiedene Transportmechanismen angeben
Standardmäßig wählt gtag.js die HTTPS-Methode und den HTTPS-Transportmechanismus aus, mit denen Treffer optimal gesendet werden. Es gibt drei Optionen:
- „image“ (mit einem
Image-Objekt) - „xhr“ (mit einem
XMLHttpRequest-Objekt) - Beacon (mit der Methode
navigator.sendBeacon)
Bei den ersten beiden Methoden tritt das im vorherigen Abschnitt beschriebene Problem auf, bei dem beim Entladen der Seite keine Treffer gesendet werden. Die Methode navigator.sendBeacon löst dieses Problem, indem Treffer asynchron an den Webserver übertragen werden, ohne dass ein Treffer-Callback festgelegt werden muss.
Mit dem folgenden Code wird der Transportmechanismus für Browser, die ihn unterstützen, auf 'beacon' gesetzt:
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});