Wprowadzenie do ga.js (starsza wersja)

ga.js to biblioteka JavaScript do mierzenia interakcji użytkowników z Twoją witryną; To jest starsza biblioteka. 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 wklejasz na strony. Włącza śledzenie Google Analytics, wstawiając ga.js na stronie. Aby użyć tego na stronach, skopiuj poniższy fragment kodu, zastępując UA-XXXXX-X identyfikatorem usługi internetowej. Wklej ten fragment kodu na stronie szablonu witryny, aby wyświetlał się przed zamykającym tagiem </head>.

Jeśli chcesz użyć czegoś więcej niż podstawowego śledzenia stron, zapoznaj się z informacjami o śledzeniu, aby poznać listę metod dostępnych w interfejsie API, a także Przewodnik po wykorzystaniu, w którym znajdziesz szczegółowe informacje o korzystaniu ze składni asynchronicznej. Szczegółowe instrukcje konfigurowania śledzenia można znaleźć w Centrum pomocy w artykule o 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>

Fragment kodu powyżej odpowiada minimalnej konfiguracji wymaganej do asynchronicznego śledzenia strony. Używa go _setAccount, by ustawić identyfikator usługi internetowej, a potem wywołuje _trackPageview, by przesłać dane śledzenia 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 na tej samej stronie. Instrukcje migracji znajdziesz w artykule Migracja do Async.

Jak działa składnia asynchroniczna

Obiekt _gaq umożliwia składnię asynchroniczną. Działa w kolejce, czyli w strukturze danych pierwszych, pierwszych, które zbierają wywołania interfejsu API, dopóki ga.js nie będzie gotowy do wykonania. Aby dodać coś do kolejki, użyj metody _gaq.push.

Aby przekazać wywołanie interfejsu API do kolejki, musisz je przekonwertować z tradycyjnej składni JavaScriptu na tablicę poleceń. Macierze poleceń to tablice JavaScript, które są zgodne z określonym formatem. Pierwszy element w tablicy poleceń to nazwa metody śledzącej, którą chcesz wywołać. Musi to być ciąg znaków. Pozostałe elementy to argumenty, które chcesz przekazać do metody obiektu śledzenia. Może to być dowolna wartość JavaScript.

Ten kod wywołuje metodę _trackPageview() przy użyciu tradycyjnej składni:

var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();

Odpowiednik kodu w składni asynchronicznej wymaga dwóch wywołań w tagu _gaq.push.

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

W składni asynchronicznej sugerujemy utworzenie obiektu śledzącego, ale wciąż potrzebujemy sposobu, aby ustawić identyfikator usługi internetowej dla trackera. Aby zapewnić tę możliwość, dodaliśmy metodę _setAccount. Wszystkie pozostałe metody śledzenia obiektów są takie same w śledzeniu zarówno asynchronicznym, jak i tradycyjnym. Tylko składnia jest inna.

Więcej informacji o składni asynchronicznej znajdziesz w dokumentacji śledzenia dotyczącej metody _gaq.push.

Powrót do góry

Śledzenie za pomocą modułów obsługi zdarzeń HTML

W składni modułów obsługi zdarzeń DOM należy również używać składni śledzenia asynchronicznego. Na przykład poniższy przycisk generuje zdarzenie po kliknięciu.

<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>

Nawet jeśli ten przycisk zostanie kliknięty przed wczytaniem przeglądarki ga.js, zdarzenie zostanie przechwycone i wykonane. W takiej sytuacji przeglądarka może zrobić wyjątek.

Powrót do góry

Przekazywanie funkcji do kolejki

Oprócz tablicy poleceń możesz też przekazywać obiekty do kolejki _gaq. Mogą one zawierać dowolny kod JavaScript i, podobnie jak tablice poleceń, są wykonywane w kolejności, w jakiej są przekazywane do _gaq. Ta metoda przydaje się do wywoływania interfejsów API śledzenia, które zwracają wartości. Na przykład ten kod tworzy adres URL tagu łączącego i ustawia właściwość href 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 powyższym przykładzie użyto _gat do utworzenia obiektu trackera, ale ponieważ jest on przypisany do zmiennej lokalnej, kod spoza funkcji nie może z niego korzystać. Możesz to zrobić za pomocą metody _gat._createTracker, aby utworzyć stał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 tag śledzenia w funkcji, a następnie odwołuje się do niego później przez nazwę w tablicy poleceń.

Może też być odwrotnie. Jeśli np. chcesz użyć obiektu asynchronicznego śledzenia utworzonego za pomocą wcześniej przekazanej tablicy poleceń, użyj metody _gat._getTrackerByName. Poniższy kod pokazuje, 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/');
});

Powrót do góry

Jedno naciśnięcie, wiele poleceń

Zamiast wpisywać _gaq.push(...) w każdym wywołaniu, możesz przekazać wszystkie polecenia naraz. Poniższy kod pokazuje tę technikę.

_gaq.push(
  ['_setAccount', 'UA-XXXXX-X'],
  ['_setDomainName', 'example.com'],
  ['_setCustomVar', 1, 'Section', 'Life & Style', 3],
  ['_trackPageview']
);

Działa to, ponieważ metoda _gaq.push naśladuje metodę Array.push, która umożliwia przekazywanie wielu elementów za pomocą jednego wywołania.

Powrót do góry

Dzielenie fragmentu

Jeśli chcesz umieścić fragment kodu Analytics u dołu strony, pamiętaj, że nie musisz umieszczać całego fragmentu na dole. Nadal możesz zachować większość korzyści z asynchronicznego wczytywania, dzieląc fragment na pół – pozostaw pierwszą część strony i przeciągnij do dołu. Pierwsza część fragmentu kodu śledzenia ma niewielki wpływ na renderowanie stron lub nie ma go wcale. Możesz więc zostawić tę część u góry strony, a potem umieścić jej część wstawiającą ga.js.

Strona z fragmentem asynchronicznym 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 muszą być umieszczone w osobnych tagach skryptu, ale trzeba przenieść na początek ostatnie 6 wierszy oryginalnego fragmentu asynchronicznego. Wszystkie linie, które przesyłają metody do _gaq, mogą pozostać na górze.

Powrót do góry

Unikanie typowych błędów

Korzystając ze składni asynchronicznej lub tradycyjnej, pamiętaj o tych kwestiach:

  • W nazwach metod jest rozróżniana wielkość liter.
    Jeśli użyjesz 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żyj 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
    
  • cudzysłowy należy przekazywać tylko ciągami znaków. Pozostałe typy nie powinny być cytowane.
    Wszystkie wartości, które nie są ciągami, takie jak wartości logiczne, literały obiektu, funkcje lub tablice, należy przekazywać bez cudzysłowu. Używaj tylko cudzysłowów tylko wtedy, gdy udostępniasz coś, co ma być interpretowane jako ciąg znaków. W przypadku migracji z tradycyjnej składni każdy podany parametr funkcji bez cudzysłowu powinien pozostać w cudzysłowie. Przykłady:
    _gaq.push(['_setAllowLinker', 'false']);    // bad
    _gaq.push(['_setAllowLinker', false]);      // good
    
  • Dopilnuj, by ciągi nie zawierały spacji na początku ani na końcu.
    Przykłady:
    _gaq.push(['_setAccount', ' UA-65432-1']);    // bad
    _gaq.push(['_setAccount', 'UA-65432-1']);     // good
    

Powrót do góry

Wyłączanie śledzenia

W niektórych przypadkach może być konieczne wyłączenie kodu śledzenia Google Analytics na stronie bez konieczności usuwania jego fragmentu. Możesz to zrobić na przykład wtedy, gdy polityka prywatności Twojej witryny umożliwia użytkownikom rezygnację z śledzenia Google Analytics.

Fragment kodu śledzenia ga.js zawiera teraz właściwość okna, która po ustawieniu na true powoduje, że fragment kodu śledzenia nie może wysyłać danych do Google Analytics. Gdy Google Analytics próbuje ustawić plik cookie lub przesyłać dane z powrotem na serwery Google Analytics, sprawdza, czy ta właściwość ma wartość true. Uzyskane efekty będą takie same jak w przypadku zainstalowanej wtyczki Google Analytics Opt-out Browser Plugin.

Aby wyłączyć śledzenie, ustaw dla parametru „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.

Parametr okna musi być ustawiony przed wywołaniem kodu śledzenia. Właściwości musisz ustawić na każdej stronie, na której chcesz wyłączyć śledzenie Google Analytics. Jeśli parametr nie jest skonfigurowany lub ma wartość Fałsz, śledzenie działa normalnie.

Jeśli np. kod śledzenia Google Analytics na stronie zawiera:

_gaq.push['_setAccount', 'UA-123456-1']

Jeśli chcesz wyłączyć kod śledzenia lub przesyłać dane do Google Analytics, przed wywołaniem kodu śledzenia użyj tego kodu:

window['ga-disable-UA-123456-1'] = true;

Jeśli na stronie z wieloma identyfikatorami usług internetowych korzystasz z kilku identyfikatorów śledzenia, musisz ustawić równoważną zmienną window['ga-disable-UA-XXXXXX-Y'] na potrzeby każdej z nich, aby całkowicie wyłączyć śledzenie Google Analytics na tej stronie.

Przykład

Oto prosty przykład kodu, który możesz wykorzystać, aby udostępniać użytkownikom możliwość rezygnacji.

Najpierw dodaj nowy link HTML do swojej witryny, aby uruchomić proces rezygnacji:

<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>

Następnie dodaj ten fragment kodu przed fragmentem kodu ga.js. Zastąp wartość gaProperty w UA-XXXX-Y wartością właściwości używaną w 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 do rezygnacji, zostanie wywołana niestandardowa funkcja gaOptout. Plik cookie będzie przez długi czas stosowany w pliku cookie i wyłączy zbieranie danych analytics.js. Kiedy użytkownik powróci do tej witryny, powyższy skrypt sprawdzi, czy został ustawiony plik cookie służący do rezygnacji. Jeśli tak jest, zbieranie danych analytics.js również będzie wyłączone.

Wymuszanie protokołu SSL (HTTPS)

Aby wymuszać zawsze wysyłanie danych przez Google Analytics za pomocą 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']);

Powrót do góry