W tym tutoriale zaprezentuję proces integracji Google Tag Managera (GTM) na stronach WWW, w celu trackowania wizyt i eventów przez Google Analytics (GA).
Jeśli nie wiesz, czym jest Google Tag Manager i do czego służy – najpierw przeczytaj ten artykuł: https://www.orbitmedia.com/blog/what-is-google-tag-manager-and-why-use-it/
Pomocnym źródłem wiedzy na temat Google Analytics oraz Google Tag Manager jest niniejsza prezentacja.
To, co potrzebujesz zrobić na początku:
- dowiedzieć się, czy mamy dostęp do konta Google Analytics od klienta (najczęściej dostęp udostępniany jest dla naszej firmy, logując się do Google Analytics kontem [email protected], ale mogą zdarzyć się wyjątki) – zapytaj lidera danego projektu.
- dowiedzieć się, czy mamy dostęp do Google Tag Manager od klienta (jeśli w ogóle takowe istnieje, a jeśli nie, to czy możesz je założyć logując się do Google Tag Managera naszym kontem [email protected]
Etap 1 – Google Analytics (GA4) Measurement ID
Aby wysyłać informacje z GTM do GA, potrzebny jest identyfikator trackingowy z konta Google Analytics. Zaloguj się do Google Analytics (https://analytics.google.com/), przełącz się na odpowiednie konto strony WWW. Przejdź do zakładki Admin i w kolumnie Property znajdź —> Data Streams.
Jeżeli nie istnieje stream o typie Web, utwórz go, podając nazwę (np. Nazwa Projektu) i podając adres URL strony produkcyjnej.
Następnie przejdź do szczegółów streamu i skopiuj wartość Measurement ID, gdyż będzie ona potrzebna w kolejnych krokach.
Ważne: opcja Enhanced Measurement powinna być wyłączona, gdyż eventy będą wysyłane do Google Analytics przez Google Tag Manager, a nie przez skrypt GA bezpośrednio.
Etap 2 – Google Tag Manager
Zaloguj się do Google Tag Manager (https://tagmanager.google.com/). Jeżeli istnieje konto – przejdź do niego, a jeśli nie – utwórz nowe (podaj nazwę konta, kraj, nazwę kontenera [użyj domeny PRODUKCYJNEJ jako nazwa] i wybierz platformę docelową jako Witryna internetowa (Web)).
Zainstaluj kod GTM na stronie pochodzący z konta Google Tag Manager poprzez CMS w sekcji <head> (po stworzeniu nowego konta kod powinien się sam pojawić, ale w każdej chwili możesz go znaleźć w zakładce Admin —> Install Google Tag Manager).
Jeżeli instalujesz kod na stronie opartej na Alfredzie – zaloguj się do Alfreda i wklej kod poprzez zakładkę Settings -> Website Scripts -> Scripts -> Scripts in <head> section.
Jeżeli instalujesz kod na stronie opartej o WordPressa – przejdź do zakładki Scripts i wklej w sekcji <head>.
Jeżeli instalujesz kod na stronie opartej o jakiś framework JS (np. Next.js) – postaraj się umieścić kod w sekcji <head>, przed ładowaniem jakiegokolwiek pliku CSS.
Etap 3 – konfiguracja kontenera GTM
3.1
Przejdź do zakładki Admin na koncie Google Tag Manager, a konkretnie do opcji importowania kontenerów.
Wybierz obszar roboczy i opcję importowania (jeśli dopiero co stworzyłeś konto wybierz obszar domyślny, opcję zastępowania kontenerów, a jeśli operujesz na istniejącym – wybierz opcję scalania).
3.2
Pobierz gotowy plik konfiguracyjny.
W niniejszym pliku konfiguracyjnym (po pobraniu) musisz zastąpić WSZYSTKIE występowania poniższych “zmiennych” wartościami odpowiadającymi kontu strony, na której instalujesz Google Tag Manager:
<GTM ACCOUNT ID><GTM CONTAINER ID><GA MEASUREMENT ID>
Jak najszybciej zdobyć te wartości? Będąc w sekcji Admin na koncie Google Tag Manager, spójrz na pasek adresu:
Wartość po /accounts/ to <GTM ACCOUNT ID>, a po /containers to <GTM CONTAINER ID>. <GA MEASUREMENT ID> – tę wartość powinieneś mieć po etapie 1 tego tutorialu.
Zastąp każde występowanie tych zmiennych w tym pliku tymi wartościami. Gdy to zostanie zrobione, dokończ import, dokonując uploadu tego pliku. Jeśli ten proces przebiegnie pomyślnie, przejdź do Etapu 4.
Etap 4 – upewnienie się, że frontend strony wysyła dane do Google Tag Manager
Zasadniczno powinieneś upewnić się, że dzieją się 2 rzeczy:
- każda wizyta na stronie wysyła informację o wizycie
- każda wysyłka formularza na stronie wysyła event o “form submission”
Jeśli frontend został stworzony na bazie tradycyjnego boilerplate frontendowego (https://bitbucket.org/snowflakers/boilerplate-traditional/src/master/), tak naprawdę nie powinieneś się o nic martwić – wszystko powinno działać “od strzału”. Niemniej jednak zachęcam do przeanalizowania poniższych punktów, aby mieć pewność, że dane do Google Tag Manager są wysyłane prawidłowo.
4.1
Co do punktu pierwszego powyższej dwupunktowej listy, upewnij się, że w kodzie JSowym strony wyzwala się ta metoda: https://bitbucket.org/snowflakers/boilerplate-traditional/src/c31f26b74acd32341c86a4ae1b31da9c4e4e5123/frontend/app/scripts/app.js#lines-48
i jest ona w takiej postaci: https://bitbucket.org/snowflakers/boilerplate-traditional/src/master/frontend/app/scripts/utils/track-event.js
Innymi słowy: frontend strony musi wysyłać do Google Tag Manager event o nazwie “page-visit“.
4.2
Co do wysyłki formularzy, tutaj znajdziesz kod, który odpowiada za trackowanie wysłanych wiadomości: https://bitbucket.org/snowflakers/boilerplate-traditional/src/master/frontend/app/scripts/utils/form.js
Innymi słowy: frontend strony musi wysyłać event o nazwie “contact-form-submission” po prawidłowym wysłaniu formularza.
Jeżeli masz pewność, że po stronie kodu frontendowego wszystko wygląda OK – przejdź do etapu 5.
Jeżeli instalujesz GTM na customowej stronie opartej o jakiś JSowy framework, na każdej zakończonej tranzycji na stronie (np. ze strony A do strony B), musisz wysyłać do Google Tag Manager event o nazwie page-visit. Wysyłka formularza powinna wyzwolić wysłanie eventu o nazwie contact-form-submission. W wysyłaniu wspomnianych zdarzeń, pomogą Ci snippety kodu z punktów 4.1 – 4.2, które musisz po prostu dostosować do projektu, nad którym pracujesz.
Etap 5 – testy
Bedąc na stronie głownej konta strony WWW na Google Tag Manager, kliknij w przycisk Preview. Twoim oczom powinien ukazać się Tag Assistant, dzięki któremu będziesz w stanie nawigować na stronie (podaj adres URL strony, na której zainstalowałe(a)ś kod GTM) i podglądać wszystkie zdarzenia, jakie wysyłają się ze strony do Google Tag Managera.
Jeżeli po każdym kliknięciu w link na stronie (po przejściu na podstronę) widzisz wyzwolony tag GA4 – configuration (lub GA4 – send page visit w przypadku stron typu SPA) – oznacza to, że wszystko jest w porządku z trackowaniem wizyt na stronie. Zaleca się również zerknięcie w zakładkę Real time w Google Analytics podczas nawigowania na stronie w ramach testów, by zobaczyć, czy dana wizyta na stronie jest widoczna.
Jeśli po wysłaniu formularza kontaktowego również widzisz wyzwolony tag (tym razem o nazwie GA4 – send form submission status) – gratulacje – zainstalowałe(a)ś GTM prawidłowo 🙂