Autotrack

• Przegląd
• Pluginy
• Instalacja i używanie
  • Ładowanie autotracka za pomocą npm
  • Przekazywanie opcji konfiguracji
• Zaawansowana konfiguracja
  • Własna konfiguracja
  • Używanie autotracka z wieloma trackerami
• Wsparcie przeglądarek
• Tłumaczenia

Przegląd

Domyślny kod śledzący JavaScript Google Analytics działa gdy strona jest po raz pierwszy ładowana i wysyła odsłonę do Google Analytics. Jeśli chcesz wiedzieć więcej niż tylko o odsłonach strony (np. zdarzenia, interakcje socjalne), musisz napisać kod przechwytujący te informacje samodzielnie.

Skoro większość właścicieli stron troszczy się o wiele podobnych typów interakcji użytkownika, web developerzy piszą w kółko ten sam kod dla każdej strony którą tworzą.

Autotrack został stworzony by rozwiązać ten problem. Dostarcza domyślne śledzenie interakcji o które troszczy się większość osób, oraz kilka wygodnych funkcjonalności (np. śledzenie zadelarowanych zdarzeń) by jeszcze bardziej uprościć zrozumienie tego, jak ludzie korzystają z twojej witryny.

Pluginy

Biblioteka autotrack.js jest mała (6K gzip), oraz zawiera wymienione pluginy. Domyślnie wszystkie pluginy są dostarczane razem, ale mogą być również dołączane i konfigurowane niezależnie. Niniejsza tabela zawiera krótki opis każdego pluginu; możesz kliknąć na nazwę pluginu by zobaczyć jego pełną dokumentację oraz instrukcję użycia.

Plugin	Opis
cleanUrlTracker	Zapewnia spójność w ścieżkach URL raportowanych do Google Analytics; omija problem gdzie osobne wiersze w raportach twoich stron wskazują tą samą stronę.
eventTracker	Umożliwia śledzenie zadeklarowanych zdarzeń, za pomocą atrybutów HTML.
impressionTracker	Pozwala Tobie na śledzenie kiedy elementy są widoczne w oknie przeglądarki (viewport).
mediaQueryTracker	Umożliwia śledzenie pasujących media query oraz zmian media query.
outboundFormTracker	Automatycznie śledzi wysyłanie formularzy do zewnętrznych domen.
outboundLinkTracker	Automatycznie śledzi kliknięcia linków do zewnętrznych domen.
pageVisibilityTracker	Śledzi zmiany wyświetlania strony, co daje dużo bardziej dokładne informacje o sesji, czasie trwania sesji oraz dokładniejsze pomiary odsłon.
socialWidgetTracker	Automatycznie śledzi interakcję użytkownika z oficjalnymi widgetami Facebooka i Twittera.
urlChangeTracker	Automatycznie śledzi zmiany URL dla aplikacji składających się z jednej strony (SPA).

Wyłączenie odpowiedzialności: autotrack jest utrzymywany przez członków platformy developerskiej Google Analytics i jest przede wszystkim kierowany do społeczności developerów. Nie jest to oficjalny produkt Google Analytics i nie kwalifikuje się do wsparcia Google Analytics 360. Developerzy używający tej biblioteki są odpowiedzialni za zapewnienie aby ich implementacja spełniała wymogi Warunków świadczenia usług Google Analytics oraz zobowiązania prawne ich kraju zamieszkania.

Instalacja i używanie

Aby dodać autotrack do Twojej strony, musisz zrobić dwie rzeczy:

1. Załaduj skrypt autotrack.js na swojej stronie.
2. Zaktualizuj swój kod śledzący by wymagał pluginy autotracka których chcesz użyć.

Jeśli twoja strona już zawiera domyślny kod śledzący JavaScript, możesz go zmodyfiować by wyglądał podobnie do tego:

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');

// Replace the following lines with the plugins you want to use.
ga('require', 'eventTracker');
ga('require', 'outboundLinkTracker');
ga('require', 'urlChangeTracker');
// ...

ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script async src='path/to/autotrack.js'></script>

Oczywiście będziesz musiał dokonać następujących zmian by dopasować autotrack do swoich potrzeb:

• Zamień UA-XXXXX-Y na twój tracking ID
• Zamień przykładową listę pluginów w wyrażeniu require pluginami których chcesz użyć.
• Zamień path/to/autotrack.js aktualną lokalizacją pliku autotrack.js hostowanego na twoim serwerze.

Nota: system pluginów analytics.js został stworzony by wspierać asynchroniczne ładowanie skryptów, więc nie ma znaczenia czy autotrack.js jest ładowany przed czy po analytics.js. Nie ma także znaczenia czy biblioteka autotrack.js jest ładowana samodzielnie czy też wraz z resztą Twojego kodu JavaScript.

Ładowanie autotracka za pomocą npm

Jeśli używasz npm wraz z loaderem modułów takim jak Browserify, Webpack lub SystemJS, możesz dołączyć autotracka w swoim projekcie w taki sam sposób jak każdy inny moduł npm:

npm install autotrack

// In your JavaScript code
require('autotrack');

Powyższy kod dołączy wszystkie pluginy autotracka do generowanego pliku źródłowego. Jeśli chcesz dołączyć wybrany zestaw pluginów, możesz dołączyć je indywidualnie:

// In your JavaScript code
require('autotrack/lib/plugins/clean-url-tracker');
require('autotrack/lib/plugins/outbound-link-tracker');
require('autotrack/lib/plugins/url-change-tracker');
// ...

Powyższe przykłady pokazują jak dołączyć kod źródłowy pluginów do Twojego finalnego, wygenerowanego pliku JavaScript, co wypełnia pierwszy z dwóch kroków procesu instalacji.

Wciąż musisz zaktualizować swój kod śledzący i dołączyć pluginy których chcesz użyć:

// In the analytics.js tracking snippet
ga('create', 'UA-XXXXX-Y', 'auto');

// Replace the following lines with the plugins you want to use.
ga('require', 'cleanUrlTracker');
ga('require', 'outboundLinkTracker');
ga('require', 'urlChangeTracker');
// ...

ga('send', 'pageview');

Nota: uważaj by nie pomylić wyrażenia require w module node z komendą require ze skryptu analytics.js. Gdy ładujesz autotrack wraz z loaderem modułów npm, oba muszą zostać użyte.

Przekazywanie opcji konfiguracji

Wszystkie pluginy autotracka przyjmują obiekt konfiguracyjny jako trzeci parametr komendy require.

Niektóre pluginy (np. outboundLinkTracker, socialWidgetTracker, urlChangeTracker) zachowują się w sposób domyślny wystarczający dla większości osób bez specyfiowania żadnych opcji konfiguracyjnych. Pozostałe pluginy (np. cleanUrlTracker, impressionTracker, mediaQueryTracker) wymagają ustawienia pewnych opcji konfiguracyjnych by mogły pracować.

Sprawdź dokumentację konkretnego pluginu by dowiedzieć się jakie opcje akceptuje dany plugin (oraz czy ma ustawioną wartość domyślną).

Zaawansowana konfiguracja

Własna konfiguracja

Biblioteka autotrack jest zbudowana modułowo i każdy plugin zawiera swoje własne zależności, możesz więc zbudować swoją własną wercję biblioteki używając bundlera skryptów takiego jak Browserify.

Następujący przykład pokazuje jak stworzyć bibliotekę która zawiera tylko pluginy eventTracker oraz outboundLinkTracker:

browserify lib/plugins/event-tracker lib/plugins/outbound-link-tracker

Tworząc swoją własną kompilację, upewnij się by zaktualizować swój kod śledzący aby wymagał tylko pluginy zawarte w Twojej kompilacji. Wymaganie pluginu który nie jest zawarty w Twojej kompilacji stworzy niezaspokojoną zależność, co uniemożliwi egzekucję następnych komend.

Jeśli już używasz loadera modułów jak Browserify, Webpack lub SystemJS do budowy swojego kodu JavaScript, możesz pominąć powyższy krok i po prostu wymagać pluginów jak opisane w sekcji ładowanie autotracka za pomocą npm.

Używanie autotracka z wieloma trackerami

Wszystkie pluginy autotracka wspierają obsługę wielu trackerów na raz co wymaga nadania trackerowi nazwy w komendzie require. Następujący przykład pokazuje jak stworzyć dwa trackery i wymagać różnych pluginów autotracka z każdym z nich.

// Creates two trackers, one named `tracker1` and one named `tracker2`.
ga('create', 'UA-XXXXX-Y', 'auto', 'tracker1');
ga('create', 'UA-XXXXX-Z', 'auto', 'tracker2');

// Requires plugins on tracker1.
ga('tracker1.require', 'eventTracker');
ga('tracker1.require', 'socialWidgetTracker');

// Requires plugins on tracker2.
ga('tracker2.require', 'eventTracker');
ga('tracker2.require', 'outboundLinkTracker');
ga('tracker2.require', 'pageVisibilityTracker');

// Sends the initial pageview for each tracker.
ga('tracker1.send', 'pageview');
ga('tracker2.send', 'pageview');

Wsparcie przeglądarek

Autotrack działa bezpiecznie w każdej przeglądarce bez wyrzucania błędów, gdyż wykrywanie obsługi funkcjonalności jest zawsze używane wraz z potencjalnie nieobsługiwanym kodem. Jednakże, autotrack będzie śledził tylko używając funkcjonalności przeglądarki na której w danym momencie działa. Na przykład, jeśli użytkownik korzysta z przeglądarki Internet Explorer 8, nie będzie można śledzić użycia media query, gdyż media query nie jest wspierane przez program Internet Explorer 8.

Wszystkie pluginy autotracka są testowane przy użyciu Sauce Labs w następujących przeglądarkach:

✔

✔

6+

✔

9+

✔

Tłumaczenia

Następujące tłumaczenia zostały stworzone dzięki życzliwości społeczności. Są one nieoficjalne i mogą być niedokładne bądź przestarzałe:

• Japoński
• Chiński
• Polski

Jeśli odkryjesz problemy z konkretnym tłumaczeniem, uprzejmie prosimy kierować je do konkretnego repozytorium. W celu stworzenia swojego własnego tłumaczenia, postępuj następująco:

1. Stwórz fork tego repozytorium.
2. Zaktualizuj ustawienia swojego forka by umożliwić zgłaszanie problemów.
3. Usuń wszystkie pliki nie związane z dokumentacją.
4. Zaktualizuj pliki doumentacji swoimi tłumaczeniami.
5. Wyślij pull request do repozytorium googleanalytics/autotrack który dodaje link do twojego forka do powyższej listy.