Konfiguracja Google Analytics. Strona www.

Konfiguracja i instalacja Google Tag Manager’a oraz Google Analytics 4, krok po kroku

Kolejny wpis z cyklu „Google Analytics 4”. Tym razem zajmiemy się konfiguracją Google Analytics 4. Wszystko to – krok po kroku, aby móc zacząć śledzenie zachowań użytkowników na Twojej stronie internetowej. Serdecznie zapraszam!

W poprzednim artykule z cyklu, rozmawialiśmy o różnicach między poprzednią wersją Universal Analytics, a Google Analytics 4. Koniecznie zapoznaj się z nim, jeśli korzystałeś wcześniej z Universal Analytics.

W tym wpisie, założymy konto w GA4 oraz zainstalujemy i podłączymy śledzenie do Twojej strony. Niezależnie czy stronę zrobił ktoś dla Ciebie, czy samodzielnie korzystasz z WordPress’a, Drupala czy czystego HTML, podłączymy GTM – Google Tag Manager, aby już więcej nie trzeba było grzebać w kodzie. W kolejnych częściach będziemy dodatkowo konfigurować dodatkowe opcje.

Google Tag Manager

Google Tag Manager to darmowe narzędzie od Google, które umożliwia łatwe zarządzanie tagami (fragmentami kodu) na stronie internetowej lub w aplikacji mobilnej bez konieczności modyfikacji kodu źródłowego. Umożliwia dodawanie i aktualizowanie tagów analitycznych, marketingowych i wsparcia bez pomocy deweloperów (programistów). Narzędzie to pomaga w śledzeniu konwersji, analizie ruchu, remarketingu oraz optymalizacji SEO. Czyli wystarczy raz do kodu wrzucić odpowiedni tag i dzięki niemu będziemy mogli – tak jakby – wstrzykiwać do naszej witryny kolejne tagi, nie grzebiąc już w kodzie.

Dodawanie Tag Managera do strony

Jeśli mamy WordPressa możemy skorzystać z dwóch opcji. Nałatwiejsza dla kogoś, kogo przeraża GTM to wtyczka bezpośrednio do Google, dzięki niej zalogujesz się na swoje konto i automatycznie podłączysz wszystkie kody śledzące czy to GTM czy Google Analytics czy Google Adsense.

Więcej o tym plugin’ie przeczytasz tutaj.

Site Kit by Google – Analytics, Search Console, AdSense, Speed

Jeśli jednak nie chcesz dodatkowych pluginów, możesz po prostu wkleić wygenerowany kod z GTM, który wygląda tak:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Gdzie GTM-XXXXXX to Twój identyfikator tagu. W WordPressie, wrzuć ten kod, do sekcji head w nagłówku motywu Twojej strony. Wystarczy, że wejdziesz do sekcji 'Wygląd’ i wyedytujesz pliki motywu. „Nagłówek motywu”.

Możesz też użyć wtyczki (GTM4WP), która zrobi to za Ciebie:

GTM4WP – A Google Tag Manager (GTM) plugin for WordPress

No dobra, ale jak mam sprawdzić czy to działa? O tym za chwilę. Dodajmy tylko tag do Twojego GTM w postaci kodu śledzącego z Google Analytics 4.

Tworzenie konta GA4

Wchodzimy do Google Analytics za pomocą swojego konta Google i zakładamy Konto lub Usługę. Czym to się różni? Konto zgrupuje Ci usługi (Twoje strony) w jednym miejscu. Do konta jak i do usług możesz nadawać uprawnienia dla osób z zewnątrz lub współpracowników. Ja utrzymuje kulturę kont, grupując je w konta: Witryny prywatne, Strony firmowe. Styl jest dowolny. Dobrze odpowiednią praktykę dla siebie.

Zakładanie usługi GA4

Zakładanie jest proste, wystarczy uzupełnić wszystkie pola zgodnie z naszymi potrzebami. Ważne aby wybrać właściwą strefę czasową, walutę. Następnie podajemy kategorię oraz rozmiar swojej organizacji. Kluczowy na końcu ekran z wyborem strumienia danych, bowiem tam decydujemy czy GA będzie liczyło dane z aplikacji internetowej (strony www) czy mobilnej na Android czy iOS. Tu w naszym przypadku wybieramy aplikacje web. Po założeniu konta kopiujemy sobie identyfikator śledzenia w postaci G-XXXXXXX. Będzie potrzebny w dalszych krokach.

Dodawanie tagu GA4 to Google Tag Managera

Jeśli nie masz google tag managera, załóż najlepiej logując się tym samym kontem google co do usługi GA, aby zachować spójność. Jeśli wykonałeś wcześniejsze kroki z tego wpisu, to powinieneś mieć już podłączony google tag manager czyli gtag do witryny. Dzięki temu, nie będzie trzeba przy dodawaniu kolejnych tagów śledzących, za każdym razem edytować całej witryny.

Aby dodać tag, należy przejść do zakładki tag, kliknąć dodać nowy, nazwać jako GA4, następnie skonfigurować dwa pola. Tag Configuration oraz Triggering.

Ja robię to dodając tag configuration jako „Google Tag”. Następnie tworze stałą jako tagID i wklejam tam identyfikator GA.

Tworzenie zmiennej:

Ustawianie zmiennej w gtag manager

Klikamy w klocek po prawej stronie tego pola i dążymy do ustawienia zmiennej „stałej” gdzie wkleimy nasz kod z GA4 w formacie:  G-XXXXXXXXX

Reguła gtag

Reguła wyzwalająca:

GA4 jako tag w tag managerze

Jako regułę inicjującą dodaje Initialization – All Pages, ponieważ chcę uruchamiać to jak najwcześniej w przypadku każdej strony mojego serwisu. Finalnie wygląda u mnie to tak: (mam stary jeszcze kod śledzący GA, UA, który niebawem przejdzie do lamusa)

Tag Manager

No dobra, to może w końcu sprawdźmy czy to wszystko nam działa. Przejdźmy zatem to weryfikacji.

Weryfikacja dodania Google Tag Managera

Wystarczy, że wejdziemy w opcje „Podgląd”/”Preview” (prawy górny róg) w zakładce z naszymi opublikowanymi tagami. Przekieruje to nas do formularza w którym wpiszemy adres strony, następnie GTM dokona analizy i czy kod gtag został prawidłowo do naszej strony.

Tag Manager

Pozytywny wynik weryfikacji:

Gtag debuger

Weryfikacja dodania GA4 do strony

Aby sprawdzić czy prawidłowo działa śledzenie ruchu, trzeba wejść na naszej usłudze w zakładkę administracja i wybrać DebugView

Debug GA4

Po wybraniu Debug View należy otworzyć stronę

GA Wynik debugowania. Ruch rejestrowany na stronie

Jeśli naszym oczom, po przeklikaniu zakładek na naszej witrynie pojawi się taki widok, znaczy że ruch został zarejestrowany, a my poprawnie dodaliśmy tagi.

 

Przydatne wtyczki do Chrome (debugowanie i analiza tagów):

https://chromewebstore.google.com/detail/adswerve-datalayer-inspec/kmcbdogdandhihllalknlcjfpdjcleom?hl=pl

https://chromewebstore.google.com/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en

 

Jeśli masz pytania lub uwagi, zapraszam do komentowania! Jeśli spodobał Ci się ten wpis, uważasz go za przydatny – podziel się z innymi. Dzięki temu dowiem się, że warto tworzyć kolejne wpisy z tej serii.

Rate this post

Autor

Dominik

Zajmuje się tworzeniem stron internetowych i realizacją działań SEO na rzecz dużych i małych przedsiębiorstw. Pracowałem między innymi dla Semahead czy wydawnictwa HELION. Prowadzę szkolenia z zakresu HTML5 i SEO. Każdego dnia odkrywam nowe możliwości, tak by rozwijać Twój biznes w sieci.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *


The reCAPTCHA verification period has expired. Please reload the page.