Ostatni wiersz fragmentu kodu JavaScript dodaje polecenie send do kolejki poleceń ga(), które służy do wysyłania odsłony do Google Analytics:
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
Wysyłający obiekt to tracker, który został zaplanowany do utworzenia w poprzednim wierszu kodu, a wysyłane dane to dane przechowywane w śledzeniu.
W tym przewodniku opisujemy różne sposoby wysyłania danych do Google Analytics i wyjaśniamy, jak kontrolować to, jakie dane są wysyłane.
Działania, typy działań i platforma Measurement Protocol
Przesyłanie danych przez tag śledzenia do Google Analytics nazywa się wysłaniem działania, a każde działanie musi mieć określony typ działania. Tag Google Analytics wysyła działanie typu pageview. Inne rodzaje działań to screenview, event, transaction, item, social, exception i timing. W tym przewodniku omawiamy pojęcia i metody używane w przypadku wszystkich rodzajów działań. Instrukcje dotyczące poszczególnych rodzajów działań można znaleźć w sekcji Pomiary typowych interakcji użytkowników w panelu nawigacyjnym po lewej stronie.
Działanie to żądanie HTTP składające się z par pól i wartości zakodowane jako ciągu zapytania i wysłane do Measurement Protocol.
Jeśli podczas wczytywania strony korzystającej z tagu analytics.js masz otwarte narzędzia dla programistów w przeglądarce, możesz przeglądać działania wysyłane na karcie Sieć. Poszukaj próśb wysłanych na adres google-analytics.com/collect.
Jakie dane są wysyłane
Wysyłając działanie do platformy Measurement Protocol, tagi śledzenia wysyłają wszystkie pola, które są obecnie zapisane i są prawidłowymi parametrami platformy Measurement Protocol. Na przykład pola title i location są wysyłane, ale cookieDomain i hitCallback już nie.
W niektórych przypadkach chcesz wysyłać do Google Analytics pola dotyczące bieżącego działania, ale nie chcesz przesyłać kolejnych działań. Przykładem jest działanie związane ze zdarzeniem, w którym pola eventAction i eventLabel dotyczą tylko bieżącego działania.
Aby wysyłać pola tylko z bieżącym działaniem, możesz przekazać je jako argumenty do metody send. Aby przy kolejnych działaniach były wysyłane dane pól, zaktualizuj tag śledzenia za pomocą metody set.
Metoda wysyłania
Metodę send modułu śledzącego można wywołać bezpośrednio w samym obiekcie skryptu śledzenia lub przez dodanie polecenia send do kolejki poleceń ga(). W większości przypadków nie masz odwołania do obiektu skryptu śledzenia, więc zalecanym sposobem wysyłania danych modułu do Google Analytics jest użycie kolejki poleceń ga().
Korzystanie z kolejki poleceń ga()
Podpis dodawania polecenia send do kolejki poleceń ga() wygląda tak:
ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);
Jak już wspomnieliśmy, wartości określone w parametrach hitType, ...fields i fieldsObject są wysyłane tylko dla bieżącego działania. Nie są one zapisywane w obiekcie skryptu śledzenia ani wysyłane z kolejnymi działaniami.
Jeśli którekolwiek z pól przekazanych za pomocą polecenia send jest już ustawione w obiekcie skryptu śledzenia, zostaną użyte wartości przekazane w poleceniu, a nie wartości zapisane w tagu śledzenia.
Wywołania polecenia send muszą mieć określony typ hitType. W zależności od tego typu mogą być też wymagane inne parametry. Więcej informacji znajdziesz w poszczególnych przewodnikach dotyczących pomiaru typowych interakcji użytkowników w panelu nawigacyjnym po lewej stronie.
Najprostszym sposobem korzystania z polecenia send, który działa w przypadku wszystkich typów działań, jest przekazanie wszystkich pól za pomocą parametru fieldsObject. Na przykład:
ga('send', {
hitType: 'event',
eventCategory: 'Video',
eventAction: 'play',
eventLabel: 'cats.mp4'
});
Dla wygody niektóre typy działań umożliwiają przekazywanie często używanych pól bezpośrednio jako argumenty do polecenia send. Na przykład podane wyżej polecenie send dla działania typu „event” można napisać ponownie w takiej postaci:
ga('send', 'event', 'Video', 'play', 'cats.mp4');
Pełną listę pól, które można przekazywać jako argumenty dla różnych typów działań, znajdziesz w sekcji „Parametry” w dokumentacji metody wysyłania.
Korzystanie z nazwanego trackera
Jeśli zamiast domyślnego trackera używasz nazwanego modułu do śledzenia, możesz przekazać jego nazwę w ciągu poleceń.
To polecenie send zostanie wywołane w narzędziu śledzącym o nazwie „myTracker”:
ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');
W samym obiekcie śledzącym
Jeśli masz odwołanie do obiektu skryptu śledzenia, możesz bezpośrednio wywołać jego metodę send:
ga(function(tracker) {
tracker.send('event', 'Video', 'play', 'cats.mp4');
});
Wiedza o tym, kiedy działanie zostało wysłane
W niektórych przypadkach musisz wiedzieć, że działanie zostało wysłane do Google Analytics, aby móc z niego korzystać natychmiast po zakończeniu działania. 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 natychmiast po rozpoczęciu wyładowywania strony, co oznacza, że polecenia analytics.js służące do wysyłania działań mogą nigdy nie działać.
Na przykład gdy chcesz 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 spowoduje natychmiastowe rozpoczęcie wczytywania następnej strony, a polecenia ga('send', ...) nie będą uruchamiane.
Rozwiązaniem tego problemu jest przechwycenie zdarzenia, które zatrzyma wyładowywanie strony. Działanie możesz przesłać w zwykły sposób do Google Analytics, a po zakończeniu przesyłania działania – automatycznie ponownie przesłać formularz.
hitCallback
Aby otrzymywać powiadomienia po zakończeniu wysyłania działania, skonfiguruj pole hitCallback. hitCallback to funkcja, która jest wywoływana natychmiast po przesłaniu działania.
Z przykładu poniżej dowiesz się, jak anulować domyślne działanie przesyłania formularza, wysłać działanie do Google Analytics, a następnie ponownie przesłać formularz za pomocą funkcji hitCallback:
// 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();
}
});
});
Obsługa limitów czasu
Powyższy przykład działa dobrze, ale występuje w jego przypadku jeden poważny problem. Jeśli (z jakiegokolwiek powodu) biblioteki analytics.js nie uda się wczytać, funkcja hitCallback nigdy nie uruchomi się. Jeśli funkcja hitCallback nigdy nie zostanie uruchomiona, użytkownicy nie będą mogli przesłać formularza.
Gdy umieszczasz w funkcji hitCallback kluczowe funkcje witryny, zawsze używaj funkcji limitu czasu w celu obsługi przypadków, w których nie udało się wczytać biblioteki analytics.js.
Następny przykład aktualizuje powyższy kod, aby uwzględnić limit czasu. Jeśli minie 1 sekunda od kliknięcia przycisku przesyłania przez użytkownika, a hitCallback nie uruchomi się, 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);
// 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
});
});
Jeśli powyższego wzorca używasz w wielu miejscach w witrynie, prawdopodobnie łatwiej będzie utworzyć 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ślnie jest to 1 sekunda), usuwa limit czasu i wywołuje 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 łatwo opakować wszystkie funkcje hitCallback, aby mieć pewność, że witryna będzie działać zgodnie z oczekiwaniami nawet wtedy, gdy działania nie zostaną wysłane lub biblioteka analytics.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.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: createFunctionWithTimeout(function() {
form.submit();
})
});
});
Określanie różnych mechanizmów transportu
Domyślnie analytics.js wybiera metodę HTTP 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) i 'beacon' w nowej metodzie navigator.sendBeacon.
Dwie pierwsze metody wiążą się z problemem opisanym w poprzedniej sekcji (przy czym działania często nie są wysyłane, gdy strona jest wyładowywana). Natomiast metoda navigator.sendBeacon to nowa funkcja HTML stworzona w celu rozwiązania tego problemu.
Jeśli przeglądarka użytkownika obsługuje funkcję navigator.sendBeacon, możesz określić 'beacon' jako mechanizm transport i nie martwić się o ustawienie wywołania zwrotnego trafienia.
Ten kod ustawia mechanizm transportu na 'beacon' w przeglądarkach, które go obsługują.
ga('create', 'UA-XXXXX-Y', 'auto');
// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');
Dalsze kroki
Pomiar niektórych rodzajów interakcji użytkowników może czasami wymagać złożonych implementacji. Jednak w wielu przypadkach te wdrożenia są już opracowane i udostępniane jako wtyczki analytics.js. W następnym przewodniku wyjaśniamy, jak używać wtyczek analytics.js z kolejką poleceń ga().