Dodawanie pliku analytics.js do witryny

Biblioteka analytics.js (nazywana również „tagiem Google Analytics”) to biblioteka JavaScriptu służąca do pomiaru interakcji użytkowników z 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> i przed innymi tagami skryptu lub CSS. Dodaj też 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 spełnia 4 główne funkcje:

  1. Tworzy element <script>, który asynchronicznie pobiera bibliotekę JavaScript analytics.js z 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 jej przygotowaniu 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 kolejne polecenie do kolejki poleceń ga(), aby przesłać do Google Analytics odsłonę bieżącej strony.

Implementacje niestandardowe mogą wymagać modyfikacji dwóch ostatnich wierszy tagu Google Analytics (poleceń create i send) lub dodania dodatkowego kodu, aby rejestrować więcej interakcji. Nie zmieniaj jednak kodu, który wczytuje bibliotekę analytics.js ani inicjuje funkcji 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. Wadą tego tagu jest to, że nie pozwala on współczesnym przeglądarkom na wstępne wczytywanie skryptu.

Alternatywny tag asynchroniczny poniżej umożliwia dodanie obsługi wstępnego wczytywania, co zapewni niewielki wzrost wydajności w nowoczesnych przeglądarkach, ale może działać gorzej do synchronicznego wczytywania i wykonywania w IE 9 i starszych przeglądarkach mobilnych, które nie rozpoznają atrybutu skryptu async. Używaj tej konfiguracji tagu 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?

Gdy dodasz jeden z tych tagów do swojej witryny, wysyłana będzie odsłona każdej strony odwiedzanej przez użytkowników. Google Analytics przetwarza te dane i może wywnioskować wiele informacji, w tym:

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

Dodatkowo na podstawie adresu IP, ciągu znaków klienta użytkownika i wstępnej inspekcji strony wykonywanej przez tag analytics.js podczas tworzenia nowego obiektu skryptu śledzenia wykorzystywane są takie elementy jak:

  • Lokalizacja geograficzna użytkownika.
  • Używana przeglądarka i system operacyjny.
  • rozmiar ekranu oraz informację, czy masz zainstalowany program Flash lub Java;
  • Witryna odsyłająca.

Dalsze kroki

Jeśli chodzi o podstawowe potrzeby raportowania, dane zbierane za pomocą tagu Google Analytics mogą wystarczyć, ale w wielu przypadkach trzeba odpowiedzieć na dodatkowe pytania dotyczące użytkowników.

Z przewodników w tej witrynie dowiesz się, jak mierzyć interakcje za pomocą tagu analytics.js, na których Ci zależy. Jednak przed wdrożeniem konkretnej funkcji zdecydowanie zalecamy zapoznanie się z przewodnikami wymienionymi w sekcji Podstawy w panelu nawigacyjnym po lewej stronie. W tych przewodnikach znajdziesz ogólny opis biblioteki analytics.js i ułatwi Ci to zrozumienie przykładów kodu używanych w witrynie.

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