Z tego artykułu dowiesz się, jak wysyłać dane z witryny do Google Analytics za pomocą poleceń gtag.js.
Wysyłaj dane za pomocą polecenia event
Po dodaniu fragmentu kodu globalnego do strony internetowej wyślij dane do Google Analytics za pomocą polecenia event. Na przykład za pomocą tego polecenia event możesz wskazać, że użytkownik zalogował się na swoje konto Google:
gtag('event', 'login', {'method': 'Google'});
Więcej informacji o poleceniu event znajdziesz w dokumentacji interfejsu API.
Kierowanie danych do grup i usług
Możesz wysłać jeden zestaw informacji pomiarowych do jednego lub kilku identyfikatorów usługi w Google Analytics, a drugi – do innych identyfikatorów usług. Możesz grupować usługi i kierować do nich dane.
Na przykład ten przykładowy kod pokazuje, jak przekierować zdarzenie sign_in do grupy „agencja” zawierającej 2 usługi w Google Analytics.
// 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' });
Dowiedz się więcej o grupowaniu i kierowaniu danych.
Otrzymuj powiadomienia o wysłaniu wydarzenia
W niektórych przypadkach musisz wiedzieć, że zdarzenie zostało wysłane do Google Analytics, aby móc podjąć działania natychmiast po jego przesłaniu. Jest to częste, gdy musisz nagrać konkretną interakcję, która spowodowałaby przeniesienie użytkownika do bieżącej strony. Wiele przeglądarek zatrzymuje wykonywanie JavaScriptu zaraz po rozpoczęciu ładowania następnej strony, co oznacza, że polecenia event z tagu gtag.js mogą nigdy nie działać.
Możesz na przykład wysyłać do Google Analytics zdarzenie rejestrujące, że użytkownik kliknął przycisk przesyłania formularza. W większości przypadków kliknięcie przycisku przesyłania rozpocznie ładowanie następnej strony, jeszcze zanim zostanie wykonane dowolne polecenie event.
Rozwiązaniem jest przechwycenie zdarzenia, które zatrzyma ładowanie następnej strony w celu wysłania tego zdarzenia do Google Analytics. Po wysłaniu zdarzenia prześlij formularz automatycznie.
Implementowanie funkcji wywołań zwrotnych zdarzeń
Możesz zaimplementować funkcję wywołania zwrotnego zdarzenia, która jest wywoływana zaraz po wysłaniu zdarzenia.
Z przykładu poniżej dowiesz się, jak anulować domyślne działanie przesyłania formularza, wysłać zdarzenie do Google Analytics, a potem ponownie przesłać formularz za pomocą funkcji wywołania zwrotnego zdarzenia:
// 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();
}
});
});
Radzenie sobie z limitami czasu
Powyższy przykład ma jedną wadę: jeśli nie uda się wczytać biblioteki gtag.js, funkcja wywołania zwrotnego zdarzenia nigdy nie będzie działać, a użytkownicy nie będą mogli przesłać formularza.
Jeśli umieszczasz kluczowe funkcje witryny w funkcji wywołania zwrotnego zdarzenia, zawsze używaj funkcji limitu czasu w celu obsługi przypadków, w których nie udało się wczytać biblioteki gtag.js.
Poniższy przykład wzbogaca powyższy kod o limit czasu. Jeśli minie 1 sekunda od kliknięcia przycisku przesyłania przez użytkownika, a funkcja wywołania zwrotnego zdarzenia nie zostanie uruchomiona, formularz i tak zostanie przesłany ponownie.
// 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
});
});
Jeśli w swojej witrynie stosujesz powyższy wzorzec, utwórz funkcję narzędziową do obsługi limitów czasu.
Poniższa funkcja narzędziowa akceptuje funkcję jako dane wejściowe i zwraca nową funkcję. Jeśli zwrócona funkcja zostanie wywołana przed upłynięciem limitu czasu (domyślny limit czasu to jedna sekunda), wyczyści limit czasu i wywoła funkcję wejściową. Jeśli zwrócona funkcja nie zostanie wywołana przed upływem limitu czasu, funkcja wejściowa zostanie wywołana niezależnie.
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
Teraz możesz zamknąć wszystkie funkcje wywołań zwrotnych zdarzeń, dodając czas oczekiwania, aby zapewnić działanie witryny zgodnie z oczekiwaniami nawet wtedy, gdy zdarzenia nie zostały wysłane lub biblioteka gtag.js nigdy się nie wczytuje.
// 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();
})
}});
});
Określ różne mechanizmy transportu
Domyślnie tag gtag.js wybiera metodę HTTPS i mechanizm przesyłania, za pomocą których optymalnie wysyłać działania. Dostępne są 3 opcje:
- „image” (przy użyciu obiektu
Image) - „xhr” (przy użyciu obiektu
XMLHttpRequest) - „beacon” (za pomocą metody
navigator.sendBeacon),
Pierwsze dwie metody wykazują problem opisany w poprzedniej sekcji, gdzie działania nie są wysyłane, gdy strona jest wyładowywana. Metoda navigator.sendBeacon rozwiązuje ten problem dzięki asynchronicznemu przesyłaniu działań do serwera WWW bez konieczności ustawiania wywołania zwrotnego trafienia.
Ten kod ustawia mechanizm transportu na 'beacon' w przypadku przeglądarek, które go obsługują:
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});