Dodawanie tagu analytics.js do witryny

Biblioteka analytics.js (zwana też &tagiem Google Analytics) to biblioteka JavaScriptu do pomiaru interakcji użytkowników z Twoją witryną. Z tego artykułu dowiesz się, jak dodać do witryny tag Google Analytics.

Tag Google Analytics

Tag Google Analytics należy dodać u góry tagu <head>, przed innymi tagami skryptu lub CSS oraz identyfikator usługi Google Analytics, z którą chcesz współpracować.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Powyższy kod spełnia 4 główne cele:

  1. Tworzy element <script>, który zaczyna asynchronicznie pobierać bibliotekę JavaScript analytics.js z narzędzia https://www.google-analytics.com/analytics.js
  2. Inicjuje globalną funkcję ga (czyli kolejkę poleceń ga()), która umożliwia planowanie wykonywania poleceń, gdy biblioteka analytics.js będzie wczytana i gotowa do uruchomienia.
  3. Dodaje do kolejki poleceń polecenie ga(), aby utworzyć nowy obiekt śledzenia dla właściwości określonej za pomocą parametru 'GA_MEASUREMENT_ID'.
  4. Dodaje do kolejki poleceń ga() inne polecenie, aby wysłać odsłonę do Google Analytics dla bieżącej strony.

Niestandardowe implementacje mogą wymagać zmodyfikowania 2 ostatnich wierszy tagu Google Analytics (polecenia create i send) lub dodania dodatkowego kodu, by rejestrować więcej interakcji. Nie możesz jednak zmienić kodu, który wczytuje bibliotekę analytics.js ani inicjuje funkcję kolejki poleceń ga().

Alternatywny tag asynchroniczny

Opisany powyżej tag Google Analytics gwarantuje, że skrypt będzie wczytywany i wykonywany asynchronicznie we wszystkich przeglądarkach. Uniemożliwia jednak jego wstępne ładowanie.

Alternatywny tag asynchroniczny poniżej wspiera obsługę wstępnego wczytywania, która zapewnia niewielki wzrost wydajności w nowoczesnych przeglądarkach, ale może obniżyć wydajność synchronicznego wczytywania i uruchamiania w przeglądarce IE 9 i starszych przeglądarkach mobilnych, które nie rozpoznają atrybutu skryptu async. Używaj tej konfiguracji tagów tylko wtedy, gdy użytkownicy korzystają głównie z nowoczesnej przeglądarki.

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

Jakie dane rejestruje tag Google Analytics?

Dodanie jednego z tych tagów do witryny polega na wysłaniu odsłony do każdej strony odwiedzanej przez użytkowników. Google Analytics przetwarza te dane i może wywnioskować wiele informacji, takich jak:

  • Łączny czas, jaki użytkownik spędza w Twojej witrynie.
  • Czas spędzany przez użytkowników na poszczególnych stronach i kolejność ich odwiedzania.
  • kliknięte linki wewnętrzne (na podstawie adresu URL następnej odsłony).

Ponadto: adres IP, ciąg znaków klienta użytkownika i inspekcja strony, którą analytics.js wykonuje podczas tworzenia nowego obiektu trackera, służy do określania:

  • Lokalizacja geograficzna użytkownika.
  • nazwa używanej przeglądarki i systemu operacyjnego;
  • Rozmiar ekranu i informacja o tym, czy zainstalowano wtyczkę Flash czy Java.
  • Witryna odsyłająca.

Dalsze kroki

W podstawowych przypadkach raportowania dane zbierane za pomocą tagu Google Analytics mogą być wystarczające, ale często trzeba też znaleźć dodatkowe pytania o użytkowników.

Z przewodników w tej witrynie dowiesz się, jak mierzyć cenne interakcje z tagiem analytics.js, ale zanim wdrożysz konkretną funkcję, zalecamy zapoznanie się z przewodnikami wymienionymi w sekcji Podstawowe w panelu nawigacyjnym po lewej stronie. Te przewodniki zawierają ogólny przegląd biblioteki analytics.js i pozwalają lepiej zrozumieć przykłady kodu używane w witrynie.

Z następnego przewodnika dowiesz się, jak działa tag analytics.js.