ga.js to biblioteka JavaScript do pomiaru interakcji użytkowników z witryną. To jest starsza wersja biblioteki. Jeśli dopiero zaczynasz korzystać z Google Analytics, użyj najnowszej biblioteki śledzenia: analytics.js.
Krótkie wprowadzenie do kodu śledzenia
Fragment kodu Analytics to krótki fragment kodu JavaScript, który należy wkleić na stronach. Powoduje to aktywowanie śledzenia Google Analytics przez wstawienie elementu ga.js na stronie. Aby użyć go na swoich stronach, skopiuj poniższy fragment kodu, zastępując UA-XXXXX-X identyfikatorem usługi internetowej.
Wklej ten fragment kodu na stronie szablonu swojej witryny, aby wyświetlał się przed zamykającym tagiem </head>.
Jeśli potrzebujesz skorzystać z innych funkcji niż podstawowe śledzenie stron, sprawdź listę metod dostępnych w interfejsie API w dokumentacji śledzenia. Szczegółowe informacje o korzystaniu ze składni asynchronicznego znajdziesz w Przewodniku użytkowania. Szczegółowe instrukcje konfigurowania śledzenia znajdziesz w artykule w Centrum pomocy poświęconym konfigurowaniu śledzenia.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Powyższy fragment kodu przedstawia minimalną konfigurację potrzebną do asynchronicznego śledzenia strony. Służy on do ustawiania identyfikatora usługi internetowej strony za pomocą _setAccount, a potem wywołuje metodę _trackPageview, by przesłać dane śledzenia z powrotem do serwerów Google Analytics.
Ważne: jeśli aktualizujesz strony z tradycyjnego fragmentu kodu do najnowszej wersji asynchronicznej, musisz najpierw usunąć istniejący fragment kodu śledzenia. Nie zalecamy używania obu fragmentów jednocześnie na tej samej stronie. Instrukcje migracji znajdziesz w artykule o migracji do wersji asynchronicznej.
Jak działa składnia asynchroniczna
Stosowanie składni asynchronicznej jest możliwe dzięki obiektowi _gaq.
Działa jako kolejka, która jest strukturą danych pierwszą, czyli priorytetową, która zbiera wywołania interfejsu API, dopóki interfejs ga.js nie będzie gotowy do ich wykonania. Aby dodać coś do kolejki, użyj metody _gaq.push.
Aby przekazać wywołanie interfejsu API do kolejki, musisz przekonwertować je z tradycyjnej składni JavaScript na tablicę poleceń. Tablice poleceń to po prostu tablice JavaScript, które są zgodne z określonym formatem. Pierwszy element w tablicy poleceń to nazwa metody obiektu śledzącego, którą chcesz wywołać. To musi być ciąg znaków. Pozostałe elementy to argumenty, które chcesz przekazać do metody związanej z obiektami śledzenia. Może to być dowolna wartość JavaScript.
Ten kod wywołuje funkcję _trackPageview() przy użyciu tradycyjnej składni:
var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();
Odpowiedni kod w składni asynchronicznej wymaga 2 wywołań funkcji _gaq.push.
_gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']);
W składni asynchronicznej tworzenie obiektu skryptu śledzenia jest niejasne, ale i tak potrzebujemy sposobu ustawienia identyfikatora usługi internetowej na potrzeby elementu śledzącego. Aby to umożliwić, dodano metodę _setAccount. Wszystkie pozostałe metody obiektów skryptu śledzenia są takie same zarówno w śledzeniu asynchronicznym, jak i tradycyjne. Inna jest tylko składnia.
Więcej informacji o składni asynchronicznej znajdziesz w dokumentacji śledzenia metody _gaq.push.
Śledzenie za pomocą modułów obsługi zdarzeń HTML
Składni śledzenia asynchronicznego należy też używać z modułów obsługi zdarzeń DOM. Na przykład poniższy przycisk generuje zdarzenie po kliknięciu.
<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>
Nawet jeśli klikniesz ten przycisk przed zakończeniem wczytywania ga.js przez przeglądarkę, zdarzenie zostanie przechwycone i w końcu wykonane. W takiej sytuacji przeglądarka może zgłosić wyjątek.
Przekazywanie funkcji do kolejki
Oprócz tablic poleceń możesz też przekazywać obiekty funkcji do kolejki _gaq. Funkcje mogą zawierać dowolny kod JavaScript i tak jak tablice poleceń, są wykonywane w kolejności, w jakiej zostaną przekazane do funkcji _gaq. Ta technika jest przydatna do wywoływania interfejsów API śledzenia, które zwracają wartości. Poniższy kod umożliwia np. utworzenie adresu URL tagu łączącego i ustawienie właściwości href dla linku z wynikiem.
_gaq.push(function() {
var pageTracker = _gat._getTracker('UA-XXXXX-X');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
W przykładzie powyżej użyto elementu _gat do utworzenia obiektu śledzenia, ale ponieważ jest on przypisany do zmiennej lokalnej, nie może go użyć kod spoza funkcji. Mimo że jest to akceptowalne, możesz użyć metody _gat._createTracker, aby utworzyć trwały, dostępny globalnie obiekt.
Poniższy kod pokazuje, jak to działa.
_gaq.push(function() {
var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
_gaq.push(['myTracker._trackPageview']);
Powyższy przykład tworzy asynchroniczny element śledzący w funkcji, a następnie odwołuje się do niego później za pomocą nazwy w tablicy poleceń.
Możliwy jest również odwrotny przypadek użycia. Jeśli na przykład musisz użyć obiektu asynchronicznego śledzenia utworzonego za pomocą wcześniej przekazanej tablicy poleceń, użyj metody _gat._getTrackerByName. Poniższy kod ilustruje, jak to działa.
_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);
_gaq.push(function() {
var pageTracker = _gat._getTrackerByName('myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
1 pchnięcie, wiele poleceń
Zamiast wpisywać _gaq.push(...) przy każdym wywołaniu, możesz przekazać wszystkie polecenia naraz. Poniższy kod ilustruje tę metodę.
_gaq.push( ['_setAccount', 'UA-XXXXX-X'], ['_setDomainName', 'example.com'], ['_setCustomVar', 1, 'Section', 'Life & Style', 3], ['_trackPageview'] );
Działa to, ponieważ metoda _gaq.push imituje metodę Array.push, która umożliwia wypchnięcie wielu elementów za pomocą jednego wywołania.
Podział fragmentu kodu
Jeśli wolisz umieścić fragment kodu Analytics u dołu strony, pamiętaj, że nie musisz umieszczać całego kodu na dole.
Nadal możesz zachować większość korzyści wczytywania asynchronicznego, dzieląc fragment kodu na pół – pierwszą połowę strony pozostaw u góry strony, a resztę na dół. Pierwsza część fragmentu kodu śledzenia ma niewielki wpływ na renderowanie strony lub nie ma żadnego wpływu na renderowanie, więc możesz zostawić tę część u góry i umieścić część kodu, która wstawia ga.js, na dole.
Strona z asynchronicznym fragmentem kodu podzielonym na pół może wyglądać tak:
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>
<p>Page Content</p>
<script src="some_random_script.js"></script>
<p>Page Content</p>
<script type="text/javascript"> (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Oba fragmenty kodu należy umieścić w osobnych tagach skryptu, ale tylko 6 ostatnich wierszy oryginalnego asynchronicznego fragmentu kodu należy przenieść na dół. Wszystkie wiersze, które przekazują metody do obiektu _gaq, mogą pozostać u góry.
Unikanie typowych pułapek
Gdy używasz składni asynchronicznej lub tradycyjnej, pamiętaj o tych kwestiach:
- W nazwach metod wielkość liter ma znaczenie.
Jeśli używasz nazwy metody bez odpowiedniej wielkości liter, wywołania metody nie będą działać. Przykłady:_gaq.push(['_trackpageview']); // bad _gaq.push(['_trackPageview']); // good
- Używaj prawidłowych nazw metod.
Jeśli śledzenie nie działa prawidłowo, sprawdź, czy używasz prawidłowej nazwy metody. Przykłady:_gaq.push(['_setDomain', 'example.com']); // bad _gaq.push(['_setDomainName', 'example.com']); // good
- W cudzysłowie należy przekazywać tylko ciągi tekstowe. Pozostałe typy należy pozostawić bez cudzysłowu.
Wszystkie wartości, które nie są ciągiem znaków, takie jak wartości logiczne, literały obiektów, funkcje czy tablice, należy przekazywać bez cudzysłowu. Jeśli przekazujesz coś, co ma być interpretowane jako ciąg znaków, używaj tylko cudzysłowów. Jeśli przenosisz dane ze składni tradycyjnej, wszystkie parametry funkcji przekazane bez cudzysłowu powinny pozostać bez cudzysłowów w składni asynchronicznej. Przykłady:_gaq.push(['_setAllowLinker', 'false']); // bad _gaq.push(['_setAllowLinker', false]); // good
- Sprawdź, czy ciągi tekstowe nie zawierają odstępów na początku ani na końcu.
Przykłady:_gaq.push(['_setAccount', ' UA-65432-1']); // bad _gaq.push(['_setAccount', 'UA-65432-1']); // good
Wyłączanie śledzenia
W niektórych przypadkach trzeba wyłączyć kod śledzenia Google Analytics na stronie bez konieczności usuwania fragmentu kodu. Może tak być na przykład wtedy, gdy polityka prywatności Twojej witryny umożliwia użytkownikom zrezygnowanie z funkcji śledzenia Google Analytics.
Fragment kodu śledzenia ga.js zawiera teraz właściwość window, która – gdy jest ustawiona na true – wyłącza wysyłanie przez fragment kodu śledzenia danych do Google Analytics.
Gdy Google Analytics spróbuje ustawić plik cookie lub wysłać dane z powrotem do serwerów Google Analytics, sprawdzi, czy dla tej usługi
ustawiono true. Jeśli tak, będzie to miało taki sam efekt jak w przypadku użytkownika, który zainstalował
wtyczkę przeglądarki umożliwiającą rezygnację z Google Analytics.
Aby wyłączyć śledzenie, ustaw dla tej właściwości window wartość true:
window['ga-disable-UA-XXXXXX-Y'] = true;
Gdzie wartość UA-XXXXXX-Y odpowiada identyfikatorowi usługi internetowej, w której chcesz wyłączyć śledzenie.
Tę właściwość okna należy ustawić przed wywołaniem kodu śledzenia. Tę usługę musisz skonfigurować na każdej stronie, na której chcesz wyłączyć śledzenie Google Analytics. Jeśli właściwość nie jest ustawiona lub ma wartość Fałsz, śledzenie będzie działać w zwykły sposób.
Jeśli na przykład Twój kod śledzenia Google Analytics na stronie zawiera:
_gaq.push['_setAccount', 'UA-123456-1']
I jeśli chcesz wyłączyć zapisywanie przez kod śledzenia plików cookie lub wysyłanie danych z powrotem do Google Analytics, zastosuj ten kod przed wywołaniem kodu śledzenia:
window['ga-disable-UA-123456-1'] = true;
Jeśli na stronie z wieloma identyfikatorami usług internetowych używasz wielu modułów do śledzenia, musisz dla każdej usługi internetowej ustawić odpowiadającą jej zmienną window['ga-disable-UA-XXXXXX-Y'] wartość true, aby całkowicie wyłączyć śledzenie Google Analytics na tej stronie.
Przykład
Oto prosty przykład kodu, za pomocą którego możesz udostępnić użytkownikom funkcję rezygnacji.
Najpierw dodaj do witryny nowy link HTML, aby uruchomić logikę rezygnacji:
<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>
Następnie dodaj poniższy fragment kodu przed fragmentem kodu ga.js. Zastąp wartość gaProperty z UA-XXXX-Y właściwością używaną w Twojej witrynie.
To ta sama wartość, którą przekazujesz do polecenia _setAccount.
<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-XXXX-Y';
// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
window[disableStr] = true;
}
// Opt-out function
function gaOptout() {
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
window[disableStr] = true;
}
</script>
Gdy użytkownik kliknie link HTML rezygnacji, zostanie uruchomiona niestandardowa funkcja gaOptout. Utworzy ona plik cookie na długi czas w przyszłości i wyłączy zbieranie danych za pomocą tagu analytics.js.
Gdy użytkownik wróci do tej witryny, powyższy skrypt sprawdzi, czy został ustawiony plik cookie rezygnacji. Jeśli tak, zbieranie danych za pomocą tagu analytics.js również zostanie wyłączone.
Wymuszanie SSL (HTTPS)
Aby wymusić wysyłanie przez Google Analytics danych zawsze przy użyciu protokołu SSL, nawet z niezabezpieczonych stron (HTTP), użyj metody
_gat._forceSSL jak w tym przykładzie:
_gaq.push(['_setAccount', 'UA-12345-1']); _gaq.push(['_gat._forceSSL']); // Send all hits using SSL, even from insecure (HTTP) pages. _gaq.push(['_trackPageview']);