Samouczek: Google Analytics

W tym samouczku pokazujemy, jak za pomocą Google Analytics śledzić użycie rozszerzenia. Jeśli tworzysz aplikację opartą na platformie, przeczytaj Analytics dla aplikacji, ponieważ aplikacje mają inne ograniczenia niż rozszerzenia.

Wymagania

W tym samouczku oczekujemy, że masz pewne rozszerzenia znane z pisania w przeglądarce Google Chrome. Jeśli potrzebujesz informacji o tym, jak napisać rozszerzenie, przeczytaj samouczek dla początkujących.

Aby śledzić rozszerzenie, musisz także mieć skonfigurowane konto Google Analytics. Pamiętaj, że podczas konfigurowania konta możesz użyć dowolnej wartości w polu URL witryny, ponieważ rozszerzenie nie ma własnego adresu URL.

Konfiguracja Analytics z wypełnionym informacjami o rozszerzeniu do Chrome

Instalowanie kodu śledzenia

Standardowy fragment kodu śledzenia Google Analytics pobiera plik o nazwie ga.js z adresu URL chronionego protokołem SSL, jeśli bieżąca strona została wczytana przy użyciu protokołu https://. Rozszerzenia i aplikacje do Chrome mogą używać tylko wersji ga.js chronionej protokołem SSL. Ładowanie pliku ga.js przez niezabezpieczone HTTP jest niedozwolone przez domyślną politykę bezpieczeństwa treści Chrome. Oprócz tego rozszerzenia do Chrome są hostowane zgodnie ze schematem chrome-extension://, co wymaga wprowadzenia niewielkich modyfikacji w standardowym fragmencie kodu śledzenia, aby pobierać dane ga.js bezpośrednio z lokalizacji https://ssl.google-analytics.com/ga.js, a nie z domyślnej lokalizacji.

Poniżej znajduje się zmodyfikowany fragment kodu interfejsu API śledzenia asynchronicznego (zmodyfikowany wiersz jest pogrubiony):

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Musisz też upewnić się, że rozszerzenie ma uprawnienia do wczytywania zasobu, złagodzając domyślną zasadę bezpieczeństwa treści. Definicja zasad w manifest.json może wyglądać tak:

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  ...
}

Oto wyskakujące okienko (popup.html), które wczytuje asynchroniczny kod śledzenia za pomocą zewnętrznego pliku JavaScript (popup.js) i śledzi pojedyncze wyświetlenie strony:

<!DOCTYPE html>
<html>
 <head>
   ...
  <script src="popup.js"></script>
 </head>
 <body>
   ...
 </body>
</html>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Pamiętaj, że ciąg UA-XXXXXXXX-X należy zastąpić własnym numerem konta Google Analytics.

Śledzenie wyświetleń strony

Kod _gaq.push(['_trackPageview']); śledzi jedno wyświetlenie strony. Możesz go użyć na dowolnej stronie rozszerzenia. Po umieszczeniu go na stronie w tle rejestruje on widok raz na sesję przeglądarki. Gdy umieścisz je w wyskakującym okienku, będzie on rejestrować widok za każdym razem, gdy zostanie ono otwarte.

Przeglądając dane o wyświetleniach każdej strony w rozszerzeniu, możesz się dowiedzieć, ile razy użytkownicy wchodzili w interakcję z rozszerzeniem w trakcie każdej sesji przeglądarki:

Widok Analytics najciekawszych treści w witrynie

Monitorowanie żądań dotyczących statystyk

Aby mieć pewność, że dane śledzenia z rozszerzenia są wysyłane do Google Analytics, możesz przejrzeć strony rozszerzenia w oknie Narzędzi dla programistów (więcej informacji znajdziesz w samouczku debugowania). Jak widać na ilustracji poniżej, jeśli wszystko jest skonfigurowane prawidłowo, żądania dotyczące pliku o nazwie __utm.gif powinny być widoczne.

Okno Narzędzi dla programistów z wyświetlonym żądaniem __utm.gif

Śledzenie zdarzeń

Skonfigurowanie śledzenia zdarzeń pozwala określić, z których części rozszerzenia użytkownicy najczęściej wchodzą w interakcję. Przykładowo, jeśli masz 3 przyciski, które użytkownicy mogą klikać:

<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>

Utwórz funkcję, która wysyła zdarzenia kliknięcia do Google Analytics:

function trackButton(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
};

Używaj go jako modułu obsługi zdarzeń przy każdym kliknięciu każdego przycisku:

var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', trackButtonClick);
}

Na stronie Przegląd śledzenia zdarzeń w Google Analytics znajdziesz dane dotyczące liczby kliknięć poszczególnych przycisków:

Widok Analytics danych śledzenia zdarzeń w witrynie

Pozwala to sprawdzić, które części rozszerzenia są wykorzystywane w niedostatecznym, a którym nadmiernym stopniu. Te informacje mogą pomóc w podjęciu decyzji dotyczących zmian w interfejsie użytkownika lub dodatkowych funkcji, które warto wdrożyć.

Więcej informacji o korzystaniu ze śledzenia zdarzeń znajdziesz w dokumentacji dla programistów Google Analytics.

Przykładowy kod

Przykładowe rozszerzenie korzystające z tych technik jest dostępne w przykładowym repozytorium.