Wyobraź sobie świat, w którym możesz samodzielnie modyfikować kody śledzące na Twojej stronie www. Jesteś w stanie w łatwy sposób przekazywać do Google Analytics dodatkowe informacje, kody remarketingowe od różnych usługodawców, przeprowadzać testy A/B, czy zmieniać warunki, które powodują wywołanie kodu śledzącego konwersje Google Ads. I uwaga… to wszystko za sprawą GTM i praktycznie bez żadnego udziału specjalistów z działu IT!
Tak, zdecydowanie Google Tag Manager to jedno z tych typów narzędzi, bez którego większość z nas nie wyobraża już sobie codziennych działań analitycznych. Posiadanie GTM-a zdecydowanie usprawnia działania związane ze zbieraniem danych, a także pozwala na lepsze zarządzanie kodami śledzącymi.
Dowiedz się, co to jest Google Tag Manager, jak działa i w jaki sposób możesz wykorzystać możliwość GTM także w swojej firmie. Zapraszam!
Co znajdziesz w tym artykule?
Czym jest Google Tag Manager?
Jak zainstalować Google Tag Managera?
Do czego służy Google Tag Manager? Po co Ci GTM?
Jak przedstawia się struktura Google Tag Managera?
Zaawansowane funkcje Google Tag Manager
GTMowa wisienka na torcie, czyli: zarządzanie użytkownikami, wersjami oraz debugowanie
Tryb zgody – Consent Mode w Google Tag Manager
Google Tag Manager – podsumowanie
Google Tag Manager (w skrócie GTM) to system służący do zarządzania wszystkimi skryptami (tagami), które znajdują się na danej stronie www. Można więc powiedzieć, że stanowi “coś” w rodzaju CMSa (Content Management System), który został stworzony specjalnie do dodawania oraz modyfikowania obecnych na stronie internetowej skryptów. Wspomniane skrypty mogą przyjmować najróżniejsze formy – od skryptów śledzących narzędzi analitycznych (jak Google Analytics), poprzez skrypty wykorzystywane do śledzenia konwersji z systemów reklamowych (jak np. Google Ads), aż po niemal dowolne skrypty wykorzystujące JavaScript (np. ankiety).
Aby zainstalować GTM na naszej stronie, jedyne co musisz zrobić, to umieścić kawałek kodu JavaScript. Kod ten nazywa się kontenerem (ang. container) i wygląda w następujący sposób:
<!– 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-XXXXXXX’);</script>
<!– End Google Tag Manager –>
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>
Dzięki niemu Google Tag Manager będzie w stanie uruchamiać zdefiniowane w panelu narzędzia skrypty:
Tak wygląda podgląd kodów w Google Tag Managerze wraz z regułami, które decydują o tym, kiedy który z nich zostanie uruchomiony.Zastanawiając się nad zastosowaniem GTM, z pewnością pierwszą rzeczą, która przychodzi Ci na myśl, jest analityka (w tym zbieranie, przetwarzanie oraz interpretowanie danych na temat użytkowników Twojej strony). Zgadza się? Jasne, to jedno z kluczowych zastosowań Google Tag Managera, jednak musisz wiedzieć, że z pewnością nie jest ono jedyne. Kolejnymi obszarami, w których sprawdza się poczciwy GTM, są:
Kolejne tagi na stronach internetowych spowalniają je coraz bardziej. Z testów przeprowadzonych przez jednego z naszych “branżowych kolegów” wynika, że różnice mogą wynosić nawet kilka sekund. A jak pokazuje infografika od KISSmetrics – szybkość ładowania strony ma zdecydowanie kluczowy wpływ na generowany przez nią przychód. Dlatego, jeżeli Twoja strona ma być skuteczna – wdrożenie na niej GTMa jest po prostu koniecznością.
W jaki sposób GTM pomaga Ci radzić sobie z szybkością ładowania witryny? Można powiedzieć, że robi to aż na 2 różne sposoby:
Wielokrotnie pojawiającym się problemem jest również ten związany z ciągłym udoskonalaniem stron www. Bardzo często zdarza się bowiem, że pieczołowicie przygotowane tagi znikają z niektórych podstron – i to w “niewyjaśnionych okolicznościach”. Dział IT mógł zapomnieć “przekleić” wybranej linijki JavaScriptu do nowego szablonu lub pozbyć się tagowania na nowym landing page’u – cóż, nawet najlepszym się zdarza.
Z podobnym problemem spotykamy się, gdy chcemy, aby wybrany kod pojawiał się tylko na wybranych podstronach (np. ankieta na stronie podziękowania) lub gdy pomimo sprawdzenia, że kod został wprowadzony na 95% stron, na których miał być umieszczony, to nadal pozostało te nieszczęsne 5%, które pominięto. Z GTM nie ma tych problemów, ponieważ jedyne, o co należy zadbać, to aby specjaliści IT poprawnie wdrożyli kod kontenera na wszystkich podstronach. Taki zabieg sprawi, że wszystkie tagi wywołają się dokładnie tam, gdzie został umieszczony skrypt kontenera, a to z kolei nawet kilkunastokrotnie ograniczyć miejsca, które trzeba zweryfikować.
Wygodne, co nie? 😊
Na koniec ta najbardziej oczywista korzyść. Wdrożenie Google Tag Managera pozwala ominąć dział IT przy wdrażaniu zdecydowanej większości nowych kodów. Oczywiście, pewnych prac po stronie informatyków nie da się wyeliminować całkowicie. W końcu “ktoś” musi umieścić na stronie, chociażby kod samego kontenera. Ponadto, część informacji będzie musiała być wysyłana z tzw. backendu (np. w przypadku zdarzeń e-commerce czy informacji o stanie zalogowania użytkownika). Jednak bezdyskusyjnie, posiadanie GTM-a sprawi, że świat (przynajmniej ten analityczny!) z miejsca stanie się piękniejszy.
To by było na tyle, jeśli chodzi o wstęp. Pora przejść do omówienia samego narzędzia.
Konstrukcja popularnego GTM przewiduje kilka obszarów. Najważniejsze z nich omówiłem w kolejnych akapitach.
Gdy rejestrujesz się w Google Tag Managerze – z miejsca otrzymujesz swoje konto. Jego struktura przypomina Google Analytics, dzięki czemu po zalogowaniu się do GTM, prawie od razu możesz przejść do innych kont, do których masz dostęp. W obrębie każdego konta może istnieć jeden lub więcej typów kontenerów, w tym:
Typy kontenerów w Google Tag Manager.Można więc powiedzieć, że kontener to coś w rodzaju “worka”, w którym możesz trzymać różnorodne kody śledzące. Każdy kontener ma osobny kod, który musisz umieścić na swojej stronie (przykład prezentowałem na samym początku tego artykułu).
Jeden kontener możesz wykorzystywać na jednej lub wielu witrynach jednocześnie. Osobiście zalecałbym korzystanie z dobrych praktyk z Google Analytics i kierowanie się zasadą pt.: osobne konto dla każdej domeny głównej (a w przypadku roll-upu także osobnego konta zbiorczego).
W tym wpisie zajmę się pierwszym wspomnianym typem, z którym zapewne większość z użytkowników ma najczęściej do czynienia.
Data Layer to jeden z kluczowych aspektów zarządzania tagami z wykorzystaniem takich narzędzi jak GTM. Google Tag Managera daje możliwość sczytania wybranej wartość z Twojej strony internetowej (np. element DOM lub zmiennej JS). To jest naprawdę super opcja.
Istnieje tylko jeden problem. Co się stanie, jeśli strona www zostanie przebudowana, a jej kod źródłowy ulegnie zmianie? Wtedy niektóre z wykorzystywanych przez DOM elementów (lub zmienne JS) mogą po prostu “wyparować”. Jedynym wyjściem będzie wówczas przeprowadzenie aktualizacji kodu. Niestety, zazwyczaj nikt z IT nie poinformuje Cię, że takowa zmiana w ogóle miała miejsce.
Właśnie na takie okazje stworzono tzw. warstwę danych, która umożliwia przekazanie do GTM wszystkich niezbędnych informacji. Takimi informacjami mogą być nazwy kupionych produktów, typ oglądanej strony, wersja oglądanej strony, wartość konwersji, ID ostatniej transakcji itd.
Jak to wygląda w praktyce? Otóż, dzięki oddzieleniu warstwy danych od struktury strony, będziesz mieć pewność, że zmiany w HTMLu nie wpłyną nam na wcześniej zdefiniowaną Data Layer.
Oznacza to – ni mniej, ni więcej, że oprócz przekonania działu IT o wdrożeniu kodu kontenera, trzeba będzie ich jeszcze “zmusić” do wprowadzenia warstwy danych w obrębie całej witryny. Dodaje to pracy Tobie (bo w końcu “ktoś” to musi zaplanować) oraz specjalistom IT. Jednak daję słowo, że ten wysiłek bardzo się opłaci.
W praktyce, warstwa danych to tak naprawdę jeden, bardzo to prosty fragment JavaScript. O, dokładnie taki:
<script>dataLayer = [{
'nazwa’ : 'wartość’
}];
</script>
Gdzie za ‘nazwa’ należy wstawić nazwę danej zmiennej, z kolei za ‘wartość’ – oczywiście… jej wartość :), którą przyjmuje na danej stronie www.
Potrzebujesz przykładu? Proszę bardzo! Jeżeli prowadzisz sklep internetowy i chcesz przekazać do GTM kategorię produktu, na której znajduje się użytkownik (a dodatkowo również nazwę oraz ID produktu), warstwa danych mogłaby wyglądać w następujący sposób:
<script>dataLayer = [{
'kategoria’ : 'wody’,
'nazwaProduktu’ : 'dobrowianka 1,5l’,
'idProduktu’ : '123123′
}];
</script>
Przekazane do GTM zmienne możesz wówczas dowolnie wykorzystać – albo w samych tagach (np. nadając zmienną niestandardową o wartości nazwy kategorii produktu, w tym przypadku – wody), albo w warunkach (np. uruchom ankietę, jeżeli id produktu będzie równe 123123). Oczywiście tych danych nie trzeba wprowadzać ręcznie na każdej podstronie. Wystarczy wykorzystać do tego przez informatyków skrypt.
Osobiście polecam, żeby w warstwie danych przekazać więcej informacji (nawet, jeżeli części z nich nie będzie wykorzystana). Samą warstwę należy umieścić powyżej kodu kontenera Google Tag Managera — w tzw.lub też na samym początku.
Dzięki warstwie danych można przekazywać nie tylko statyczne dane, ale także dynamiczne. Przykładowo, jeżeli użytkownik zaznaczy w formularzu swoją płeć lub ulubiony kolor, ta informacja będzie mogła trafić do Google Tag Managera. Wykorzystuje się do tego komendy push. Taką komendę podpinamy pod wybrane pole, np.:
dataLayer.push({’plec’ : 'kobieta’});
Warto nadmienić, że nowo nadane wartości zmiennych nadpisują poprzednie wartości. Jeżeli domyślną wartością dla zmiennej ‚plec’ było ‚brak’ to po wywołaniu powyższej linijki, zmienna ta przyjmie wartość ‚kobieta’.
Pojęcie zmiennej w GTM jest bardzo łatwe do wytłumaczenia. Zmienne przechowują wartości poszczególnych elementów. Jeżeli w warstwie danych przekażesz płeć wybraną w formularzu, to w GTM trzeba stworzyć zmienną, w której ta wartość będzie przechowywana (jeżeli chcesz z nią cokolwiek zrobić).
W Google Tag Managerze mamy do czynienia ze zmiennymi wbudowanymi oraz zmiennymi zdefiniowanymi przez użytkownika.
Zmienne wbudowane to m.in. zmienne typu adres URL (np. Page Path, który mówi nam o lokalizacji użytkownika), czy zmienne typu warstwa danych (np. Click Element, który dostarcza informacji o klikanym przez użytkownika elemencie).
Pełną listę zmiennych wbudowanych dla kontenerów internetowych znajdziesz w tym miejscu: https://support.google.com/tagmanager/answer/7182738?hl=pl&ref_topic=7182737
Widok okna w Google Tag Manager, gdzie możemy uaktywnić zmienne wbudowane. Po ich włączeniu będziemy widzieć ich wartości podczas debugowania kontenera.Pozwól, że zatrzymam się jeszcze na chwilę na naszym przykładzie z płcią. Załóżmy, że przekazaliśmy jej wartość za pomocą warstwy danych i teraz chcemy ją wykorzystać w GTM (tak, aby np. przekazać jako zmienną niestandardową do Google Analytics).
Aby to zrobić, musimy przekształcić ją w tzw. zmienną:
W taki sposób musimy przekształcić każdy element przekazany w warstwie danych w zmienną, aby używać go w GTM.Może być tak, że zechcesz, aby Google Tag Manager wykonał jakiś skrypt w momencie, gdy użytkownik kliknie w konkretny link na Twojej stronie internetowej. Aby GTM się o tym dowiedział, musisz skorzystać z pomocy tagów.
Wyobraź sobie, że chcesz, aby Google Tag Manager wysłał wirtualną odsłonę w momencie, gdy użytkownik kliknie powiększenie zdjęcia, które w Twoim serwisie nie wywołuje nowej odsłony. Aby przekazać odpowiednią informację do GTM, musisz skorzystać z eventu.
Na koniec: pamiętaj, aby nie mylić zdarzeń z Google Tag Managera ze zdarzeniami z Google Analytics. Główną różnicą pomiędzy tymi narzędziami jest to, że tzw. zdarzenia GTM-owe mogą wysyłać informacje nie tylko do Google Analytics, ale także do innych systemów.
Do podstawowych typów tagów możemy zaliczyć:
Tagi używane w GTM mogą posiadać również dodatkowe ustawienia. W tej materii możemy zatem wymienić:
Określa kolejność, w jakiej będą uruchamiane tagi. Jego wartość może być ujemną lub dodatnią liczbą całkowitą, a tagi z wyższym priorytetem będą uruchamiane w pierwszej kolejności. (Tag o priorytecie równym np. 3 będzie uruchamiany przed tagami o priorytetach 1 i 2). Jeśli nie ustawisz żadnej wartości, priorytet ma domyślną wartość 0. Tagi będą wciąż uruchamiane asynchronicznie. – zmiana priorytetu tagu nie zapobiegnie uruchamianiu innych tagów, nawet jeśli któryś o wyższym priorytecie w ogóle się nie uruchomi.
Sekwencjonowanie tagów pozwala wskazywać tagi do uruchomienia bezpośrednio przed uruchomieniem danego tagu „głównego” lub po nim.”
Przykład? Tagi dostawców takich jak TikTok często wymagają odpowiedniego ustawienia wywoływania, aby mogły działać poprawnie (np. tag odsłony powinien wywoływać się przed tagiem view_content).
Reguły to już ostatnie pojęcie, które jest Ci potrzebne do zrozumienia działania Google Tag Managera.
To właśnie dzięki ustalanym regułom, GTM wie, kiedy wczytać odpowiedni skrypt. Najprostszą i najczęściej wykorzystywaną regułą (oprócz tej, aby w ogóle “odpalić” kod na każdej stronie www), będzie uruchomienie kodu konwersji na stronie podziękowania. Taka reguła mogłaby wyglądać w następujący sposób:
Przykładowa reguła w Google Tag Managerze, którą będziemy mogli wykorzystać, aby np. uruchomić skrypt konwersji na stronie podziękowania.Na podstronie z podziękowaniem z powodzeniem można także użyć reguły “zdarzenie niestandardowe”, ale o tym opowiem Ci za chwilę.
Typy reguł możemy podzielić w następujący sposób:
dataLayer.push({’event’:’form_submit’,’typ’:[typ formularza],’opcja_dodatkowa’:[tak/nie]});
Takie reguły odpowiadają za uruchomienie tagu, jeśli identyfikator fragmentu adresu URL (oznaczony za pomocą kratki) zostanie zmodyfikowany lub też, jeśli w samej witrynie zostanie wykorzystany interfejs API HTML5 (typu pushstate). Omawiana reguła sprawdza się podczas uruchamiania tagów, które mają śledzić wirtualne odsłony strony w aplikacji Ajax.
Według informacji od Google, w miarę rozrastania się kontenerów, śledzenie wszystkich konfiguracji tagów, reguł, jak i samych zmiennych, staje się coraz trudniejsze. Aby usprawnić pracę z tymi elementami, warto uporządkować je w logiczne grupy, do czego można wykorzystać właśnie foldery Menedżera tagów.
Zatem, grupowanie przy użyciu folderów może odbywać się na różne sposoby. Można klasyfikować tagi zależnie od zespołów, które się nimi zajmują, czy też dzielić kontener na podstawie części witryny, które dane tagi obsługują.
GTM pozwala również na korzystanie z gotowych szablonów tagów, które nie wymagają “ręcznego” kopiowania oraz przepisywania kodów HTML i JavaScript. W tym celu udostępnia tzw. galerię szablonów, która stanowi swego rodzaju repozytorium – aktualizowane także przez samych użytkowników GTM.
GTM oferuje funkcje wykraczające poza prostą obsługę tagów – np. możliwość uruchamiania kodu po stronie serwera (server-side tagging), co zmniejsza obciążenie strony i pomaga w ochronie prywatności. Można też wykorzystywać warstwę danych (dataLayer) do przekazywania zmiennych kontekstowych, stosować reguły warunkowe (np. niestandardowe filtry), a także korzystać z gotowych szablonów i rozszerzeń (community templates), które pozwalają szybko integrować mniej standardowe zdarzenia.
Dzięki GTM możesz łatwo podpiąć Google Analytics (zwłaszcza GA4) bez edytowania kodu strony – wystarczy utworzyć tag konfiguracyjny z identyfikatorem pomiaru oraz tagi zdarzeń (np. kliknięcia, przewijanie).
Przez GTM można też centralnie zarządzać parametrami (np. wartości transakcji, identyfikator produktu) i przekazywać je jako zmienne do GA. Dzięki temu dane są bardziej spójne i łatwiej rozszerzalne, bo zmiany robi się w GTM, a nie bezpośrednio w kodzie witryny.
Czytając ten artykuł, z pewnością naszły Cię wątpliwości związane z tym, czy aby na pewno w GTM każdy będzie mógł zmieniać, dodawać, usuwać, a następnie uruchamiać na stronie. Rozwiewam Twoje obawy – na szczęście w GTM zostało to naprawdę dobrze rozwiązane.
Po pierwsze Google Tag Manager dostarcza Ci wiele bardzo fajnych sposobów na zarządzanie użytkownikami. Możesz zarządzać prawami na dwóch poziomach: konta oraz kontenera.
Na poziomie konta masz do dyspozycji 2 poziomy uprawnień:
Na poziomie kontenera masz z kolei aż 3 poziomy uprawnień:
Każdemu użytkownikowi możemy przydzielić prawa na dwóch poziomach: konta i kontenera.W celu łatwiejszego wdrażania zmian i powrotu do poprzednich, działających poprawnie wersji, GTM udostępnia opcję sprawnego zarządzania wersjami kontenera. Każda z wersji stanowi jakby zdjęcie obecnych ustawień kontenera, który edytujemy.
W zakładce Wersje jesteś w stanie prześledzić wszystkie wersje kontenera – zarówno te opublikowane, jak i nie.Podpowiedź: Warto tworzyć klarowne i czytelne nazwy wersji oraz umieszczać dodatkowe informacje w opisie. Po dłuższym korzystaniu z kontenera, gdy pracuje nad nim coraz więcej osób (i przybywa także tagów), czytelna dokumentacja zmian jest niezwykle ważna. Warto o tym wiedzieć wcześniej, niż później.
Środowiska to z kolei funkcja, która idealnie odnajduje się w organizacjach, które chcą zyskać podgląd do wszelkich zmian w ramach kontenerach, zanim zdecydują się na ich publikację w docelowym środowisku (tzw. produkcyjnym).
Z uwagi na powyższe, głównym obszarem ich zastosowania są tzw. środowiska projektowe (testowe).
W celu debugowania i zyskania dostępu do zmian, należy kliknąć przycisk w prawym górnym rogu narzędzia. Co ciekawe, możesz wybrać aż 2 sposoby na taki podgląd:
Szczególnie świetna jest druga z opcji. Możesz ją wykorzystać nie tylko do weryfikacji wprowadzonych zmian przez IT (lub kolegę z zespołu), ale również wykorzystać do sprawdzenia działania całego wdrożenia (np. na innej przeglądarce).
A co w przypadku kwestii prywatności? Czy GTM jest w stanie pomóc w lepszym zarządzaniu zgodami użytkownika? Odpowiedź brzmi: jak najbardziej.
W ustawieniach kontenera czeka na Ciebie dodatkowa opcja, której włączenie zapewnia wgląd w ustawienia uzyskiwania zgody w przypadku tagów w kontenerze.
Ustawienia kontenerów w GTM.Po włączeniu tej funkcji, gdy przeniesiesz się na zakładkę Tagi i klikniesz ikonę Tarczy (znajduje się przy lupce), przeniesiesz się do przeglądu tagów:
Ustawienia tagów w GTM.Dzięki odpowiednim ustawieniom tagów, zyskasz pewność, że Twoja witryna pozostaje w zgodzie z najnowszymi zasadami dotyczącymi prywatności w sieci, a tym samym – zmniejszysz utratę danych w momencie niewyrażenia przez użytkownika zgody.
Ufff. Ten wpis był naprawdę długi, jednak mam nadzieję, że udało Ci się dotrwać do końca i po przeczytaniu upewnisz się, że wdrożenie Google Tag Managera w Twoim serwisie to doskonały pomysł.
Osobiście gorąco polecam Google Tag Managera, ponieważ daje on naprawdę niesamowite możliwości, a korzyści, o których wspominałem na początku, poczujesz bez względu na to, czy w Twoim serwisie znajdują się obecnie 2, czy też 22 tagi. Dodatkowo teraz, w momencie coraz większego nacisku kładzionego na zbieranie danych zgodnie z intencją użytkownika, GTM pozwala także zmniejszyć utratę danych.
A Co Ty sądzisz o Google Tag Managerze? Często z niego korzystasz? Co sprawia Ci największą trudność w konfiguracji? Zapraszam do komentowania i dzielenia się spostrzeżeniami!
A tak na marginesie…
Jeśli uważasz, że wiedza zawarta w tym artykule jest wartościowa, a temat Google Tag Manager Cię zainteresował – koniecznie sprawdź te wpisy na blogu, które są związane z GTMem. Jestem pewny, że informacje zawarte w artykule o zmiennych niestandardowych oraz event tracking z pewnością Ci się spodobają!
Tagi:
Historie sukcesów
Ostatnie wpisy na blogu
