Dodawanie tagu analytics.js do witryny

Biblioteka analytics.js (znana także jako „tag Google Analytics”) to biblioteka JavaScript do pomiaru interakcji użytkowników z Twoją witryną. Z tego dokumentu dowiesz się, jak dodać tag Google Analytics do witryny.

Tag Google Analytics

Tag Google Analytics należy dodać u góry tagu <head>, przed innymi tagami skryptu lub CSS, a także dodać identyfikator usługi w Google Analytics, z którą chcesz 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 ma cztery główne funkcje:

  1. Tworzy element <script>, który asynchronicznie pobiera bibliotekę JavaScript analytics.js z witryny https://www.google-analytics.com/analytics.js
  2. Inicjuje globalną funkcję ga (zwaną kolejką poleceń ga()), która pozwala zaplanować uruchamianie poleceń po wczytaniu biblioteki analytics.js i gotowości do działania.
  3. Dodaje polecenie do kolejki poleceń ga(), aby utworzyć nowy obiekt skryptu śledzenia dla właściwości określonej za pomocą parametru 'GA_MEASUREMENT_ID'.
  4. Dodaje do kolejki poleceń ga() kolejne polecenie, aby wysyłać odsłonę do Google Analytics w przypadku bieżącej strony.

Implementacje niestandardowe mogą wymagać zmodyfikowania ostatnich dwóch wierszy tagu Google Analytics (polecenia create i send) lub dodania dodatkowego kodu w celu zarejestrowania większej liczby interakcji. Nie należy jednak zmieniać kodu, który wczytuje bibliotekę analytics.js lub inicjuje funkcję kolejki poleceń ga().

Alternatywny tag asynchroniczny

Opisany wyżej tag Google Analytics gwarantuje, że skrypt będzie wczytywany i wykonywany asynchronicznie we wszystkich przeglądarkach. Wadą tego tagu jest jednak to, że nowoczesne przeglądarki nie pozwalają na wstępne ładowanie skryptu.

Alternatywny tag asynchroniczny przedstawiony poniżej umożliwia obsługę wstępnego wczytywania, co zapewni niewielki wzrost wydajności w nowoczesnych przeglądarkach, ale może ograniczyć działanie do synchronicznego wczytywania i wykonywania w IE 9 i starszych przeglądarkach mobilnych, które nie rozpoznają atrybutu skryptu async. Tej konfiguracji tagu używaj tylko wtedy, gdy użytkownicy uzyskują dostęp do Twojej witryny głównie za pomocą nowoczesnych przeglądarek.

<!-- 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?

Po dodaniu jednego z tych tagów do swojej witryny wysyłasz odsłonę każdej strony odwiedzanej przez użytkowników. Google Analytics przetwarza te dane i może wywnioskować wiele informacji, takich jak:

  • Łączny czas spędzony przez użytkownika w witrynie.
  • Czas spędzony przez użytkownika na przeglądaniu poszczególnych stron oraz kolejność ich wizyt.
  • które linki wewnętrzne zostały kliknięte (na podstawie adresu URL kolejnej odsłony).

Dodatkowo: adres IP, ciąg znaków klienta użytkownika i wstępna kontrola strony przeprowadzana przez tag analytics.js podczas tworzenia nowego obiektu śledzenia są wykorzystywane do określenia:

  • Lokalizacja geograficzna użytkownika.
  • Używana przeglądarka i system operacyjny.
  • Rozmiar ekranu i zainstalowane oprogramowanie Flash lub Java.
  • Witryna odsyłająca.

Dalsze kroki

Do podstawowych potrzeb raportowania mogą wystarczyć dane zbierane za pomocą tagu Google Analytics, ale w wielu przypadkach trzeba odpowiedzieć na dodatkowe pytania dotyczące użytkowników.

Przewodniki na tej stronie wyjaśniają, jak mierzyć istotne interakcje za pomocą tagu analytics.js, ale przed wdrożeniem konkretnej funkcji zalecamy zapoznanie się z przewodnikami podanymi w sekcji Podstawy w panelu nawigacyjnym po lewej stronie. Te przewodniki zawierają ogólny opis biblioteki analytics.js i ułatwiają lepsze zrozumienie przykładów kodu używanych w witrynie.

W następnym przewodniku w tej serii wyjaśniamy, jak działa tag analytics.js.