W tym tutoriale zaprezentuję proces integracji Google Tag Managera na stronach WWW opartach na Alfredzie (ale sprawdzi się też w każdej innej aplikacji), w celu trackowania wizyt i eventów przez Google Analytics.
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/
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 google@biggerpicture.agency, ale mogą zdarzyć się wyjątki) - zapytaj Managera.
- 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 google@biggerpicture.agency
Etap 1 - Google Analytics Tracking 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 znajdź Tracking info —> Tracking Code.
Ważne! Poniższa integracja dotyczy tylko Google Analytics w wersji Universal Analytics. Wersja Google Analytics 4 jest niekompatybilna.
Skopiuj wartość Tracking ID, gdyż za chwilę będzie Ci potrzebna.
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).
Zainstaluj kod GTM w sekcji i przed na stronie pochodzący z konta Google Tag Manager (po stworzeniu nowego konta powinien się sam pojawić, ale w każdej chwili możesz go znaleźć w zakłade Administracja —> Zainstaluj Menedżera tagów Google).
Jeżeli instalujesz kod na stronie opartej na Alfredzie - zaloguj się do Alfreda i wklej kod poprzez zakładkę Settings -> Website Scripts.
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 opcję zastępowania kontenerów, a jeśli operujesz na istniejącym - wybierz opcję scalania).
3.2
Pobierz gotowy plik konfiguracyjny (stworzony z myślą o stronach opartych na Alfredzie, ale może być pomocny do wykorzystania w innych typach projektów).
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:
<ACCOUNT ID><CONTAINER ID><GOOGLE ANALYTICS TRACKING 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 <ACCOUNT ID>, a po /containers to <CONTAINER ID>. Google Analytics Tracking ID - tę wartość powinieneś mieć po etapie 1 tego tutorialu.
Zastąp każde występowanie tych zmiennych w tym pliku tymi wartości. 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”. Nie mniej 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
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
Jeżeli masz pewność, że po stronie kodu frontendowego wszystko wygląda OK - przejdź do etapu 5.
Etap 5 - testy
Bedąc na stronie głownej konta strony WWW na Google Tag Manager, kliknij w przycisk Preview.
Jeżeli po każdym kliknięciu w link na stronie (po przejściu na podstronę) widzisz wyzwolony tag Website Page Views - oznacza to, że wszystko jest w porządku z trackowaniem wizyt na stronie.
Jeśli po wysłaniu formularza kontaktowego również widzisz wyzwolony tag (tym razem o nazwie Send form submission event to GA) - gratulacje - zainstalowaleś GTM prawidłowo :-)