Postanowiłem napisać serię artykułów, które pomogą w zrozumieniu czym jest Google Tag Manager, oraz do czego można go wykorzystać. Postaram się, aby artykuły były jak najprostsze i jak najbardziej zrozumiałe. Te artykuły są skierowane raczej do użytkowników, którzy do tej pory nie mieli styczności z narzędziem.
Czym jest Google Tag Manager, a czym nie jest?
GTM, czyli Google Tag Manager jest narzędziem do zarządzania różnymi kodami na stronach internetowych (lub w aplikacjach). Działa to w taki sposób, że w narzędziu tworzy się wygodne kontenery, czyli miejsca na różnego rodzaju skrypty. Sam GTM do czasu zapełnienia kontenera nie powoduje na stronie żadnych zmian. Nie jest więc narzędziem, które zbiera i gromadzi dane, „śledzi użytkowników” i powoduje różne funkcje. Za to powoduje, że wszelkie narzędzia, które to do tego służą – instaluje się na stronie w dużo prostszy i wielokrotnie bardziej uporządkowany sposób. Dodatkową zaletą jest to, że po wpięciu GTM na stronę (jednorazowo) przez web developerów – często nie będzie trzeba prosić ich o pomoc, gdyż dużo pracy wykonuje się później już wewnątrz kontenera. Oczywiście są implementacje, które tego wymagają. Nie jest to jednak zagadnieniem rozwijanym w tym artykule.
Instalacja GTM na stronie
Aby kontener był umieszczony na stronie – należy go najpierw wygenerować , a następnie otrzymane kody wpiąć na wszystkie podstrony w odpowiednich miejscach. Po zalogowaniu się do GTM są 2 opcje, można utworzyć nowe konto:
Można również utworzyć kontener do istniejącego konta, funkcja ta znajduje się po kliknięciu w trzy kropki:
Niezależnie od wybranej opcji, następnym krokiem jest skonfigurowanie kontenera poprzez wpisanie jego nazwy oraz rodzaju. Aby kontener dotyczył strony internetowej należy wybrać pierwszą opcję.
Teraz pojawiają się kody, które należy umieścić na każdej podstronie witryny, w której chcemy mieć kontener GTM. Ważne, aby pierwszy kod był wpięty w sekcji <head> i to najwyżej jak to możliwe, a drugi kod bezpośrednio po tagu <body>
Są jeszcze inne sposoby dodawania kodu GTM, np. poprzez wtyczki. To zostanie jednak opisane w innym artykule. Jeśli kod jest poprawnie wpięty, wszystkie tagi zawarte w kontenerze (i opublikowane) będą się odtąd uruchamiać zgodnie z dodanymi regułami i zmiennymi.
Czym są tagi?
Tagi są konkretnymi skryptami, które są wywoływane. Mogą to być wklejone bezpośrednio skrypty, które np. dostarczyło jakieś narzędzie, które chcemy zaimplementować lub zaprojektowali programiści. W wielu przypadkach nie trzeba jednak pisać ani linijki kodu. Dzieje się tak, ponieważ GTM udostępnia gotowe szablony, które należy jedynie wypełnić identyfikatorami naszych kont i potrzebnymi parametrami danego szablonu. I tak przykładowo, aby dodać tag Google Analytics, zamiast przeklejać różne wariacje jego skryptu, lepiej jest wybrać szablon Google Analytics i jedynie wypełnić go właściwym identyfikatorem śledzenia i rodzajem tagu.
W ten sam sposób można wybrać tagi np. Google Ads lub Hotjar. Oczywiście można też wkleić bezpośrednio kod, taki jak otrzymaliśmy lub stworzyliśmy. Do tego służy typ tagu: Niestandardowy kod HTML.
GTM posiada kilkadziesiąt wbudowanych szablonów tagów – znajduje się tam wiele popularnych narzędzi. Jakby komuś tego było mało jest też możliwość importowania z galerii rozwiązań innych, co pozwala na usprawnienie pracy. Przykładowo jest świetny szablon zastępujący skrypt piksela Facebooka.
Czym są reguły?
Tagi uruchamiają się tylko wtedy, kiedy podłączymy do nich reguły i zostaną one spełnione przez użytkownika na stronie. Reguły składają się z typu oraz filtrów. Typ reguły to konkretne zdarzenie, które musi wystąpić podczas wizyty użytkownika na stronie. Kiedy to zdarzenie ma miejsce są sprawdzane wszystkie dostępne zmienne dla tego zdarzenia. Przy pomocy filtrów możemy ustawić zależność od tych zmiennych. Jest kilkanaście typów reguł, które można wybrać i każda z nich ma również wiele wariantów. Wśród nich jest również „zdarzenie niestandardowe” które może być dowolnym zdarzeniem, które wywołamy w warstwie danych Google Tag Managera. To w praktyce oznacza nieokreślone możliwości tworzenia własnych reguł. Przywołaną tu warstwę danych opiszę szerzej w innym artykule.
Reguły tworzy się w taki sam sposób jak tagi – najpierw wybierając typ, następnie dokonując konfiguracji.
Reguły nie mogłyby być precyzyjne, gdyby nie to, że można w nich używać zmiennych – zarówno wbudowanych, jak i własnych.
Czym są zmienne w GTM?
Nie będę tutaj pisał definicji zmiennej. Zamiast tego napiszę to tak, aby ująć najważniejsze funkcje w kontekście GTM. Zmienne to jakby miejsca na określone informacje zapisane pod określonymi nazwami. Zawartość zmiennej zależy od tego w jaki sposób pobiera ona dane i skąd. Każda zmienna jest definiowana we własny sposób i na podstawie różnych źródeł informacji. Należy także pamiętać, że w GTM każda zmienna zmienia swoją wartość dla każdego zdarzenia widocznego w warstwie danych. Czyli przykładowo, jeśli mamy ciąg zdarzeń na stronie, gdzie najpierw strona się wyświetla, później użytkownik klika jakiś element, a na koniec scrolluje stronę – każde z tych zdarzeń każdorazowo oblicza wartość wszystkich zmiennych, które zostały zdeklarowane.
Zmienne mogą być wykorzystywane jako filtry do reguł, do tworzenia innych zmiennych, a także do umieszczania w tagach. Są zarówno składnikiem do budowy wszystkich tagów i reguł. Zarówno są potrzebne do uruchomienia tagu, ale też są wykorzystywane w tagach jako ich wartość. Pomagają też w uporządkowaniu danych.
Zmienne definiuje się również 2-etapowo, najpierw wybierając typ zmiennej a następnie konfigurując szczegóły:
Opis typów zmiennych to temat na osobny artykuł. Tutaj wspomnę jedynie, że przy tworzeniu zmiennej wybiera się jej typ – na bazie jakich źródeł zmienna się tworzy. Podobnie jak w pozostałych modułach mamy tu możliwość stworzenia czegoś całkowicie swojego – nie jesteśmy zmuszeni do pracy tylko na tym, co jest. Powiedziałbym nawet, że to właśnie zmienne mają największą różnorodność i dowolność.
Dodam także, że są też zmienne wbudowane, które należy jedynie aktywować. Wygląda to tak:
Wszystko razem
Tagi nie mogą istnieć bez reguł i są niepełne bez zmiennych, reguły bez zmiennych są możliwe, ale bardzo ubogie w funkcje i niedostatecznie sprecyzowane. Zmienne mogą być tworzone również przez tagi, na przykład dodając nowe zdarzenia w warstwie danych. Dlatego ciekawe rozwiązania otrzymujemy, jak poznamy wszystkie dostępne moduły.
Podgląd – jak sprawdzić, czy ustawiliśmy dobrze
Google Tag Manager ma wiele zalet. Jedną z nich jest możliwość przetestowania wszystkich wdrożonych ustawień tylko na swojej przeglądarce i dopiero w momencie braku stwierdzenia błędów opublikowanie zmian w kontenerze. Aby uruchomić podgląd – należy wcisnąć przycisk w prawym górnym rogu.
Jeśli kontener nie był jeszcze publikowany pojawi się taki dodatkowy komunikat – później już nie występuje.
Dalej należy wpisać adres strony, na której chcemy uruchomić podgląd.
Po uruchomieniu podglądu pojawia się nowe okno, w którym widać załadowane zdarzenia w warstwie danych (pierwszy screen) oraz szczegóły (można przełączać widok tagów, zmiennych i warstwy danych i błędów – drugi screen). Sposoby czytania tego to temat na osobny artykuł i pojawi się on za jakiś czas.
Publikacja kontenera i wersje
Jeśli wszystko już sprawdzone i działa bezbłędnie należy kontener opublikować. Wykonuje się to przez przycisk Prześlij.
Kolejne okno pozwala na wybór – czy tworzymy nową wersję i od razu ją publikujemy, czy też jedynie tworzymy nową wersję, ale opublikowana zostaje poprzednia wersja. W tym przypadku opublikować można później. W tym oknie można (i warto) napisać co zostało zmienione w tej wersji kontenera. To ułatwi ewentualne zidentyfikowanie dobrze działającej wersji i jej przywrócenie, gdyby jednak okazało się, że coś jest nie tak. Ułatwia też innym osobom połapanie się w zmianach w kontenerze.
