google tag manager – przewodnik
TRANSCRIPT
Google Tag Manager Nie dla programistów
Przewodnik po Google Tag Managerze dla specjalistów marketingu i
innych zawodów nie związanych z programowaniem.
Przemysław Modrzewski, marketingLAB.pl Warszawa, 2014
2
Wstęp Dziękuję za zainteresowanie moim przewodnikiem dotyczącym, jakże przydatnego
narzędzia jakim jest Google Tag Manager. Narzędzie to, coraz częściej jest obecne na
stronach internetowych, a celem jego instalacji jest chęć usamodzielnienia się działu
marketingu od działów odpowiedzialnych za obsługę IT oraz potrzeba przyspieszenia
wprowadzania zmian na stronie w obrębie marketingowej i analitycznej.
Aby jednak móc się naprawdę usamodzielnić, trzeba wiedzieć jak tego narzędzia używać.
Często wiąże się to z kwestiami technicznymi, co nie dla wszystkich marketingowców
bardzo dobrze znane. W końcu specjalista marketingu nie musi być programistą czy osobą
techniczną. Niestety jednak coraz bardziej jest to stwierdzenie teoretyczne.
Na tym polu powstał pomysł, aby przybliżyć temat techniczny, osobom nie technicznym w
sposób jak najmniej techniczny ;). Przewodnik powstał też w ramach mojego przyswajania
wiedzy o tym narzędziu i odkrywania jego możliwości. Czasem trzeba przerobić materiał
samemu, aby go zrozumieć. Tak właśnie niestety jest u mnie. Dzięki temu powstał ten
materiał, który mam nadzieję przyda się także komuś jeszcze.
Poradnik ten nie omawia wszystkich opcji i nie opisuje wszystkich możliwości GTM. Ma on
dać pojęcie co można za jego pomocą zrobić, zrozumieć jego działanie i wykorzystać go w
najbardziej popularnych przypadkach. Dalszą naukę i rozwój w tym zakresie pozostawiam
Czytelnikowi.
Wszelkie informacje o znalezionych błędach stylistycznych, merytorycznych albo pomysły
na dodatkowe rozdziały, mile widziane J
Życzę zrozumiałej lektury
Przemek Modrzewski
www.marketingLAB.pl
Copyright by Przemek Modrzewski, www.marketingLAB.pl 3
Spis treści
Wstęp ....................................................................................................................................................... 2 Tag manager -‐ wprowadzenie ......................................................................................................... 5 Jak działa GTM ? ............................................................................................................................................... 6 Struktura Google Tag Managera ................................................................................................................. 7 Co to są tagi? ...................................................................................................................................................................... 8 Co to jest kontener? ........................................................................................................................................................ 8 Co to są reguły? ................................................................................................................................................................ 9 Co to są makra? .............................................................................................................................................................. 10
Google Tag Manager na stronie internetowej .................................................................................... 11 Instalacja Google Tag Managera -‐ krok po kroku .............................................................................. 11 Krok 1 -‐ Zakładanie konta GTM .............................................................................................................................. 11 Krok 2 – Tworzenie pierwszego tagu .................................................................................................................. 15
Instalacja podstawowych skryptów na stronie ....................................................................... 21 Instalacja statystyk Google Analytics przy pomocy GTM ................................................................ 21 Pierwsza reguła w GTM ............................................................................................................................................. 28 Testowanie nowo stworzonego tagu ................................................................................................................... 29
Instalacja śledzenia konwersji Google AdWords w GTM ................................................................ 32 Pierwszy kontakt z makrami w Google Tag Managerze .................................................................. 38 Z czego składa się makro i jak się je tworzy? ................................................................................................... 39
Implementacja remarketingu Google AdWords za pomocą GTM ................................................ 41 Google Tag Manager -‐ zaawansowane przypadki wykorzystania ..................................... 45 Warstwa Danych -‐ co to jest i do czego się ją stosuje? ..................................................................... 46 Co to jest Warstwa Danych? .................................................................................................................................... 46 Jak wygląda Warstwa Danych? ............................................................................................................................... 49 Dodawanie zmiennych i wartości do Warstwy Danych .............................................................................. 50
Śledzenie zdarzeń w Google Analytics za pomocą GTM .................................................................. 53 Naciśnięcie guzika jako zdarzenie w Google Analytics ................................................................................ 54 Więcej guzików (zdarzeń) do mierzenia na jednej stronie ........................................................................ 66 Mierzenie akcji na stronie za pomocą wirtualnych odsłon ........................................................................ 68
Automatyczne zdarzenia w GTM (auto event tracking) ........................................................ 72 Auto-‐tagowanie w praktyce (wstęp) ...................................................................................................... 72 Automatyczne mierzenie kliknięcia na guzik (link) ...................................................................................... 73
Trochę więcej o makrach w automatycznych zdarzeniach ............................................................ 81 Dostępne makra i ich możliwości ........................................................................................................... 83 Auto-‐Event Variable (zmienna zdarzenia automatycznego) ..................................................................... 85 Makro Constant String (Ciąg stały) ....................................................................................................................... 86 Makro -‐ Custom Events (Zdarzenia niestandardowe) ................................................................................. 87 DataLayer Variable (Zmienna Warstwy Danych) ........................................................................................... 87 DOM elements (elementy DOM ) ........................................................................................................................... 88 HTTP referrer (strona odsyłająca HTTP) .......................................................................................................... 91 Javascript Variable (Niestandardowy kod JavaScript) ................................................................................. 91 Random Number (Losowa Liczba) ....................................................................................................................... 92 Makro URL ....................................................................................................................................................................... 93 Lookup Table (tabela przeglądowa) .................................................................................................................... 94
Mierzenie linków wychodzących jako zdarzeń automatycznych w GA ..................................... 96
4
Mierzenie pobrań dokumentów (np. PDF) jako zdarzeń automatycznych w GA ................... 98 Mierzenie kliknięć na obrazki jako zdarzenia na stronie w GA ................................................. 101 Cross-‐domain tracking za pomocą GTM (UA) ................................................................................... 104 Instalacja dynamicznego remarketingu za pomocą GTM ............................................................. 107 Metoda pierwsza -‐ standardowa ........................................................................................................................ 108 Metoda druga -‐ bez przekazywania zmiennych programistycznie ..................................................... 116
Ecommerce tracking w GA za pomocą GTM ...................................................................................... 125 Konfiguracja realnego wskaźnika odrzuceń w Google Analytics ............................................... 129 Tagi niestandardowe w GTM .................................................................................................................. 133
Wykorzystanie GTM w aplikacjach mobilnych ..................................................................... 137 Zarządzanie tagami w aplikacji – kilka słów ..................................................................................... 137 Wprowadzania zmian w aplikacji (rewolucja) ................................................................................ 138 Problem z aplikacjami mobilnymi ..................................................................................................................... 138 Jak działa GTM dla aplikacji? ................................................................................................................................ 139 Co można zmienić, przez GTM, w aplikacji? ................................................................................................... 141
Kilka myśli podsumowujących ................................................................................................... 145
Plan migracji do GTM ..................................................................................................................... 146 Zakończenie ...................................................................................................................................... 147
Copyright by Przemek Modrzewski, www.marketingLAB.pl 5
Tag manager - wprowadzenie
Tag manager to narzędzie ułatwiające pracę z licznymi kodami marketingowymi, które
pozwalają na śledzenie, mierzenie i akcje marketingowe do użytkowników naszej strony.
Dzięki GTM nie musimy edytować stron WWW, aby dokonać jakiś zmian lub dodawać nowe
kody marketingowe. Wystarczy jednorazowe wklejenie kodu GTM na naszą strony. GTM
odpowiada na potrzebę kontroli implementacji różnych kodów na stronę przez marketing
a nie przez dział IT. Wiemy, że do prowadzenia skutecznego marketingu w internecie
potrzebne jest coraz więcej narzędzi podłączonych do naszej strony.
Do tej pory, aby cokolwiek nowego wprowadzić, zmienić na stronę w kwestii kodów
marketingowych, potrzebna była interwencja działu IT lub webmastera. Zazwyczaj proces
ten stawał się wtedy dość długi. Dodatkowo brak zrozumienia sposobu działania różnych
narzędzi marketingowych przez dział IT, powodował częste błędne instalacje. Kolejna
strata czasu.
Dzięki GTM specjalista ds. marketingu czy inna osoba odpowiedzialna za działania
marketingowe w internecie może samodzielnie, w kilka minut, samodzielnie dodać i
modyfikować każdy kod potrzeby do działania różnych narzędzi, pomiaru i śledzenia, bez
potrzeby kontaktu z działem IT.
GTM ma także wiele innych możliwości, o których powiemy w trakcie tego ebooka.
6
Jak działa GTM ?
W prostych słowach. Instalując jednorazowo kod GTM (tzw. Kontener) w swoim serwisie
(fragment kodu na każdej podstronie) możemy dodawać, edytować, usuwać wszelkie tagi
marketingowe (remarketing, analytics, śledzenie konwersji i wiele innych) bez potrzeby
edytowania samego kodu strony. Wszystkie operacje odbywają się za pomocą interfejsu
GTM w sieci, do którego logujemy się tak samo łatwo jak do poczty czy Google Analytics.
Daje to kontrolę nad kodami marketingowymi osobom nie związanym z działem IT przy
czym bezpieczeństwo strony nie będzie zagrożone, znacznie skraca czas potrzebny na
zmiany i reakcję na zmiany potrzebne przy prowadzeniu kampanii w internecie oraz
zmniejsza ilość zasobów (dział IT) potrzebnych na co dzień w działaniach marketingowych
(edycja stron, zmiany w kodzie, wklejanie tagów, itp.).
Narzędzie GTM składa się z kilku elementów, którymi będziemy zarządzać:
● Kontenery czyli kody wklejone na stronę, w których przechowywane będą wszelkie
kody marketingowe (tagi).
● Tagi -‐ kody śledzące, które chcemy umieścić na stronie np. Google Analytics, kody
konwersji AdWords, remarketing i wszelkie inne kody śledzące nie tylko te od
Google.
● Reguły -‐ warunki, w których mają być uruchamiane tagi.
● Makra -‐ makra służą do ułatwienia pracy z tagami i regułami, automatyzując
powtarzalne działania.
O wszystkich tych elementach powiemy w dalszej części tego dokumentu.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 7
Struktura Google Tag Managera
Struktura konta narzędzia GTM składa się ze wspomnianych kontenerów i przynależnych
do nich tagów oraz reguł i makr.
Zakładając konto GTM zobaczymy z lewej strony menu w którym znajdują się trzy
elementy – Tagi, reguły i makra. To tutaj będą przechowywane wszystkie utworzone przez
nas tagi (dodane kody marketingowe do strony przez GTM) oraz reguły i makra. Tworzenie
każdego z tych bytów odbywa się przy pomocy menu z prawej strony. Powiedzieliśmy, w
skrócie, na wstępie co to są i do czego służą elementy konta GTM, teraz wyjaśnijmy sobie
to bardziej dokładnie. Zatem, jeszcze raz, co to właściwie są kontenery, tagi, makra i
reguły?
8
Co to są tagi?
Tagi to kody śledzące jakie chcemy wkleić na stronę za pomocą narzędzia GTM. Tagiem jest
skrypt np. Google Analytics, który wklejamy zazwyczaj w kod strony. Może być tag
konwersji AdWords, może być tag remarketingu lub innych narzędzi marketingowych,
które wymagają dodawania jakiegoś fragmentu kodu na naszej stronie WWW.
Co to jest kontener?
Wszystkie tagi trzymane są w kontenerze (container). Kontener to zbiór wszystkich tagów
jakie mamy wykorzystane i wklejone na stronę za pomocą GTM. Kontener wklejamy na
naszą stronę w jednym miejscu, tak jak normalny kod np. Analytics. A dopiero później za
pomocą GTM dodajemy już z poziomu interfejsu GTM tagi różnych innych narzędzia np.
Analytics czy Adwords.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 9
W ten sposób, jednorazowo, edytujemy stronę, wklejamy kontener w odpowiednim
miejscu (najlepiej bezpośrednio pod tagiem otwierającym treść strony <body>) i później
wszystkie inne kody dodajemy do kontenera bez potrzeby ingerencji w kod strony.
Kontener powinien być zainstalowany na każdej podstronie naszego serwisu. Tak jak, na
przykład, kod Analytics. Jest to o tyle ważne, że w przypadku opuszczenia jakiejś podstrony
nie będzie można na nią dodawać tagów przy pomocy GTM. Stąd nie będziemy mogli na
przykład na niej używać kodu Analytics, przy pomocy Tag Managera.
Co to są reguły?
Reguły to nic innego jak zasady kiedy dany tag ma zostać aktywowany w kontenerze. Na
przykład , jeśli dodalibyśmy tag śledzenia konwersji AdWords, to nie chcielibyśmy, aby ten
kod był uruchamiany na każdej podstronie serwisu, tylko na stronie potwierdzającej
wykonanie pożądanej, przez nas, akcji – sprzedaż, pobranie ebooka, wypełnienie
formularza etc.
10
Taką stroną często możemy określić jako stronę ostatnią w pewnym procesie do celu, na
której są informacje potwierdzające tą czynności np. Dziękujemy za zakupy. Jej adres URL
może wyglądać np. tak: www.moja-‐strona.pl/dziekujemy.html
Aby konwersja w AdWords była zaliczona, ktoś musi zobaczyć powyższą stronę. W GTM
musimy zatem stworzyć regułę którą będzie określała warunek aktywacji kodu konwersji.
Warunek będzie brzmiał następująco: Aktywuj kod konwersji AdWords wtedy, gdy w
adresie URL znajduje się słowo „dziekujemy“. W innym przypadku kod nie będzie
aktywowany i konwersja nie zostanie policzona. To jest właśnie przykład reguły określonej
do uruchamiania tagu w GTM.
Co to są makra?
Definicja: Makra są to pary nazwa-‐wartość, których wartość jest uzupełniana w trakcie
działania. Na przykład wstępnie zdefiniowane makro o nazwie „URL" jest zdefiniowane tak,
że jego wartość to aktualny URL strony. To definicja, o praktyce porozmawiamy za chwilę ;)
Ponieważ makra to trochę bardziej skomplikowane elementy to nimi zajmiemy się trochę
później, przy okazji bardziej zaawansowanego wykorzystania GTM. Dla prostych,
standardowych instalacji, ich wykorzystanie nie jest wymagane.
Podsumowanie
Tak więc jak te wszystkie elementy można łatwo podsumować wyjaśniając jednocześnie
ich zależności wglądem siebie?
Tagi to kody, które chcemy wstawić na stronę (np. kod Google Analytics), reguły służą do
określenia kiedy dany tag ma być uruchamiany (np. kod GA ma być uruchamiany na
wszystkich stronach), natomiast makra służą do automatyzacji i ułatwiania pracy ze
zmiennymi, które potrzebne są do działania tagów i reguł na naszej stronie.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 11
Google Tag Manager na stronie internetowej
Google Tag manager może być wykorzystany w przypadku większości kodów, które
musimy dodać do naszej witryny, aby korzystać z takich mechanizmów jak statystyki
odwiedzin strony, śledzenie konwersji czy inne dane potrzebne nam do akcji
marketingowych.
W kolejnych krokach przejdziemy od procesu poprawnej instalacji GTM na stronie przez
implementację najpopularniejszych tagów. W między czasie będziemy też wyjaśniać sobie
wszystkie, być może, nie do końca jasne, w pomocy oficjalnej pomocy GTM, funkcje i
pojęcia.
Instalacja Google Tag Managera -‐ krok po kroku
Instalacja Google Tag Managera jest bardzo prosta i zawiera kilka kroków.
Założenie konta, stworzenie kontenera, konfigurację ustawień oraz instalację pierwszych
tagów czyli kodów śledzących. Mimo, że to pierwsze czynności są dość proste to na pewno
pojawią się pytania już na samym początku działań. Postaram się je tutaj przewidzieć i
wyjaśnić ;).
Krok 1 - Zakładanie konta GTM
Czynność ta jest bardzo prosta. Wystarczy wejść na stronę
https://www.google.com/tagmanager/ i założyć konto.
Pierwszy kontener
To co to jest kontener wyjaśniliśmy sobie na początku tego ebooka. Teraz przychodzi czas
na jego stworzenie i instalację.
12
Dobra praktyką jest po prostu nazwać kontener tak jak nazwaliśmy nasze konto, choć nie
jest to oczywiście obowiązkowe. Być może będziemy mieli niedługo kilka kontenerów,
wtedy warto opracować system nazewnictwa. Temat nazewnictwa jest istotny ze względu a
to, że w miarę upływu czasu nasze konto będzie się rozrastało o kolejne taki, makra i reguły.
Będziemy musieli wiedzieć co służy do czego. Następnie musimy wybrać gdzie chcemy
używać naszego kontenera, na stronie internetowej czy w aplikacji mobilnej. To także
jedna z wielu zalet GTM, że możemy go wykorzystać do zarządzania tagami, a nawet
zmianami w aplikacjach mobilnych. O tym jeszcze powiemy więcej w dalszej części.
Jeśli mam wiele domen, subdomen to ile kontenerów potrzebuje? Ile kontenerów
powinienem utworzyć?
Było to pierwsze pytanie jakie mi przyszło do głowy podczas zakładania pierwszego konta
GTM.
Generalnie jeśli mam wiele domen, ale nie są ze sobą powiązane to dobrą praktyką jest
trzymać się zasady jedna domena -‐ jedno konto -‐ jeden kontener. Pozwala to utrzymanie
porządku przy czym nie przeszkadza w zarządzaniu, gdyż z poziomu jednego loginu i hasła
możemy zarządzać wieloma kontami GTM. Widać to na poniższym obrazku, gdzie przy
pomocy jednego loginu mam dostęp do wielu kont GTM.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 13
Wracając do instalacji pierwszego kontenera. Ponieważ obecnie wdrażamy GTM na stronie
internetowej, wybieramy opcję kontenera właśnie dla strony. Jeśli będziemy wdrażać tag
managera w aplikacji, wybierzemy wersję odpowiednią “aplikacje mobilne”.
Wybierając wersję dla strony internetowej pokaże nam się dostępny kontener do wklejenia
na naszej stronie.
14
Gotowy kod pierwszego kontenera kopiujemy w całości i wklejamy na naszą stronę.
Najlepszym miejscem do wklejenia kodu kontenera jest miejsce bezpośrednio pod tagiem
otwierającym treść strony <body>. Znajdziemy go łatwo w kodzie strony przez opcje szukaj
w treści. Możemy podejrzeć jak to wygląda dla przykładowej strony, klikając prawym
klawiszem myszy na treść strony i wybierając “Pokaż źródło strony”.
Co jeśli nie możemy wstawić kodu GTM w wyżej opisane miejsce?
Pamiętajmy, że najlepszym miejscem, dla kontenera, gwarantującym najlepsze zbieranie
danych jest miejsce bezpośrednio pod tagiem <body>.
Niestety nie ma gwarancji, że nasze kody wdrożone przez GTM będą poprawnie się
wywoływały jeśli zmienimy miejsce kontenera. Szczególnie nie polecam wklejania kodu
kontenera w sekcji <head> ponieważ skrypt zawiera “iframe”, co może skutkować
niespodziewanym zachowaniem przeglądarki. Oczywiście, jeśli wkleimy kod na samym
dole bezpośrednio przed tagiem zamykającym treść strony </body>, to wszystko powinno
działać, jednak nie ma gwarancji, że wszystkie tagi zdążą się wczytać zanim nastąpi akcja
użytkownika.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 15
Krok 2 – Tworzenie pierwszego tagu Jak widzieliśmy ,na obrazku ze str. 13, po założeniu pierwszego kontenera od razu mamy
do dyspozycji kilka wbudowanych już tagów gotowych do instalacji, na naszej stronie. Jak
widać najpopularniejsze tagi Google są gotowe do instalacji. Mamy dostępne także tagi
Doubleclicka i wiele innych. W standardzie jest też kilka tagów innych firm. Dodatkowo
istnieją tagi niestandardowe (Custom HTML), dzięki którym możemy wstawić właściwie
każdy tag na naszej stronie, nawet jeśli nie ma go w standardzie na liście tagów. Dokładną
implementację najbardziej popularnych tagów omówimy sobie za chwilę. W tej chwili
jednak zatrzymamy się na chwilę i omówimy ustawienia konta i jego funkcjonalności, które
będziemy za chwilę używać.
Ustawienia i funkcjonalności konta GTM
Zakładając konto GTM i pierwszy kontener posiadamy jednego użytkownika (czyli nas). W
koncie GTM możemy dodawać kolejne kontenery i użytkowników. Widać poniżej możemy
skorzystać z guzika “Nowe” i dodać użytkownika lub kontener.
16
Zgodnie z tym co pisałem wcześniej, dobrą praktyką jest trzymanie się zasady -‐ jedno konto,
jedna domena, jeden kontener. Możemy jednak w rożnych przypadkach zasadą
tą zignorować. Szczególnymi przypadkami odejścia od tej zasady jest:
Wiele domen traktujemy jako jedną całość.
Możemy wykorzystać wtedy jednej kontener dla wielu domen, ponieważ reguły, tagi i
makra nie mogą być dzielone pomiędzy kontenerami. Jeśli wszystkie domeny mają być w
podobny sposób konfigurowane to użycie jednego kontenera jest stosowne.
Wiele tagów na jednej domenie
Jeśli mamy bardzo dużo tagów do obsługi, dużo łatwiej jest nimi zarządzać jeśli podzielimy
ja na dwa kontenery lub więcej. Daje to nam większą przejrzystość, co i kiedy ma
zostać włączone (odpalone) i powoduje też, że sam kontener jest mniej obciążany (jest
mniejszy). Można wtedy np. posegregować tagi według rodzaju albo narzędzia. Przypadek
ten jest raczej rzadki i nie wydaje się, aby nawet duże witryny w Polsce potrzebowały takie
rozwiązanie. No, ale kto wie ;)
Wielu użytkowników o różnych prawach dostępu
Prawa dostępu dla użytkowników mogą być nadawane na poziomie kontenera. Stąd jeśli
chcemy ograniczyć komuś dostęp do innej domeny albo konfiguracji tagów, musimy
skorzystać z większej ilości kontenerów i na ich poziomie przydzielić dostępy i prawa dla
kolejnych użytkowników. Możemy nadać dostępy o różnych uprawnieniach: przeglądanie,
przeglądanie i edytowanie oraz przeglądanie, edytowanie i publikowanie (dostęp pełen).
Środowisko testowe
Dobrym pomysłem jest korzystanie z różnych kontenerów podczas testowania
implementacji nowych tagów lub reguł. Zwłaszcza dla dużych serwisów, błędna
konfiguracja i utrata danych za pewien okres może być bolesna. Stąd warto zwrócić na to
Copyright by Przemek Modrzewski, www.marketingLAB.pl 17
uwagę podczas implementacji. Dobrym pomysłem w momencie implementacji warto
skorzystać, zwłaszcza w kwestii Google Analytics i innych statystyk, z makra Lookup Table,
o której będziemy mówić w dalszej części tego poradnika. Na samym końcu znajdziemy też
proponowany plan migracji do Google Tag Managera.
Zakładka Ustawienia
W zakładce “ustawienia” znajduje się identyfikator kontenera oraz nazwa kontenera, którą
możemy w dowolnym czasie zmieniać.
Zakładka kontenery
W zakładce kontenery widzimy aktualnie stworzone kontenery na koncie, ilość tagów
stworzoną do danego kontenera, nasze prawa edycji kontenera oraz liczbę użytkowników
przypisaną do niego.
Wybierając nasz istniejący kontener, który w naszym przykładzie nazywa się “testowy
kontener”, przechodzimy do serca samego Tag Managera czyli ustawień kontenera.
18
Jak widzimy w menu po lewej stronie ekranu, widoczne są zakładki dotyczące tagów, reguł
i makr. O tych elementach powiedzieliśmy wcześniej i będziemy jeszcze mówić wiele razy.
Z lewego menu będziemy korzystać bardzo często. Z kolei w środkowej części mamy widok
stworzonych przez nas tagów, reguł i makr.
W tym miejscu jednak najważniejsze to zrozumieć istotę wersji i rodzaju kontenera.
O co zatem chodzi?
Dodając do kontenera tag czy regułę, czy w ogóle edytując cokolwiek w GTM, nie będziemy
widzieć zmian na naszej stronie. Nic nie zostanie zmienione. Żeby tak się stało, musimy
zmiany opublikować. Stąd w pkt. 3 na rysunku powyżej widzimy wersję kontenera jako
nieopublikowany. Aby go opublikować i wprowadzić zmiany, które będą miały
odzwierciedlenie na naszej stronie musimy najpierw stworzyć kolejną wersję kontenera
(pkt. 2.). Po stworzeniu wersji pojawi nam się możliwość publikacji. Wszelkie stworzone
wersje można zobaczyć pod menu z lewej strony. Do wersji można powrócić, jeśli zdarzy
się taka potrzeba. Dzięki wersjom nie nadpisujemy bezpowrotnie zmian.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 19
Na rysunku ze str. 18 jest jeszcze widoczny pkt. 1 czyli funkcja podglądu (Preview).
Funkcja “Preview” jest jedną z częściej używanych funkcjonalności podczas dodawania lub
edycji tagów czy innych ustawień. Dzięki funkcji “Preview” możemy podejrzeć czy
wprowadzone przez nas zmiany działają poprawnie na stronie. Mamy dostępne trzy opcje
podglądu zmian.
● Preview -‐ Pozwala nam na podgląd strony w trybie naniesionych przez nas zmian.
To znaczy po wybraniu opcji “Preview”, możemy wejść na naszą stronę, odświeżyć ją i
sprawdzić czy wprowadzone przez nas zmiany działają np. w konsoli programistów w
przeglądarce Chrome albo w narzędziu Firebug. Ponieważ jeszcze nie stworzyliśmy wersji
w GTM to zmiany na stronie widzimy tylko my. Po wyłączeniu opcji podglądu (żółty pasek
u góry ekranu) zmiany przestaną działać na stronie.
20
● Debug -‐ Opcja chyba najczęściej używana. Pozwala na dodanie do opcji “Preview”
(Podglądu) konsoli pomocniczej, która pokaże nam czy i jakie tagi będą działać u nas na
stronie po stworzeniu nowej wersji.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 21
● Share -‐ opcja “Share” pozwala nam stworzyć unikalny adres url, który możemy
przesłać do osoby nie związanej z naszym kontem GTM. Dzięki temu adresowi osoba, która
skorzysta z podanego przez nas linku, będzie mogła także zobaczyć działanie nie
opublikowanych jeszcze zmian w GTM.
Instalacja podstawowych skryptów na stronie
Poznaliśmy podstawowe ustawienia Google Tag Managera. Teraz możemy przejść do
instalowania skryptów śledzących na naszej stronie za pomocą GTM. Zaczniemy od
najbardziej standardowych tagów (skryptów) po czym przejdziemy do bardziej
zaawansowanych sposobów wykorzystania tego narzędzia.
Instalacja statystyk Google Analytics przy pomocy GTM
Wykorzystanie Tag Managera (GTM) do śledzenia ruchu na stronie z wykorzystaniem
Google Analytics jest jednym z częstszych przypadków. Najprostsza instalacja nie jest
skomplikowana, ale już bardziej zaawansowane aspekty śledzenia jak np. śledzenie
zdarzeń może sprawiać trochę kłopotów. Stąd zajmiemy się w dalszych krokach także tymi
bardziej zaawansowanymi aspektami. W te chwili jednak dokonamy standardowej
instalacji.
We wcześniejszej części tego ebooka, stworzyliśmy konto GTM, a także pierwszy kontener.
Zaraz po stworzeniu kontenera, mamy możliwość od razu przejść do tworzenia pierwszych,
najbardziej popularnych, tagów.
22
Możemy je zacząć tworzyć od razu lub spokojnie zrobić to po zainstalowaniu kontenera. To
co będziemy musieli teraz to po kolei:
1. Tworzenie tagu Google Analytics
2. Określanie reguł tagu
3. Test nowo stworzonego tagu
4. Tworzenie wersji kontenera
5. Publikacja
Zacznijmy zatem od początku.
Ad 1. Tworzenie tagu Google Analytics
Tworzenie tagu zaczynamy od nadania mu nazwy. Jest to o tyle ważne, że posiadając wiele
tagów będzie nam łatwiej nimi zarządzać jeśli tagi będą miały odpowiednio dobrane nazwy.
Dobrą praktyką jest konstruowanie nazwy opartych o rodzaj narzędzia np. Google
Copyright by Przemek Modrzewski, www.marketingLAB.pl 23
Analytics, oraz funkcji jaką dany tag ma spełniać. Pierwszym tagiem jaki stworzymy będzie
tag o nazwie GA (Google Analytics) -‐ Pageviews, ponieważ ten tag będzie odpowiedzialny
za śledzenie wyświetleń naszej strony czyli podstawowej funkcji Google Analytics.
Wszelkie inne funkcje GA będziemy także wykorzystywać, ale będziemy do tego używać
kolejnych tagów. Będziemy o tym mówić, na przykład, przy okazji śledzenia zdarzeń na
stronie za pomocą GTM.
Kolejnym krokiem jest wybór rodzaju tagu z listy standardowych tagów obsługiwanych
przez GTM. Z rozwijanego menu wybieramy Google Analytics. W obecnej chwili możemy
wybrać z pośród klasycznego GA i nowej wersji czyli Universal Analytics. Na potrzeby tego
przykładu skorzystamy z klasycznej wersji. Wybór drugiej nie będzie miał wpływu na
sposób tworzenia i zarządzania tagiem GA, więc możemy dowolnie wybrać wersję.
24
Jak widać powyżej mamy dostępnych dużo więcej standardowych tagów, których możemy
używać przy pomocy GTM. Jeśli naszego tagu nie ma na liście, możemy go
zaimplementować za pomocą tagów niestandardowych (custom tags). Będziemy o tym
mówić jeszcze później.
W kolejnym kroku musimy podać numer ID naszego konta Google Analytics, który
zamierzamy instalować przy pomocy GTM. ID możemy znaleźć w naszym koncie Analytics.
***OFF TOPIC***
Jak widać na obrazku powyżej przy numerze, po prawej stronie, ID konta wprowadzonym
w rubryce “Web property ID” znajduje się “klocek”. Jest to “klocek” oznaczający możliwość
skorzystania z makr. Wspominałem wcześniej, że makra służą nam do ułatwiania i
automatyzacji pracy. Skorzystamy zatem pierwszy raz z makra, aby ułatwić sobie
korzystania z numeru ID konta GA w kolejnych przypadkach wykorzystania tego numeru
Copyright by Przemek Modrzewski, www.marketingLAB.pl 25
na koncie. Co zatem robimy?
1. Zaznaczamy numer ID i kopiujemy go do schowka (ctrl + C)
2. Klikamy na “klocek” i wybieramy na samym dole “Nowe makro”.
3. Dodajemy nazwę makra, taką abyśmy wiedzieli do czego dane makro służy,
wybieramy typ jako “Constant String” oraz wartość jako numer naszego konta
Google Analytics. Typów makr jest wiele i z czasem będziemy korzystać z innych niż
“Ciąg stały” (Constant String). W tej chwili jednak się tym nie zajmujemy.
1. Po wszystkim możemy korzystać z danego makra i dzięki temu nie potrzebujemy pamiętać
numeru ID Google Analytics przy kolejnych instalowanych tagach.
26
Jest to jedna z najprostszych metod wykorzystania makr, ale dzięki temu nie pomylimy
się podczas przeklejania kodów i do tego nie tracimy czasu na sprawdzanie wiele razy
danego numeru. Jeszcze raz podkreślę, że tag Analytics ma swoje typy, które odpowiadają
za różne rodzaje śledzonych Danych. Czyli jeśli będziemy chcieli śledzić zdarzenia oraz
transakcje ecommerce, przez GTM, to będziemy musieli użyć trzech tagów: dla wyświetleń
(standardowy), dla zdarzeń oraz dla transakcji. Wtedy właśnie potrzebujemy za każdym
razem podać numer ID konta GA. Dzięki stworzonemu makru nie musimy go pamiętać
***OFF TOPIC***
Wracając do tworzenia naszego tagu. Po wybraniu typu tagu jako Google Analytics, poniżej
widzimy opcje “Enable Display Advertising Features”. Opcja ta służy to włączania
możliwości wykorzystania remarketingu w Google Analytics oraz raportów dotyczących
demografii. W praktyce opcja dołącza do kodu GA ciastko Doubleclicka odpowiedzialne
właśnie za te dodatkowe możliwości Google Analytics.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 27
Typ śledzenia (track type)
O typach śledzenia wspomniałem trochę wcześniej przy okazji tworzenia pierwszego
makra. Typów śledzenia, w zależności od rodzaju tagu, może być wiele. Akurat w
przypadku Google Analytics mamy ich także całkiem sporo.
Standardowy typ to oczywiście śledzenie wyświetleń strony (Page View), ale w dalszej
części będziemy wykorzystywać kolejne typy, w miarę jak będziemy chcieli uruchomić
kolejne funkcjonalności Google Analytics przy wykorzystaniu GTM, takie jak na przykład
śledzenie zdarzeń na stronie (Event), albo śledzenie ruchu pomiędzy domenami. Będziemy
o tym mówić w dalszej części.
28
Pierwsza reguła w GTM
W tym momencie mamy już prawie skonfigurowany pierwszy tag. Jedyna rzecz jaka nam
pozostała przed jego przetestowaniem i publikacją to dodanie reguły, która pozwoli nam
ustalić zasady, kiedy GTM ma dany tag uruchamiać.
Reguły ustalamy w interfejsie w prawym górnym rogu. Każdy nowo stworzony tag będzie
potrzebował reguły jego uruchamiania. Bez reguły tag nie będzie działać. To co musimy
zrobić, to zastanowić się teraz kiedy dany tag ma być uruchamiany. Nasz pierwszy tag
Google Analytics ma być uruchamiany na każdej podstronie naszego serwisu. Jest to
dość oczywiste, gdyż chcemy zbierać dane dotyczące wyświetleń naszej strony dla całego
ruchu jaki się na niej pojawi. Musimy zatem ustalić regułę, która uruchomi tag na każdej
stronie serwisu.
Kiedy chcemy dodać nową regułę pojawi się nam okno jej wyboru. Możemy wybrać reguły
już istniejące, które tworzyliśmy wcześniej dla innych tagów, albo stworzyć nową. W
sytuacji nowych kont i kontenerów musimy tworzyć reguły od nowa.
Jak widać reguła, która nas interesuje jest w standardzie już dostępna -‐ uruchom na każdej
podstronie. Wystarczy ją zaznaczyć i gotowe. W przypadku tworzenia nowych reguł
musimy stworzyć regułę dotyczącą warunków jakie muszą być spełnione , aby dany tag
Copyright by Przemek Modrzewski, www.marketingLAB.pl 29
został uruchomiony. Tworzeniem bardziej zaawansowanych reguł zajmiemy się dalszej
części tego ebooka. Już przy okazji tworzenia tagu dla śledzenia konwersji AdWords, gdzie
opiszemy zasady tworzenia reguł bardziej obszernie.
Testowanie nowo stworzonego tagu
Stworzyliśmy pierwszy tag. Zanim go opublikujemy na stronie warto go przetestować i
zobaczyć czy działa. Jak widać poniżej nasza wersja tagu jest nieopublikowana. To oznacza,
że wprowadzone przez nas zmiany nie weszły w życie. Warto zawsze na to zwracać uwagę,
gdyż jest to jeden z częstszych błędów, które popełniają początkujący i nie tylko. Jeśli nie
opublikujemy zmian (nowej wersji kontenera), na żywo ich nie zobaczymy. Będą one do
zobaczenie tylko w trybie Poglądu (Preview – Debug).
Zanim jednak opublikujemy cokolwiek musimy przeprowadzić weryfikację. Wybieramy
opcję Podgląd (Preview), a następnie “Debug” (zobacz str.18). Przechodzimy na
naszą stronę w nowej zakładce przeglądarki i odświeżamy widok. Dzięki temu pojawi się
nam konsola u dołu ekranu z informacją czy nasz tag w określonych, przez reguły,
warunkach zostanie uruchomiony.
30
Widać w konsoli, że nasz tag został uruchomiony. Wszystko działa. Teraz możemy wrócić
do zakładki z otwartym Tag Managerem i opublikować wersję. W tym celu tworzymy nową
wersję i ponownie naciskamy ten sam guzik, który obecnie zamienił się na Publikuj
(Publish). W tym momencie tworzy się nowa wersja (w naszym przypadku nr 4).
Warto zwrócić uwagę na żółty pasek u góry z komunikatem o włączonym podglądzie na
naszej stronie. Jeśli teraz przejdziemy na stronę będziemy cały czas widzieli konsolę u dołu
Copyright by Przemek Modrzewski, www.marketingLAB.pl 31
strony. Tak więc jeśli zakończyliśmy pracę możemy wyjść z tego trybu (Dla jasności: tryb
podglądu widzimy tylko my, inni użytkownicy nie. Chyba, że wyślemy im specjalny link do
podglądu o czym pisałem wcześniej).
Kolejne kroki
Nasz pierwszy tag został opublikowany. W tym momencie jesteśmy gotowi do instalacji
kolejnych tagów, które potrzebne będą nam do śledzenia naszych działań reklamowych i
nie tylko. Zanim jednak przejdziemy do kolejnych tagów, warto wspomnieć o bardzo
przydatnym narzędziu, które pozwoli nam łatwo zorientować się czy nasza strona, albo
jakakolwiek inna, ma zainstalowane i działające tagi. Tym narzędziem jest Tag Assistant.
Jest to prosta i przyjazna wtyczka do przeglądarki Chrome.
Dzięki Tag Asystentowi możemy łatwo zweryfikować jakie w danej chwili tagi działają na
oglądanej przez nas stronie. Otrzymamy także wskazówki i sugestie dotyczące
implementacji tagów. Tag Assistant jest właściwie narzędziem, które jest obowiązkowe.
Asystenta możemy za darmo pobrać ze sklepu Google Chrome (rozszerzenia Google
32
Chrome).
Instalacja śledzenia konwersji Google AdWords w GTM
W poprzednim rozdziale udało nam się stworzyć pierwszy tag, który służy do śledzenia
odwiedzin przy pomocy Google Analytics. Stworzyliśmy konto, kontener, po czym tag,
gdzie wybraliśmy jego rodzaj (Google Analytics) oraz określiliśmy kiedy nasz tag ma być
uruchamiany (reguła). W tym kroku stworzymy tag, który będzie obsługiwał śledzenie
konwersji AdWords.
Śledzenie konwersji AdWords (lub innych)
Właściwie to co potrzebujemy do śledzenia konwersji? Potrzebujemy zmierzyć ruch na
stronie albo liczbę akcji, która będzie potwierdzała nam, że konwersja miała miejsce. Na
przykład, klasycznym przykładem konwersji są odwiedziny strony “Dziękujemy za” -‐
zakupy, kontakt itd. Czyli strony, która wyświetla się tylko wtedy gdy użytkownik wykonał
jakąś, pożądaną przez nas akcję, na przykład wypełnienie formularza. Klasyczna ścieżka
konwersji wygląda mniej więcej tak:
Strona główna -‐> strona kategorii -‐> strona produktu -‐> formularz -‐> płatność -‐> dziękujemy.
Do śledzenia konwersji potrzebna nam właśnie śledzenie tej ostatniej strony “dziękujemy”,
na którą wstawiamy odpowiedni kod. Ten kod, zwany kodem śledzącym konwersje jest, w
momencie wejścia na stronę dziękujemy, porównywany z ciastkiem(cookie), które zostało
nadane użytkownikowi w momencie kliknięcia na reklamę. Jeśli dane z ciastka zgadzają
się z danymi w kodzie śledzącym, zostaje naliczona konwersja.
Opis działania w dużym uproszczeniu, ale jest on tylko dla przypomnienia i eliminacji
skrótów myślowych autora.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 33
Zatem to co potrzebujemy to adres strony “dziekujemy” i na tej stronie musimy wstawić
odpowiedni kod konwersji. Do tej pory wyglądało to tak:
1. Generowaliśmy kod konwersji w koncie AdWords,
2. Kopiowaliśmy kod,
3. Edytowaliśmy stronę “dziekujemy”,
4. Wklejaliśmy kod konwersji w kod strony gdzieś na końcu strony przed tagiem </body>.
Wstawianie kodu konwersji za pomocą GTM
Obecnie, dzięki GTM, nie musimy edytować już strony. Wystarczy stworzyć odpowiedni tag
w GTM i nadać mu odpowiednie reguły. Z założenia kod ma się uruchamiać na stronach
“dziekujemy”. Tak więc, aby stworzyć tag konwersji musimy wykonać kilka prostych
kroków:
1. Tworzymy konwersję na koncie AdWords,
2. Tworzymy tag konwersji w GTM,
3. Nadajemy regułę kiedy kod ma być uruchamiany,
4. Testujemy i publikujemy nową wersję kontenera.
Ad 1. Tworzymy konwersje na koncie AdWords
Abyśmy mogli zacząć śledzić efektywność naszych działań dzięki konwersjom, musimy
najpierw taką konwersję stworzyć w naszym koncie AdWords. Wcześniej kopiowaliśmy
34
cały kod i wklejaliśmy na stronie. Teraz potrzebne nam będą tylko dwie rzeczy -‐ ID
konwersji i jej etykietę (label). Do tego potrzebujemy podejrzeć kod stworzonej przez nas
konwersji w interfejsie AdWords (zakładka Narzędzia -‐> Konwersje -‐> kod).
Ad 2. Tworzenie tagu konwersji w GTM
Mamy już ID i etykietę konwersji, możemy zatem przejść do tworzenia tagu konwersji i
zacząć śledzić konwersji przy pomocy GTM.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 35
1. Tworzymy nowy tag w naszym kontenerze
2. Nadajemy mu odpowiednią nazwą
3. Jako typ wybieramy: AdWords Conversion Tracking
4. Dodajemy skopiowane wcześniej ID i etykietę z kodu konwersji, wygenerowanego
wcześniej (wartość konwersji jest nieobowiązkowa i nie musimy jej podawać).
5. Dodajemy regułę kiedy kod ma się uruchamiać.
Do punktu nr. 4 wszystko jest oczywiste, w pkt. 5 musimy na chwilę się zatrzymać, aby
trochę więcej powiedzieć na temat reguł. Pamiętamy, że mamy śledzić konwersję na
stronie typu “dziękujemy za…”. W naszym przypadku strona tego typu to strona po
wypełnieniu formularza która ma adres: www.strona-‐testowa/dziekujemy.html.
Chcemy, aby tylko na tej stronie wywołał się kod konwersji. Nie chcemy, aby był on
aktywny na żadnej innej stronie. Tworzymy zatem regułę, która nam to zapewni.
Wybieramy “Dodaj regułę”, a następnie “Stwórz nową regułę”. Jak widać na załączonym
obrazku poniżej, reguły składają się z dwóch części: zmiennej (makra) oraz wartości. W
tym przypadku wybieramy makro {{url}}, które jest odpowiedzialne za uwzględnianie
36
adresów URL, oraz wartości tej zmiennej czyli adresu naszej strony -‐ dziekujemy.html.
Pomiędzy tymi częściami wybieramy jeszcze logiczny parametr, który będzie zasadą ich
połączenia.
W naszym przypadku cały warunek (reguła) brzmi następująco: Jeśli adres URL zawiera w
sobie ciąg znaków “dziekujemy.html” to uruchom tag śledzenia konwersji
Możemy oczywiście wybrać inne warunki logiczne takie jak “równa się”, “nie równa”,
“kończy się”, itd.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 37
Właściwie moglibyśmy na tym poprzestać, bo wszystko zrobiliśmy poprawnie. Teraz czeka
nas jeszcze ewentualny test (Podgląd -‐ Debug) czy wszytko działa poprawnie, stworzenie
nowej wersji i jej opublikowanie. Voila! Kolejny tag na naszej stronie został zainstalowany.
Jednak jest jeszcze jeden szczegół, który nie został w pełni w tym miejscu wytłumaczony -‐
makra. No właśnie, użyliśmy makra {{url}}. Pytanie skąd się ono wzięło i jak ono działa?
Spróbuję trochę przybliżyć temat makr w tym miejscu, ale ich wykorzystanie będzie
stosowane w większości naszych operacji w GTM, więc temat makr będzie obecny prawie
w każdym przykładzie.
38
Pierwszy kontakt z makrami w Google Tag Managerze
Jak już wspomniałem na samym początku, makra służą do automatyzacji i ułatwiania pracy
z danymi w GTM. To trochę ogólny opis, ale wystarczył na początek. Makra to, tak
naprawdę, łączniki pomiędzy danymi na stronie, a naszymi tagami. Makra mogę
przekazywać wartości pomiędzy stroną, a poszczególnymi tagami oraz makra mogą być
też podstawą do budowania warunków uruchamiania tagów (tak użyliśmy makra {{url}}.
We wcześniejszym rozdziale tworzyliśmy też pierwsze makro, gdzie wartością był numer
ID naszego konto Analytics (makro Ciąg Stały).
Jeśli chcemy stworzyć regułę, w której będą zmienne wartości w zależności do sytuacji to
właśnie użyjemy makra. Tak jak adresy URL mają wiele zmiennych i wszystkie są brane
pod uwagę, my w naszym przykładzie podstawiliśmy wartość “dziekujemy.html” dla makra
{{url}}.
To wszystko składa się na opinię, że makra to jeden z najistotniejszych elementów, z
którymi mamy do czynienia w GTM. Myślę, że, nawet jeśli w tej chwili, makro jest
czymś abstrakcyjnym, to przy kilku przykładach już tak nie będzie.
Poniżej widać listę wszystkich makr, które są obecnie na moim koncie. Część z nim jest
standardowa i obecna od początku na koncie, resztę trzeba stworzyć. Tworzyliśmy do tej
pory jedno makro dotyczące ID konta Analytics (Ciąg Stały), aby ułatwić sobie pracę i
wykorzystaliśmy jedno makro gotowe, {{url}}, do zdefiniowania reguły. Teraz kolej na
trochę więcej wyjaśnienia w kwestii makr.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 39
Z czego składa się makro i jak się je tworzy?
Jak widać makro składa się zawsze z dwóch nawiasów klamrowych oraz nazwy np. {{url}}.
W ten sposób zawsze używamy nazw makr w obrębie GTM.
Każde makro ma swój rodzaj. Mamy makro, które będzie służyło do definiowania adresów
url, ale rodzajów makr jest kilkanaście. Na przykład makro, które tworzyliśmy na samym
początku na potrzeby ID konta było po prostu ciągiem znaków “Constant string”.
40
Jak widać na obrazku powyżej, rodzajów makr mamy całkiem sporo. Użyliśmy do tej pory
dwóch, ale czeka nas jeszcze wykorzystanie większej ilości z nich.
Makra będziemy na bieżąco tworzyć jeśli będziemy potrzebowali połączyć dane ze strony z
naszymi tagami. W zależności co dane makro będzie musiało przekazać, takiego rodzaju
makra będziemy używali.
Myślę, że temat makr w tej chwili możemy odłożyć. W kolejnych przykładach będziemy
jeszcze do tego wielokrotnie wracać i tłumaczyć ich działanie.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 41
Implementacja remarketingu Google AdWords za pomocą GTM
Do tej pory wstawiliśmy dwa bardzo ważne tagi na naszą stronę -‐ Google Analytics oraz
kod śledzenia konwersji AdWords. Kolejnym ważnym, i do tego podstawowymm kodem,
który się powszechnie wstawia na stronach, jest kod remarketingowy.
W niniejszym ebooku nie będę tłumaczył co to jest remarketing, gdyż ten temat nie jest
tematem tej publikacji. Możemy powiedzieć tylko tyle, że kod remarketingowy to kod
służący do przywracania użytkowników na stronę za pomocą reklamy, którzy wykonali lub
nie wykonali jakieś akcji na naszej stronie np. nie kupili produktu i opuścili nasz serwis. To
klasyczny przykład, ale zastosowań remarketingu jest całe mnóstwo. My skupimy się tutaj
na technicznej stronie czyli implementacji kodu remarketingowego na konkretnych
stronach naszego serwisu.
Tworzenie tagu remarketingowego
Tak jak w poprzednich przypadkach, tworzymy nowy tag w GTM i wybieramy jego rodzaj
jako remarketing. Musimy także zdobyć ID kodu remarketingowego.
Aby to zrobić musimy odwiedzić nasze konto AdWords i zakładkę “Udostępnione zasoby”,
następnie “Odbiorcy” -‐ tam znajdują, albo będą znajdować, nasze listy remarketingowe.
42
Przechodzimy do opcji wyświetlenia szczegółów tagu remarketingowego i stamtąd naszym
zadaniem jest pozyskać numer ID naszego tagu, który wstawimy za chwilę w GTM.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 43
Wracamy do Tag Managera i wstawiamy ID w odpowiednie miejsce. Wystarczy tylko
numer ID, nie musimy podawać etykiety, które zostały usunięte w obecnych kodach
remarketingowych. Etykiety służą do unikalnego oznaczania kodów konwersji na koncie.
Wcześniej trzeba było generować wiele kodów remarketingowych stąd też przydatne było
ich oznaczenia. W tej chwili używamy jednego kodu, a listy remarketingowe tworzymy na
podstawie tego kodu i reguł określających kiedy lista ma zbierać ciastka.
Wystarczy teraz tylko stworzyć regułę kiedy dany kod remarketingowy zostanie wywołany
do zbierania ciasteczek (czyli użytkowników strony). Prawie zawsze przygodę z
remarketingiem zaczynamy od zbudowania listy ciastek wszystkich, którzy pojawili się na
naszej stronie. Stąd w tym przykładzie wykorzystamy tą samą regułę jak w przypadku
Google Analytics (wszystkie strony). Kod ma się wywołać na każdej stronie naszego
serwisu. Czyli ciastko remarketingowe dostanie każda przeglądarka1, która odwiedzi nasz
serwis, nie ważne na jaką podstronę serwisu trafi.
1 Pisząc o użytkownikach czy osobach musimy brać pod uwagę, że jest to skrót myślowy, gdyż tak naprawdę myślimy o przeglądarkach, które otrzymują ciastka. Jeśli jeden użytkownik korzysta z dwóch różnych przeglądarek zamiennie to otrzyma dwa ciastka (dla każdej przeglądarki po jednym). W związku z tym, prawie zawsze, liczba ciastek, na liście remarketingowej, przekracza liczbę prawdziwych użytkowników naszej strony.
44
Kod remarketingowy możemy aktywować także przy pomocy innych reguł. Moglibyśmy, na
przykład, stworzyć regułę, która uruchomi tag remarketingowy jeśli ktoś kliknie na link czy
guzik. Możemy tworzyć reguły, które aktywują listę po wybranym przez nas czasie i wiele
innych. W trakcie czytania tego ebooka, dowiemy się jak takie reguły tworzyć. Teraz jest
jeszcze za wcześnie ;).
Na obrazku z poprzedniej strony, widzimy też coś co oznaczone jako “Parametry
niestandardowe” (custom parameters). Parametry te służą do tworzenia bardziej
zaawansowanych warunków uruchamiania tagów. Możemy na przykład pobrać dane ze
strony dotyczących wartości koszyka klienta i w zależności od jego wartości uruchomić tag
remarketingowy lub (dodać do listy lub nie). Wykorzystujemy te parametry w tworzeniu
kampanii dynamicznego remarketingu. W tym miejscu zaczyna się nasza przygoda z
czymś co nazywamy Warstwą Danych (Data Layer).
Warstwa Danych to chyba najważniejsza funkcjonalność Google Tag managera,
ponieważ uniezależnia dane na stronie od samego kodu strony i sprawia, że dane ze strony
stają się dostępne dla wielu naszych narzędzi, które mamy na stronie. Warstwa Danych jest
Copyright by Przemek Modrzewski, www.marketingLAB.pl 45
taką uniwersalną wtyczką, jaką możemy kupić na lotnisku, do której z jednej strony
możemy podłączyć laptopa, a z drugiej możemy wpiąć w dowolne gniazdko na całym
świecie. W ten sam sposób dane z naszej strony dzięki takiej uniwersalnej wtyczce mogą
być zrozumiałe dla wielu narzędzi i nie trzeba każdego oddzielnie podłączać do strony. O
Warstwie Danych będziemy mówić dokładniej w dalszej części ebooka, więc nie przejmuj
się, że w tej chwili może to być trochę niezrozumiałe.
Ważne! W tej chwili możemy tworzyć listy remarketingowe w obrębie Google Analytics do
czego zachęcam. Dzięki GA możemy tworzyć listy w oparciu o wiele zachowań
użytkowników naszej strony. Nie musimy wtedy korzystać z kodu remarketingowego
AdWords. Listy remarketingowe tworzymy w samym interfejsie Analytics. (Na
chwilę obecną remarketing nie jest obsługiwany przez Universal Analytics)
Google Tag Manager - zaawansowane przypadki wykorzystania
Na poprzednich stronach omówiliśmy sobie najczęstsze i podstawowe metody
wykorzystania GTM w pracy z tagami na naszej stronie. Zainstalowaliśmy podstawowy kod
Google Analytics, śledzenie konwersji AdWords oraz kod remarketingowy. Większość
instalacji na tym się kończy. Jednak takie czasy nadeszły, że potrzebujemy coraz więcej
danych zbierać i przetwarzać z naszej strony, potrzebujemy zrozumieć coraz dokładniej
czego, tak naprawdę, potrzebują odwiedzający naszą stronę, potrzebujemy lepiej skierować
kampanie marketingowe itd. Stąd pojawi się, na pewno, potrzeba dodatkowych operacji na
danych znajdujących się na naszej stronie, będziemy chcieli badać każdy obszar strony,
będziemy chcieli lepiej oznaczyć każdego odwiedzającego.
Czeka nas zatem zabawa w bardziej zaawansowaną implementację i wykorzystanie
możliwości GTM. W tej części znajdują się najbardziej przydatne i popularne
zaawansowane konfiguracji tagów i makr, tak abyśmy mogli mierzyć dosłownie wszystko
46
na stronie i prowadzić efektywne kampanie marketingowe. Na poniższych przykładach
zrozumiemy też lepiej działanie samego narzędzia Google Tag Manager. Pozwoli nam to na
swobodne poruszanie się po nim i konfigurację dowolnych tagów.
Warstwa Danych - co to jest i do czego się ją stosuje?
Zanim przejdziemy do zawansowanych implementacji, które postaram się opisać krok po
kroku, ważne jest abyśmy zrozumieli jedną z najważniejszych funkcjonalności GTM czyli
Warstwę Danych (dataLayer).
Co to jest Warstwa Danych?
Warstwa Danych to połączenie ustrukturyzowanych Danych i interfejsów API, które
pozwalają korzystać z uniwersalnego formatu (JSON) tagowania serwisów i przekazywania
Danych do systemu zarządzania (GTM). W ten sposób dane są dostępne dla wielu narzędzi
bez potrzeby każdorazowego tagowania strony oddzielnymi formatami dla każdego
narzędzia, jakie chcemy podłączyć. Nie zrozumiałe? Dla mnie też nie ;)
No więc w prostszych słowach.
Mając do podłączenia wiele systemów marketingowych do naszej strony musimy dodać za
każdym razem specjalny kod (wtyczkę) dla każdego narzędzia oddzielnie. Każde narzędzie
działa, w końcu, inaczej.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 47
Jeśli mamy wiele rzeczy do zmierzenia (guziki, systemy zakupowe, koszyk, itd.) i wiele
narzędzi, może zrobić się na naszej stronie całkiem spory bałagan. Odchodzi pracownik,
który to robił, a my chcemy coś zmienić i mamy duży problem. Remedium na taką sytuację
jest właśnie Warstwa Danych, którą wcześniej porównałem do takiej uniwersalnej wtyczki
do kontaktu, którą możemy posługiwać się w każdym kraju.
48
Warstwa Danych jest swojego rodzaju “tłumaczem”, takim językiem angielskim dla różnego
rodzaju narzędzi jeśli chodzi o dane na naszej stronie. Każdy kocha swój język ojczysty, ale
nie wszędzie się dogadamy na świecie i potrzebny nam język uniwersalny. W naszym
świecie, czy tego chcemy czy nie, jest to język angielski. W świecie danych jest to Warstwa
danych.
Dzięki temu, informacje ze strony takie jak zdarzenia (np. kliknięcia na guzik) czy inne
wartości mogą być przekazywane do Google Tag Managera przez właśnie warstwę danych.
Po czym już w samym narzędziu GTM tworzymy reguły na podstawie tychwartości. Na
przykład “wywołaj kod remarketingowy(tag), kiedy wartość koszyka przekroczy 300
zł(zmienna=koszyk, wartość=300). Reguły możemy w takim przypadku tworzyć dla
każdego podłączonego na naszej stronie narzędzia. Oto cała tajemnica Warstwy Danych.
Warstwa Danych także spełnia inne role. Pozwala na odseparowanie danych od warstwy
kodu strony (html, css). Tak jak poprzednio oddzieliliśmy warstwę styli (jak strona
wygląda) dzięki językowi CSS, tak teraz oddzielamy dane od warstwy samego kodu strony.
W tym momencie modyfikując coś na którejkolwiek warstwie nie naruszamy struktury
pozostałych. Daje to bezpieczeństwo i porządek w zarządzaniu naszymi serwisami.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 49
Jak wygląda Warstwa Danych?
Warstwa Danych jest wbudowana w sam kod kontenera, jeśli chcemy przekazywać do
Warstwy Danych informacje ze strony (np. zdarzenia takiej jak kliknięcia) wystarczy je
przekazać do Warstwy Danych przy pomocy metody push. Na przykład jeśli chcemy
przekazać do Warstwy Danych informacje, że ktoś kliknął na guzik, w kodzie strony
umieszczamy taki fragment kodu:
<a href="#" onclick="dataLayer.push({'event': 'przykladowy-‐link'});">Przykładowy
link</a>
Jeśli ktoś miał co nieco do czynienia z językiem Javascript wie, że metoda push dodaje po
prostu dane do tablicy. I właśnie się to dzieje. Dla tych co są nie wtajemniczeni w kwestie
programowania wystarczy informacja, że metoda działa tak samo jak w przypadku
oznaczania zdarzeń w Google Analytics.
W tym przykładzie w momencie kliknięcia (onclick) zostaje przekazana informacja do
Warstwy Danych, że wydarzyło się zdarzenie (event) o wartości ‘przykladowy-‐link’.
W ten sposób z tej informacji może korzystać każdy tag, jaki zainstalujemy na stronie.
Na przykład możemy “zlecić” Google Analytics zarejestrowanie zdarzenia kliknięcia na
guzik, możemy “zlecić” tagowi remarketingowemu, żeby oznaczył użytkownika, który
kliknął na link (dodał do listy użytkowników, którzy kliknęli na link) lub możemy
zarejestrować konwersję w AdWords za pomocą tagu śledzenia konwersji AdWords.
Jedno oznaczenie zdarzenia, które zostało przekazane do Warstwy Danych i wiele
możliwości wykorzystania przez wiele narzędzi. Na tym polega potęga koncepcji Warstwy
Danych.
50
Dodawanie zmiennych i wartości do Warstwy Danych
W poprzednim akapicie dodaliśmy jedną zmienną (event) i jedną wartość (przykladowy-‐
link) do Warstwy Danych2. Takie dodanie danych do Warstwy Danych nastąpi dopiero
kiedy strona się załaduje i użytkownik kliknie na oznaczony link.
Możemy jednak przekazywać dane wcześniej, podczas ładowania strony. W ten sposób tagi,
które będą się ładować podczas wczytywania strony będą mogły korzystać z danych
przekazanych do Warstwy Danych. Takie dane musimy przekazać w momencie ładowania
się strony. Dokonujemy tego przez prostą tablicę (znowu element doskonale znany osobom
znającym Javascript). Pusta tablica wygląda tak:
Ważny jest fakt, że tablica Warstwy Danych znajduje się ponad skryptem kontenera. To
bardzo ważne. W obrębie tej tablicy będzie teraz dodawać pary informacji (zmienna i
wartość). Zaraz wyjaśnimy jak to wygląda.
Dobrym przykładem jest informacja czy użytkownik, który wszedł na stronę jest
zalogowany czy nie. Od tej informacji możemy uzależniać jakie tagi będziemy uruchamiać
2 Takich par zmienna:wartość możemy przekazywać oczywiście ile chcemy dla jednego zdarzenia. Więcej w pomocy Google Tag Managera.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 51
od razu w momencie ładowania się strony. Jeśli na przykład użytkownik jest
niezarejestrowany dodajemy go listy remarketingowej osób, które jeszcze się nie
zarejestrowały. Jeśli mamy taki przypadek, ważne, żeby dane dotarły do GTM jak
najszybciej.
W takiej sytuacji musimy przekazać informacje, w momencie ładowania konkretnej
podstrony. W tym celu do Warstwy Danych przekazujemy informacje o rodzaju
użytkownika.
W tym przykładzie dodaliśmy dwie informacje:
zmienna: “visitor-‐type” o wartości -‐ “unregistered” oraz zmienna: “category” o wartości -‐
“signup”.
Oprócz informacji o rodzaju użytkownika, przekazaliśmy od razu informacje o rodzaju
strony(category), na której się znalazł użytkownik. Użytkownik nie zarejestrowany
(unregistered) znalazł się na stronie “do rejestracji” (signup). Kategoria strony może być
przydatna np. w dynamicznym remarketingu.
52
Dzięki temu, że dane znalazły się od razu w Warstwie Danych, tagi, które ładują się na
stronie mogą od razu z tych danych korzystać bez potrzeby jakichkolwiek akcji na stronie
ze strony użytkownika.
Do Warstwy Danych możemy przekazać dowolną ilość danych. Jedno pytanie, które może
się pojawić to skąd te dane mają się tam brać? Tutaj niestety nasza strona będzie wymagała
często interwencji, kogoś kto będzie potrafił programistycznie przekazać dane do Warstwy
Danych np. z naszego sklepu albo systemu rejestracji (dane z bazy danych, serwera). Jeśli
ktoś wykorzystywał moduł ecommerce Google Analytics, na swojej stronie, to kwestia
przekazywania wartości zmiennych do Warstwy Danych wygląda analogicznie.
W prostych (nie programistycznych słowach): W Warstwie Danych muszą znaleźć
się wartości z naszego sklepu, modułu sprzedażowego itp., które zostaną zapisane w
sposób zrozumiały dla GTM (czyt. zmienna -‐ wartość). Może to być np. wartość koszyka,
która zostanie przekazana do Warstwy Danych z naszego sklepu, dzięki czemu GTM (oraz
wszystkie tagi tam zainstalowane) będą mogły wykorzystać tą wartość np. do budowy
warunków uruchamiania tagów.
UWAGA: Warstwa Danych nie jest w żaden sposób wymagana. Bez Warstwy Danych, GTM
także będzie spełniał swoją rolę “magazynu tagów”. Brak Warstwy Danych ogranicza
jednak bardzo możliwości jakie daje nam GTM.
Po tym krótkim objaśnieniu na czym polega Warstwa Danych możemy przejść do bardziej
zaawansowanych przykładów wykorzystania GTM w pracy z mierzeniem naszej
działalności w internecie.
Jeżeli chcemy zobaczyć co zostało załadowane do Warstwy Danych możemy łatwo to
sprawdzić przy pomocy konsoli dla programistów na przykład w przeglądarce Chrome.
Wchodzimy w menu Widok -‐> Programista -‐> konsola Javascript.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 53
Po załadowaniu strony z naszą Warstwą Danych. W zakładce Consola wpisujemy
“dataLayer”. W obiektach będziemy mogli podejrzeć co tak prawdę zostało załadowane do
Warstwy Danych i przekazane do Tag Managera. Większa część w tym przypadku to
automatyczne obiekty GTM, ale jak widać w jako pierwszy obiekt zostały dodane nasze
zestawy danych, które zostały załadowane podczas ładowania się strony z tablicy, którą
dodaliśmy ponad kontenerem.
Śledzenie zdarzeń w Google Analytics za pomocą GTM
W poprzednim punkcie dowiedzieliśmy się co to jest Warstwa Danych i do czego służy. Aby
GTM zrozumiał zdarzenia, jakie mamy zamiar śledzić, na przykład przy pomocy Google
Analytics, to musimy je przekazać do Warstwy Danych za pomocą metody push3. Jeśli
chcemy zmierzyć zdarzenie na naszej stronie, które będzie naciśnięciem guzika, musimy
przekazać do GTM, poprzez Warstwę Danych, informację, że zdarzenie (event) o danej
wartości się wydarzyło.
3 Metoda push jest doskonale znana wszystkim osobom, które choć w podstawowym stopniu znają język Javascript, gdzie metoda push pozwala dodać wartości do wcześniej stworzonej tablicy. Taką tablicę w naszym przypadku jest Warstwa Danych. Więcej o metodzie push można przeczytać w tutaj: http://www.w3schools.com/jsref/jsref_push.asp
54
Naciśnięcie guzika jako zdarzenie w Google Analytics
W sytuacji kiedy chcemy zmierzyć naciśnięcie guzika jako zdarzenie w Google Analytics,
przy pomocy GTM, musimy wykonać następujące czynności.
1. Zmodyfikować kod strony -‐ Oznaczyć naciśnięcie guzika jako zdarzenie w GTM
2. Stworzyć tag Google Analytics w GTM -‐ stworzyć tag odpowiedzialny za zdarzenia w GA
3. Stworzyć odpowiednie reguły kiedy nasz tag GA ma być uruchamiany.
Ad 1. Modyfikacja kodu strony
To co musimy teraz zrobić to przekazać do Warstwy Danych informację, że zdarzenie -‐
kliknięcie guzika -‐ się wydarzyło. Będziemy do tego używali metody push.
Jak to będzie wyglądać w praktyce krok po kroku?
1. Wpisujemy adres stron do przeglądarki i naciskamy enter .
2. Wczytywany jest kontener z naszymi tagami oraz reszta strony.
3. Jeśli nastąpi kliknięcie w oznaczony guzik, metodą push, przekazana zostaje informacja o
zdarzeniu (event) do Warstwy Danych.
4. Jeśli zdarzenie spełnia jakąś regułę w obrębie GTM, dany tag zostaje uruchomiony.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 55
Tablica dataLayer działa i przekazuje dane do kontenera, jeśli jakieś zmienne i wartości w
niej umieścimy. Jeśli nie to nie jest potrzebna w kodzie strony.
Jak to zatem będzie wyglądać w praktyce dla zdarzenia mierzonego w Google
Analytics?
1. Wybieramy guzik, który chcemy mierzyć jako zdarzenie,
2. Edytujemy stronę gdzie znajduje się guzik (link)4,
3. Guzik oznaczamy metodą push z rodzajem zdarzenia onclick.
4 Musimy mieć dostęp do plików źródłowych strony z możliwości ich edytowania. Jeśli nie wiemy jak to zrobić to najlepszym wyjściem będzie zgłoszenie się z poniższym poradnikiem do kogoś kto ma uprawnienia do edytowania strony.
56
Rodzaj zdarzenia “onclick” jest znowu elementem języka Javascript. „Onclick” uruchamia
zdarzenie po naciśnięciu guzika, a na przykład „onmouseover” po najechaniu na obiekt.
Istnieje wiele innych rodzajów zdarzeń w języku Javascript. Te dwa jednak są
najpopularniejsze jeśli chodzi mierzenie interakcji ze stroną za pomocą myszki.
Przykładowy kod będzie wyglądał w ten sposób:
dataLayer.push({'variable_name': 'variable_value'});
czyli dla naszego przykładu guzika od razu w kodzie html będzie wyglądał w ten sposób:
<a href="http://jakas-‐strona.pl" onclick="dataLayer.push({'event':'przykladowy-‐
link'});">Sample link</a>5
Co się wydarzyło? W momencie kliknięcia na link przypisujemy do guzika “Sample link”
zdarzenie GTM o zmiennej ‘event’ i wartości ‘przykladowy-‐link’ . Następnie przekazujemy
te dane metodą push do Google Tag Managera (do Warstwy Danych).
W ten sam sposób możemy przekazać zdarzenie w rodzaju “onmousover” czyli mierzyć
najechania na guzik czy inny oznaczony element. Wystarczy podmienić rodzaj zdarzenia z
“onclick” na “onmouseover”6.
Tworzenie tagu do śledzenia zdarzeń w Google Analytics
Mając już oznaczony guzik przy pomocy metody push, przechodzimy do GTM i tworzymy
nowy tag odpowiedzialny za odebranie “wiadomości” o kliknięciu z Warstwy Danych i 5 Przykład można zobaczyć na stronie www.rewolucja.com.pl/gtm.html 6 Więcej rodzajów zdarzeń możemy znaleźć np. tutaj: http://www.w3schools.com/js/js_htmldom_events.asp
Copyright by Przemek Modrzewski, www.marketingLAB.pl 57
przekazanie jej do Google Analytics. Tym tagiem będzie tag Google Analytics o rodzaju
śledzenia (track type) -‐ Zdarzenia.
W momencie tworzenia tagu Google Analytics musimy określić ID konta Analytics, na
którym chcemy śledzić określone zdarzenie oraz musimy określić parametry zdarzenia.
Zgodnie z formułą w Google Analytics7:
<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First
Birthday']);">Play</a>
Powyżej widzimy przykładowy link Play, oznaczony jako zdarzenie w GA. W przykładzie z
Google Analytics określiliśmy:
7 Więcej na temat zdarzeń w Google Analytics można przeczytać w pomocy Analytics
https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide#Anatomy
58
● Kategorie zdarzania (np. videos)
● Akcje (np. play )
● Etykietę (Baby\'s First Birthday -‐ opcjonalnie)
● Wartość (opcjonalnie)
Tak robiliśmy w przypadku instalacji GA na stronie. W naszym przypadku musimy te
wartości dopisać w odpowiednie rubryki podczaas tworzonym tagu, który ma odczytać to
zdarzenie. W naszym przykładzie określiłem trzy zmienne:
● Kategoria zdarzenia (guzik)
● Akcja zdarzenia (click)
● Etykieta (przykładowy-‐link)
W naszym przypadku, określam etykietę, mimo, że jest to zmienna nieobowiązkowa, tak
samo jako wartość. Warto pamiętać, że to co będzie kategorią wartości, akcją czy etykietą
zależy całkowicie od nas. Warto się więc zastanowić jak sensownie oznaczyć nasze
zdarzenia, żeby później było jasne co one oznaczają w raportach Google Analytics.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 59
Reguła do odczytu zdarzenia w Google Analytics
Stworzyliśmy już tag do odczytywania zdarzeń. Teraz musimy stworzyć regułę, która
pozwoli przenieść zdarzenie z GTM do Google Analytics przez uruchomienie tagu
odpowiedzialnego za przekazanie danych o zdarzeniu do GA. A więc przechodzimy do
tworzenia reguły w prawej kolumnie strony tworzenia tagu.
60
To co zrobiliśmy w tej chwili wymaga małego wytłumaczenia, gdyż użyliśmy makra
{{event}}. Nasza reguła o nazwie “GA event -‐ przykladowy link) mówi: Uruchom tag “UA
events” wtedy gdy makro {{event}} zawiera8 ciag znaków “przykladowy-‐link”.
Pamiętamy jak oznaczaliśmy nasz link w kodzie?
<a href="http://jakas-‐strona.pl" onclick="dataLayer.push({'event':'przykladowy-‐
link'});">Sample link</a>9
8 Można także użyć w regule “równa się”.
9 Przykład można zobaczyć na stronie www.rewolucja.com.pl/gtm.html
Copyright by Przemek Modrzewski, www.marketingLAB.pl 61
W momencie kliknięcia zmienna event ma przyjąć wartość ”przykladowy-‐link”. Tak więc w
momencie kliknięcia na link, nasza reguła zostanie spełniona i tag “UA events”(śledzący
zdarzenia) będzie mógł zostać uruchomiony. Dzięki czemu dane dotyczące zdarzenia
zostaną przekazane do Google Analytics.
Sprawdzamy wprowadzone zmiany przez narzędzie podglądu (Preview -‐ Debug), po czym
publikujemy zmiany. Jak widać wszystko działa.
Po opublikowaniu zmian wiemy, że GTM uruchamia tag Google Analytics. Teraz warto
jeszcze sprawdzić czy na pewno zdarzenia raportują się w GA. W tym celu dobrym
rozwiązaniem jest skorzystanie z raportów czasu rzeczywistego w interfejsie Analytics. W
momencie kliknięcia na link warto być zalogowanym także do naszego konta Analytics. W
raportach dotyczących czasu rzeczywistego (Real time).
62
Wszystko działa poprawnie. Zdarzenie na naszej stronie rejestruje się poprawnie w Google
Analytics. Jednak pewna rzecz może być jeszcze nie do końca jasna -‐ makra. Użyliśmy w
naszym przykładzie makra wbudowanego {{event}}. Makro o nazwie{{event}} jest typu
“custom event”. Jest to specjalny typ makra, który przybiera wartość (value) w momencie
wywołania go poprzez kod:
dataLayer.push({'event': 'value'});
Przekazujemy do Warstwy Danych, że zmienna „event” przybiera wartość “value”.
Dokładnie to wykorzystaliśmy chwilę wcześniej wywołując zdarzenie na naszej stronie
“przykladowy-‐link”. Makra jednak posiadają wiele typów, które możemy wykorzystywać.
Każdy typ makra będzie odpowiadał za przybieranie innych wartości.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 63
Makro może pobierać dane z Warstwy Danych, może pobierać z kodu i treści strony
(elementy DOM10), Cookies, z kodów Javascript, adresów URL i innych.
Możemy zatem wybrać inny rodzaj makra i z niego stworzyć kolejny warunek wywołania
się naszego tagu. Na przykład możemy stworzyć regułę bardziej skomplikowaną.
przykład:
Zarejestruj zdarzenie w Google Analytics wtedy, gdy zmienna “event” będzie miała
wartość ”przykladowy-‐link” oraz strona będzie rodzaju (page-‐type): test-‐site. Dane o rodzaju
strony chcemy pobrać z Warstwy Danych, które zostały dodane do niej podczas wczytywania
się strony.
Mówiliśmy wcześniej o dodawaniu do Warstwy Danych w momencie ładowania się strony,
tak by, tagi mogły od razu korzystać z przesłanych przez nas danych. Załóżmy, że nasza
strona ma określony rodzaj każdej podstrony. Są podstrony produktów, kategorii,
10 Elementy DOM to w kodzie strony elementy takie jak DIV, HTML, BODY, ID. Dzięki hierarchii i takie oznaczeniu elementów kodu strony, możemy się do nich odwoływać np. w języku javascript.
64
rejestracji itd. Takie informacje są przekazywane od do Warstwy Danych za pomocą tablicy
dataLayer. W naszym przykładzie kategoria strony będzie nazywać się ”test-‐site”, a tablica
może wyglądać tak:
Dodaliśmy zmienną “page-‐type” o wartości ‘test-‐site”. Dane są w Warstwie Danych w
momencie załadowania się kodu strony. Tak więc wystarczy stworzyć makro, które będzie
korzystać z danych Warstwy Danych.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 65
Czyli wybieramy Typ makra (macro type) jako „Zmienną Warstwy Danych” i podajemy jej
nazwę “page-‐type”. Makro “Kategoria strony” jest gotowe.
Teraz do naszego poprzedniego warunku o uruchomieniu tagu GA, który zarejestruje
zdarzenie w Google Analytics, dodajemy kolejny warunek dotyczący typu strony.
Wybieramy stworzone przez nas makro “Kategoria strony”11 równa się “test-‐site”.
Po zapisaniu i opublikowanie nowej wersji kontenera, zdarzenie w Google Analytics, po
kliknięciu na guzik “przykladowy-‐link” zarejestruje się tylko wtedy, gdy rodzaj strony
(page-‐type) będzie określona jako “test-‐site”. Jeśli będzie to inny rodzaj strony to zdarzenie
się nie zarejestruje, gdyż tag Google Analytics odpowiedzialny za rejestrację zdarzeń nie
zostanie wywołany.
11 Nazwa dla Makr może być dowolna. Ważne, żebyśmy wiedzieli do czego się odnosi. Ja wykorzystałem zmienną “page-type” w makrze “Kategoria strony”. Mógłbym je nazwać “Page-type” , ale w tym przypadku wybrałem inaczej. Makra mogą mieć dowolne nazwy, np., mogą się nazywać tak jak zmienne do których się odnoszą. Musimy pilnować porządku w nazewnictwie, gdyż później, w miarę wzrostu ilości reguł i makr możemy mieć problem z zarządzaniem nimi.
66
W ten sposób możemy tworzyć wiele kombinacji warunków działania różnych tagów,
korzystając z różnego rodzaju danych (Warstwa Danych, elementy DOM, URL i inne). Daje
to szerokie możliwości zarządzania wieloma tagami z wielu różnych systemów i aplikacji.
Więcej guzików (zdarzeń) do mierzenia na jednej stronie
Jeśli mielibyśmy więcej guzików do mierzenia na jednej stronie, to opisaną wyżej metodą,
musielibyśmy tworzyć oddzielne tagi do mierzenia każdego zdarzenia w Google Analytics.
Możemy jednak wykorzystać makra i wtedy wystarczy nam tylko jeden tag. Jak to będzie
wyglądać w praktyce?
Tworzymy tag Google Analytics, który będzie odpowiedzialny za rejestrację zdarzeń. To
będzie dokładnie taki sam tag jak tworzyliśmy w przykładzie powyżej. Jednak w momencie
wypełniania rubryk dotyczących parametrów zdarzenia użyjemy, zamiast konkretnych
danych dla jednego zdarzenia (tak jak zrobiliśmy to wcześniej), stworzonych makr.
Konfiguracja tagu Google Analytics będzie wyglądała mniej więcej tak:
Jak widzimy mamy zamiast oznaczeń dla jednego zdarzenia, wprowadzone makra dla
każdego parametru. Teraz tworzymy te makra, które będą miały takie same ustawienia.
Różnią się jedynie nazwami makra oraz zmiennej Warstwy Danych.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 67
Finalnie powinniśmy mieć takie makra jak:
1. {{Event Category}} >> zmienna event-‐category
2. {{Event Action}} >> zmienna event-‐action
3. {{Event Label}} >> zmienna event-‐label
4. {{Event Value}} >> zmienna event-‐value
Teraz dla każdego guzika czy przycisku, który chcemy mierzyć, jako zdarzenie w GA,
musimy dodać możliwość przekazywania wartości przez Warstwę Danych. Czyli nasz guzik
w kodzie strony powinien wyglądać tak:
<a href="http://jakas-‐strona.pl" onclick="dataLayer.push({'event':'przykladowy-‐link',
‘event-‐category’:’moja-‐kategoria,’event-‐action’:’nazwa akcji’,’event-‐label’:’nazwa-‐
etykiety’,’event-‐value’:’wartość zdarzenia’});">Sample link</a>
Co zrobiliśmy?
Dodaliśmy do guzika zmienne (te co w stworzonych makrach) i wartości dla danego guzika.
W ten sposób w momencie naciśnięcia na guzik, wartości są przekazywane do parametrów
zdarzenia w tagu GA odpowiedzialnym za rejestrację zdarzeń. Musimy zrobić taką
modyfikację kodu dla każdego guzika.
68
Mierzenie akcji na stronie za pomocą wirtualnych odsłon
W sytuacji kiedy analizujemy używanie guzików, linków czy innych funkcjonalności na
naszej stronie to wykorzystanie do tego zdarzeń w GA jest jak najbardziej uzasadnione.
Zdarzenia nie generują nam sztucznych odsłon naszej strony i nie ingerują w raportu
dotyczące ruchu.
Zdarza się jednak, że pewne elementy są na tyle integralną częścią serwisu, że mierzenie
ich jako zdarzenie nie byłoby do końca miarodajne. Weźmy na przykład ofertę w PDF, którą
pobierają użytkownicy strony i czytają. Być może jest to na tyle duża i ważna część strony,
że większość użytkowników odwiedza ją właśnie po to, aby pobrać PDF. W takim
momencie analiza głębokości odwiedzin (odsłony/odwiedziny), przy wykorzystaniu
zdarzeń, może być nie doskonała. W takim przypadku możemy wykorzystać tzw. wirtualne
odsłony. Jak to zrobić za pomocą Google Tag Managera?
1. Tagujemy link do pobrania PDF w kodzie naszej strony
2. Tworzymy tag Google Analytics odpowiedzialny za odsłony
3. Nadajemy nazwę wirtualnej odsłony, która ma odzwierciedlać pobranie PDF
4. Tworzymy regułę, która ma uruchomić tag w momencie kliknięcia na link PDF
Ad 1. Tagowanie linku PDF
Nasz link do pobrania PDF może wyglądać następująco:
<a href="http://jakas-‐strona.pl/ebook.pdf"
onclick="dataLayer.push({'event':'pdf'});">Pobierz PDF</a>
Copyright by Przemek Modrzewski, www.marketingLAB.pl 69
Ad 2. i Ad 3. Tworzenie tagu Google Analytics
Nasz nowy tag odpowiedzialny za wirtualne odsłony, będzie wyglądał jak na obrazku
poniżej. Ustawiamy typ śledzenia jako odsłony oraz w podstawowych ustawieniach
nadajemy “ręcznie” nazwę strony, która ma być rejestrowana jako wirtualna odsłona w
momencie pobrania PDF. W tym momencie w GA, jeśli odsłona będzie zarejestrowana, w
raporcie dotyczącym treści (Zachowanie >> Zawartość witryny) zarejestrujemy odsłonę
podstrony /ebook-‐download.
Ad 4. Tworzymy regułę
W celu uruchomienia tagu do mierzenia wirtualnych odsłon potrzebujemy jeszcze tylko
określić warunki kiedy dany tag ma być uruchamiany. Tworzymy zatem regułę przypisaną
do tagu.
70
Reguła, którą stworzyliśmy mówi: Jeśli zmienna “event” równa się pdf to uruchom tag do
śledzenia odsłon “UA -‐ virtual pageview (PDF)”. Pozostaje nam tylko sprawdzić czy
wszystko działa (Preview >> Debug) po czym stworzyć nową wersję i ją opublikować.
W momencie trybu Debug możemy zalogować się do naszego konta Google Analytics i
zobaczyć w raportach “Na żywo” czy GA rzeczywiście otrzymuje informację o odsłonie z
GTM.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 71
Kliknąłem na link do pobrania PDF i w tym samym momencie na moim koncie GA pojawiła
się zarejestrowana odsłona podstrony /ebook-‐download. Wszystko działa.
Sposobów pozyskania informacji o kliknięciu na konkretny link (np. do pobrania pdf) i
przekazania ich jako zdarzenie do GA jest więcej. Już niedługo się o nich dowiemy.
Podsumowanie
W tym rozdziale użyliśmy kilka razy makr w celu tworzenia zdarzeń w GA. Wszystko działa
bardzo ładnie, ale trochę dużo tutaj ingerencji w kod strony. Tyle samo co w przypadku
normalnego Google Analytics. A miało być tak pięknie, bez edytowania strony. Racja, z tym,
że musimy pamiętać, że edytujemy i oznaczamy raz, a możemy dalej robić co nam się
podoba w GTM. Teraz wiele różnych narzędzi może używać tych oznaczeń elementów
strony. Nie tylko Google Analytics. Oznaczenia są uniwersalne, zrozumiałe dla innych
programów, nie tylko dla jednego (np. GA). No ale fakt, faktem, że edytowania sporo. Tutaj
czeka nas miła niespodzianka, gdyż GTM pozwala na, w pełni automatyczną, pracę z
elementami strony, bez potrzeby ich oznaczania i edytowania kodu. Dzięki funkcji
automatycznych zdarzeń (auto events) możemy tworzyć reguły na podstawie samej
zawartości strony i uruchamiać na tej podstawie różne tagi śledzące w GTM.
Czy zatem ręczne tagowanie jest bez sensu? Nie. Bywają takie sytuacje, kiedy nie jesteśmy
w stanie używać automatycznych zdarzeń, na przykład kiedy kod strony i oznaczenia
elementów na to nie pozwalają. Stąd musimy znać ten sposób, mimo, że zaraz dowiemy się
o rozwiązaniu, które edytowanie stron eliminuje.
Jak to dokładnie działają automatyczne zdarzenia? Dowiemy się w następnym rozdziale.
72
Automatyczne zdarzenia w GTM (auto event tracking)
W poprzednim rozdziale poznaliśmy zasady działania makr oraz podstawowe metody
śledzenie zdarzeń za pomocą GTM. Nasze rozwiązania omówione dotychczas wymagają
jednak dość dużej ingerencji w kod strony. W wielu organizacjach każda nawet najmniejsza
modyfikacja wiąże się z długim czasem, uzyskiwaniem zgód i akceptacji itp. Często już w
fazie początkowej rezygnujemy z mierzenia pewnych mniejszych rzeczy na stronie, z
powodu właśnie trudności organizacyjnych.
Na szczęście istnieje GTM ze swoją funkcją automatycznych tagów (auto-‐tagowanie).
Auto-‐tagowanie to nic innego jak określanie zdarzeń na stronie bez potrzeby ingerencji w
kod strony. W tym przypadku określamy tylko warunki jakie muszą zostać spełnione, aby
GTM uznał akcję na stronie (kliknięcie na przykład) za zdarzenie. Tymi warunkami może
być np. rodzaj akcji (kliknięcie na guzik, link), ID sekcji kodu html, CSS, (tzw. DOM ID np. <a
href=”#" id=”link-‐do-‐czegos”></a>)12, adresy URL i wiele innych.
Aby wszystko działało określamy tylko rodzaj zdarzenia (kliknięcie dowolne, wypełnienie
formularza, czas, kliknięcie na link) i warunki (reguły) kiedy takie zdarzenie ma zostać
zaliczone. Nie musimy nikogo prosić o jakąkolwiek edycję kodu. Jedynie co, warto na
początku ustalić z osobami odpowiedzialnymi za kod strony kwestie oznaczania różnych
elementów, tak abyśmy mogli później łatwo edytować warunki do określania zdarzeń (o
tym za chwilę).
Auto-tagowanie w praktyce (wstęp)
Na czym polega ta ciekawa funkcja, gdzie nie musimy ingerować w stronę, aby rejestrować
zdarzenia na stronie? Polega na wykorzystaniu tak zwanych odbiorników (listeners), które
są w stanie odebrać informację ze strony, że nastąpiło klikniecie, wypełnienie formularza
12 W przypadku przytoczonym, identyfikatorem (ID) jest “link-do-czegos”.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 73
lub inne zdarzenie. Jak to działa?
Nowy rodzaj tagów (odbiorników) odbiera sygnały ze strony, jeśli nastąpi zdarzenie,
identyfikuje je i automatycznie dodaje je do Warstwy Danych. Takie zdarzenie jest wtedy
gotowe do wykorzystania przez zainstalowane w GTM tagi (np. tag Google Analytics).
Odbieranie sygnałów -‐ > rejestrowanie zdarzeń -‐> wykorzystanie w tagach i regułach
Aby najprościej zrozumieć działanie funkcji autotagowania zrobimy prosty przykład.
Automatyczne mierzenie kliknięcia na guzik (link)
Weźmy na tapetę przykładowy link z naszej testowej strony.
Chcemy mierzyć kliknięcia na ten link jako zdarzenie w Google Analytics. Tak więc musimy
wykonać kilka czynności:
1. Tworzymy tag odpowiedzialny za odbieranie sygnałów ze strony (listener)
2. Określamy regułę -‐ kiedy odbiornik ma być uruchamiany na stronie
3. Tworzymy tag Google Analytics, odpowiedzialny za rejestrację zdarzeń
74
4. Określamy regułę kiedy zdarzenie ma być zarejestrowane w GA
Ad 1. Tworzymy tag odpowiedzialny za odbieranie sygnałów ze strony (listener)
Aby zacząć korzystać z automatycznego śledzenia zdarzeń musimy przede wszystkim
stworzyć tag odpowiedzialny za “słuchanie” co się na stronie dzieje. Czyli Odbiornik
(listener). Tag Odbiornik tworzymy tak jak pozostałe tagi. Musimy tylko wybrać taki jego
rodzaj, który będzie najlepiej pasował do naszego zadania.
Do dyspozycji mamy, na tą chwilę, pięć rodzajów Odbiorników w GTM. Każdy odpowiada
za trochę inne rodzaje zdarzeń. Zanim zaczniemy tworzyć automatyczne zdarzenia,
przyjrzyjmy się ich rodzajom:
Click Listener (Odbiornik kliknięć)
Ten Odbiornik odpowiada za rejestrację wszelkiego rodzaju kliknięć na stronie (w guziki,
linki i inne klikalne elementy strony). W momencie kliknięcia na jakiś klikalny element,
automatycznie generowane jest zdarzenie, gtm.click, wewnątrz Google Tag Manager
Copyright by Przemek Modrzewski, www.marketingLAB.pl 75
Form Submit Listener (Odbiornik wypełnień formularza)
Ten Odbiornik odpowiada za rejestrację wypełnień formularza na stronie. W momencie
wypełnienia formularza wywołuje się automatyczne zdarzenie wewnątrz GTM,
gtm.formSubmit.
Link Click Listener (Odbiornik kliknięć na linki)
Odbiornik kliknięć odpowiada za rejestrację kliknięć na linki. Można go pomylić z
Odbiornikiem “Click Listener” bo działają dość podobnie. Odbiornik “Link Click Listener”
zaleca się używać w rejestracji kliknięć na linki, które prowadzą na inne podstrony w
serwisach, a Click Listener do wszystkich innych.
Timer Listener (Odbiornik upływu czasu)
Ten Odbiornik odpowiedzialny jest za mierzenia i odliczanie czasu na stronie w
milisekundach. W momencie uruchomienia zaczyna odliczać określony, przez nas, czas.
Odbiornik może być używany na wiele sposobów, np. wywoływanie zdarzenia na stronie,
które będzie mierzyć realny wskaźnik odrzuceń w Google Analytics. Powiemy o tym
przypadku jeszcze trochę później.
JavaScript Error Listener
Bardzo przydatny Odbiornik, który rejestruje błędy w wywoływaniu skryptów na naszej
stronie. Możemy, na przykład, rejestrować błędy jako zdarzenia w GA. Dzięki temu mamy
wgląd i kontrolę nad jakością działania naszej witryny.
Dla naszego przykładu, rejestracji kliknięcia na link (weźmy link: My link for auto event
tracking ) wybierzemy rodzaj Odbiornika jako po prostu Click Listener.
76
Ad 2. Określamy regułę -‐ kiedy odbiornik ma być uruchamiany na stronie
Skoro mamy już wybrany Odbiornik rejestrujący kliknięcia (Click Listener) możemy teraz
przejść do ustalania reguły, kiedy ma on być aktywowany. Tego typu tag rejestrujący może
spokojnie być włączony na wszystkich naszych stronach. Dzięki temu możemy bez trudu
rejestrować kliknięcia także na inne linki na witrynie. Tak więc reguła mówi nam: aktywuj
tag “Auto click listener” na wszystkich podstronach serwisu.
W tym miejscu zatrzymajmy się na chwilę. Możemy w tej chwili sprawdzić jak GTM
rejestruje kliknięcia na różne linki na naszej stronie. Dzięki temu, że zrozumiemy jak GTM
widzi nasze linki, łatwiej będzie nam później tworzyć makra i reguły.
Jeśli już zapiszemy tag oraz opublikujemy wersję (możemy to zrobić także w Podglądzie >>
Debug), przechodzimy na naszą stronę i klikamy na jakiś link. Następnie włączmy konsolę
Javascript w przeglądarce Chrome13 (Widok >> Programista >> Konsola Javascript) i w
zakładce Konsola wpisujemy “dataLayer”.
13 Można korzystać z innych konsoli i innych przeglądarek. Na przykład w Firefox mamy dostępną wtyczkę Firebug.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 77
Dzięki temu będziemy mogli zobaczyć obiekty obecnie załadowane do naszej Warstwy
Danych. W pierwszym obiekcie zawsze znajdują się dane załadowane z tablicy dataLayer
ponad kontenerem. Jeśli coś tam jest. W ostatnim obiekcie znajduje się ostatnie
zarejestrowane zdarzenia na stronie. W naszym przypadku jest to klikniecie na link, które
wywołało automatyczne zdarzenie gtm.click.
W widoku możemy zobaczyć jakie elementy zostały przez Odbiornik zarejestrowane i
przekazane do Warstwy Danych. Na przykład w “Element ID” pojawia się nam wartość
“example-‐link”, a w “elementURL” adres, do którego kieruje kliknięty link. Dzięki naszemu
Odbiornikowi kliknięć, będziemy mogli z tych danych korzystać przy określaniu innych
reguł.
Podejrzyjmy w tym momencie źródło testowej strony. To co zarejestrował Odbiornik to ID
linka, oraz faktyczny adres URL, gdzie kieruje link. W naszym przykładzie to “#”.
78
Wiedząc jak Odbiornik zbiera informacje i co tak naprawdę jest dla niego widoczne,
możemy lepiej zrozumieć jak tworzyć reguły i makra, które pozwolą rejestrować wybrane
akcje na stronie. Dzięki temu, że wiemy co zarejestrował Odbiornik, możemy
stworzyć warunki rejestracji zdarzenia, które będą zawierały więcej niż jedną zmienną.
Na przykład warunek tego typu: Rejestruj pobranie ebooka i dodaj go jako zdarzenie do GA
wtedy, gdy ID elementu <a> równa się ”ebook” oraz adres URL kończy się z “.pdf”. W ten
sposób możemy rozróżniać różne rodzaje kliknięć i zdarzeń w GA. Będziemy się jeszcze
tym zajmowali w dalszej części.
Ad 3. Tworzymy tag Google Analytics, odpowiedzialny za rejestrację zdarzeń
Skoro już mamy uruchomiony Odbiornik, który “słucha” to co się dzieje na naszej stronie w
kwestii kliknięć, możemy zabrać się za rejestrację naszego wybranego kliknięcia jako
zdarzenie w Google Analytics. To co musimy zrobić w tym punkcie to:
Copyright by Przemek Modrzewski, www.marketingLAB.pl 79
1. Stworzyć tag Google Analytics odpowiedzialny za przekazanie zdarzeń do GA.
2. Określić kiedy dany tag ma być uruchamiany
To co zrobiłem, to wypełniając parametry dotyczące zdarzenia w Google Analytics
wykorzystałem dwa makra {{element text}} oraz znany nam {{event}}. Zaraz do tej kwestii
wrócimy.
Aby tag nam zadziałał tworzymy dla niego regułę czyli warunek kiedy ma on zostać
uruchomiony. W tym przypadku stosujemy dwa elementy naszego warunku dla wyżej
stworzonego tagu.
Obowiązkowy to automatyczne zdarzenie rejestrujące kliknięcia :
{{event}} równa się gtm.click
To warunek, który musi być spełniony, żeby automatyczne zdarzenie zostało wzięte pod
uwagę. Jeśli tego nie dodamy za każdym razem kiedy korzystamy z Odbiornika Click
Listener, reguła po prostu nie zadziała. Korzystamy ze zdarzenia, które zostało
80
automatycznie dodane do Warstwy Danych w momencie kliknięcia. Stąd odwołujemy się
od automatyczne obiektu gtm.click, który to zdarzenie zarejestrował.
Drugi warunek jest już mojego autorstwa:
{{element url}} zawiera .html
Ten element warunku ma zapobiegać rejestracji kliknięć na linki, na przykład, dotyczące
dokumentów pdf. W tym elemencie dodaje warunek jeśli element jakim jest adres URL
zawiera .html to można aktywować tag.
Stąd w naszym przypadku dwa warunki muszą być spełnione, aby tag został uruchomiony.
Kliknięcie musi być zarejestrowane przez automatyczne zdarzenie oraz link musi
zawierać ciąg znaków “.html”.
Trzeba tylko przetestować i opublikować wersję kontenera.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 81
Wynik?
Dzięki naszemu obecnie stworzonej regule, wszystkie linki do stron będą rejestrowane jako
zdarzenie w Google Analytics. Sprawę załatwiliśmy za pomocą dwóch tagów.
Trochę więcej o makrach w automatycznych zdarzeniach Wróćmy na chwilę do momentu tworzenia tagu Google Analytics odpowiedzialnego za
rejestrację tagów. W momencie tworzenia parametrów dla zdarzeń wykorzystaliśmy dwa
makra {{element text}} oraz znany nam {{event}}. Tak jak już kilkakrotnie wspominałem,
makra są to zmienne, które pobierają wartości z Warstwy Danych. Dzięki temu
ułatwiają nam pracę i oszczędzają czas. Dzięki zastosowanym makrom, jeśli zajrzymy do
konta GA, po naciśnięciu jakiegoś linka, który odpowiada regule, zobaczymy poniższe
oznaczenia.
Oznaczenia te to wartości podstawione pod nasze zmienne {{element text}} oraz {{event}}.
82
Makro {{event}} przybrało zmienną gtm.click bo takie zdarzenie się wydarzyło podczas
kliknięcia. Odbiornik kliknięć (click listener) zarejestrował automatycznie zdarzenie
kliknięcie (event), które przez Odbiornik GTM jest oznaczane, automatycznie, jako
gtm.click.
Drugie makro {{element text}}. Bardzo ciekawe i przydatne makro, które automatycznie
odczytuje tekst zawarty w obrębie elementu. De facto odczytuje po prostu „anchor text”,
czyli teksty widoczny na stronie, po którym znajduje się odnośnik (link).
Dzięki temu, że wstawiłem te dwa makra w szablon zdarzenia, na rysunku powyżej
pojawiło się zdarzenie oraz dokładne treści linków (anchor teksty) jako etykieta. Prawda,
że fajne ? ;)
Istnieje więcej możliwości odczytów treści ze strony za pomocą makr. Ważne, że makra
możemy stosować, niemal, w każdym miejscu GTM. Warto wcześniej zawsze zerknąć do
konsoli dla programistów w jaki sposób kliknięcie jest rejestrowane przez Odbiorniki w
GTM. Wtedy będziemy wiedzieć jakie wartości możemy łatwo wyciągnąć z treści strony, a
jakie będą wymagały od nas, na przykład, tagowania ręcznego.
Poniżej widać, że po kliknięcia na link, Odbiornik odczytał tylko adres URL, do którego
odsyła link (gtm.element.url). Jest jeszcze określony element “a”. Wiemy zatem, że to link.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 83
Obiekt “a” w języku html odpowiada za linki np. <a href=”www.link.html”>Link</a>.
Tutaj warto wspomnieć, że dokładnie i w sposób staranny napisany kod strony, będzie nas
super ułatwieniem. Jeśli programista nie nadaje np. identyfikatorów (ID) dla obiektów na
stronie, klasy są napisane w sposób nie uporządkowany (class), będzie na pewno nam
trudniej w określaniu reguł dla zdarzeń.
Częściej będziemy musieli korzystać z niestandardowych skryptów javascript, które będą
pomagały nam w „wyciąganiu” danych z kodu strony.
Dostępne makra i ich możliwości
Co to są makra powiedzieliśmy już na samym początku tego ebooka, makra to pary
zmienna – wartość. Wartości, dla zmiennych, pobierane są z Warstwy Danych kiedy reguły
na to pozwalają.
Makro jak wiemy, w GTM, wygląda zawsze tak:
{{nazwa_makra}}
Wykorzystywaliśmy makra już kilka razy. Na samym początku stworzyliśmy makro, gdzie
wartością był numer ID naszego konta Analytics. Później korzystaliśmy z wbudowanego
makra {{event}} odpowiedzialnego za przekazywanie zdarzeń do Warstwy Danych.
Dopiero co skorzystaliśmy z makra {{element text}}, które rejestruje tekst w obrębie
elementu strony np. linku. Teraz czas na przedstawienie innych makr i ich zastosowania.
84
W momencie tworzenia nowego makra pojawi się nam lista dostępnych rodzajów makr.
Część z nich już wykorzystywaliśmy, a część jeszcze nie. Są takie, które będą przydatne w
bardzo rzadkich przypadkach (Random number) i takie, które będzie używać prawie
zawsze (Auto-‐event variable). Jak widać poniżej, część makr jest “wbudowana” w GTM,
mamy je gotowe od razu w momencie tworzenia konta. Większość tyczy się Odbiorników
(event listeners) czyli automatycznych zdarzeń, które wstępnie omówiliśmy w przykładach
wcześniej. Tutaj jeszcze raz napomknę, że będzie nam dużo łatwiej pracować z GTM jeśli
kod naszej strony będzie napisany starannie. Idealnie by było, żeby najważniejsze elementy
miały swoje ID. Oczywiście to nie przeszkoda, nie do przebycia, ale będzie łatwiej,
zwłaszcza osobom nie pracującym z javascriptem.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 85
Zacznijmy więc od szybkiego omówienia poszczególnych rodzajów makr, które możemy
tworzyć.
Auto-Event Variable (zmienna zdarzenia automatycznego)
Jest kilka typów makr tego rodzaju. Ponieważ nowe typy pojawiają się dość często i są
dodawane do listy, przedstawię tylko te najbardziej popularne i najczęściej używane.
Element classes: Zwraca klasę atrybutu elementu, który został kliknięty.
Przykład: Mamy w kodzie strony element <div class=”MainMenu”>menu strony</div>, ten
typ makra zwróci nam wartość ”MainMenu”
Element ID: Zwraca ID atrybutu elementu, który został kliknięty.
86
Przykład: <a href="#" id="example-‐link">My link for auto event tracking</a>, makro tego
typu zwróci nam wartość ”example-‐link”.
Element target: Zawraca atrybut elementu “target”, który został kliknięty.
Przykład: <a href=”http://www.jakas-‐strona.pl” home” target=”blank”/>, makro zwróci
nam wartość ”blank”
Element text: Ten typ makra wykorzystywaliśmy już wcześniej w przykładzie. Makro
zwraca tekst w klikniętym elemencie.
Przykład: <a href=”http://www.jakas-‐strona.pl” home” target=”blank”/>Link do jakas-‐
strona</a>. Makro zwróci nam wartość ”Link do jakas-‐strona”.
Element URL: Ten typ makra zwraca nam wartość klikniętego elementu atrybutu <a href>
(adres url linku) albo wartość atrybutu “action” w formularzach
Przykład linku: <a href=”http://www.jakas-‐strona.pl” home” target=”blank”/>Link do
jakas-‐strona</a>. Makro zwróci nam wartość “http://www.jakas-‐strona.pl”.
Przykład dla formularz: <form action=”/dziekujemy.html” id=”formularz”>. Makro zwróci
wartość “/dziekujemy.html”.
Makro Constant String (Ciąg stały) Makro przechowuje stałą wartość, którą możemy później wykorzystywać w innych
działaniach w GTM. Makro wykorzystaliśmy już wcześniej do przechowywania ID konta
Analytics. Nie musimy dzięki temu pamiętać numerów identyfikacyjnych używanych przez
nas kont Analytics, ale też innych np. ID konwersji.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 87
Makro -‐ Custom Events (Zdarzenia niestandardowe)
Jedno z najpopularniejszych makr, od razu utworzone na koncie GTM. Makro zwraca jego
wartość w momencie załadowania do Warstwy Danych.
dataLayer.push({“event”:”wartosc_eventu”})
Wykorzystujemy to makro najczęściej w ustawieniach konkretnych tagów. Jeśli chcemy
uruchomić tag w momencie jakiejś akcji na stronie (np. kliknięcia), a dane kliknięcie było
przez nas otagowane metodą push, wystarczy dodać jako regułę w tagu {{event}} równa się
“wartosc_eventu”. W momencie kliknięcia, wartość zostaje przekazana do Warstwy Danych
i uruchamia się odpowiedni tag.
Wykorzystywaliśmy ten tag już w rozdziale dotyczącym podstawowego śledzenia zdarzeń
w Google Analytics.
Makro “Custom Events” także przybiera wartość “gtm.click” , „gtm.linkClick” lub inną,
związaną z automatycznymi zdarzeniami. Stąd jak pamiętamy z rozdziału o tworzeniu
automatycznych zdarzeń, aby wywołać automatyczne zdarzenie zawsze musimy dodać
regułę uruchamiania tagu warunek {{event}} równa się ”gtm.click”14
DataLayer Variable (Zmienna Warstwy Danych)
Podobnie jak w przypadku makra “Custom Events”. Zmienna zostanie przekazana w
momencie wywołania kodu:
dataLayer.push({'Zmienna_warstwy_danych': 'wartosc'})
Tak samo, można skorzystać ze zmiennej jeśli istnieje ona w tablicy ponad kontenerem.
14 Lub inne wartości dla automatycznych zdarzeń np. gtm.formSubmit, gtm.linkClick.
88
Dobrym przykładem wykorzystania tego makra jest rozpoznawanie kliknięć na obrazki na
naszej stronie. Przykład krok po kroku znajduje się w dalszej części ebooka.
DOM elements (elementy DOM )
Makro odpowiada za pobieranie wartości związane z atrybutem ID danego elementu ze
strony. Możemy na przykład zdecydować, że chcemy rejestrować tylko zdarzenie jeśli
ktoś kliknie na konkretny guzik o ID “wazny-‐guzik”, możemy to wykonać za pomocą makra
element DOM, nadając regułę: Uruchom wybrany tag jeśli element DOM równa się “sample-‐
link-‐id”.
<a href="http://www.jakas-‐strona.pl" id="sample-‐link-‐id">Sample link</a>
Możemy także wykorzystać makro w każdym innym miejscu GTM. NA przykład w
określaniu zdarzenia w Google Analytics.
Mamy link “Sample link”, który chcemy mierzyć kliknięcie na niego w GA jako zdarzenie.
Link, w kodzie wygląda tak:
Mamy obecnie ID elementu <a></a> jako “sample-‐link-‐id” oraz atrybut “alt”, który ma
wartość ”this is alt”. Co możemy z tym zrobić?
Weźmy nasz wcześniejszy przykład z wykorzystaniem makr w określaniu parametrów
zdarzenia Analytics.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 89
Zmodyfikowałem parametr etykieta (Label) i użyłem w nim dwóch stworzonych
podobnych makr. Jedno makro nazywa się {{DOM element}} a drugie {{DOM element
attribute}}. Cały parametr wygląda tak:
{{DOM element}} -‐ {{DOM element attribute}}
Same makra wyglądają podobnie. Makro {{DOM element}} wygląda tak:
90
Wprowadziłem ID elementu <a>. Drugie makro wygląda bardzo podobnie, ale ma
dodatkowe zmienne. Dodajemy atrybut elementu <a>.
Mamy więc dwa makra, które różnią się tylko dodaniem atrybutu. Zakładam, że wszystko
inne w tagu GA, który ma śledzić kliknięcie jako zdarzenie jest ustawione prawidłowo. Po
opublikowaniu jeśli ktoś kliknie na link, w Google Analytics powinniśmy
zarejestrować następujące dane:
Copyright by Przemek Modrzewski, www.marketingLAB.pl 91
Czyli makro {{DOM element}} rejestruje wartość tekstową elementu od ID=”sample-‐link-‐
id”, a drugie makro {{DOM element attribute}}, które ma dodatkowo zdefiniowane
dodatkową zmienną elementu (atrybut alt) przyjmuje wartość alt=”this is alt”
HTTP referrer (strona odsyłająca HTTP)
To makro pobiera dane dotyczące strony odsyłającej do strony, gdzie nastąpiło kliknięcie.
Jeśli na przykład nasza strona to www.jakas-‐strona.pl/gtm.html i ktoś na nią wszedł ze
strony głównej serwisu www.jakas-‐strona.pl/read-‐this.pl to jeśli pobierzemy referrer w
momencie kliknięcia na stronie gtm.html to wartość tego makra będzie równa “www.jakas-‐
strona.pl/read-‐this.html”.
Wykorzystać można to makro na przykład to warunkowania uruchamiania odpowiednich
tagów z zależności od strony odsyłającej.
Javascript Variable (Niestandardowy kod JavaScript)
Jeśli nie jesteśmy w stanie pobrać danych przy pomocy dostępnych makr i Odbiorników
kliknięć, możemy wspomóc się bezpośrednio napisanym przez nas skryptem.
92
Nasz skrypt pobierze wartość atrybutu “class” dla elementu o identyfikatorze ID=”product”.
Oczywiście korzystanie z tego rodzaju makra musimy zostawić osobom znającym choć na
podstawowym poziomie język JavaScript. Jest to przykład, gdyż obecnie mam także
dostępne makro, które także jest w stanie zidentyfikować klasę elementu (class).
Random Number (Losowa Liczba)
Makro “Losowa Liczba” za każdym razem kiedy jest wywołane przybiera losową liczbę od 0
do 2147483647. Jak możemy wykorzystać to makro?
Ciekawym przykładem to wywoływanie tagu dla jakiegoś procenta odwiedzających naszą
witrynę. Takim tagiem może być choćby tag uruchamiający skrypty do testowania treści
strony. Może służyć do uruchamiania skryptów z ankietami do pewnego odsetka
odwiedzjących stronę.
Wystarczy w regule wywołania tagu wyznaczyć warunek: jeśli makro {{Random Number}}
Copyright by Przemek Modrzewski, www.marketingLAB.pl 93
kończy się cyfrą 9, wywołaj tag. Będzie to odpowiadało 10% odwiedzin strony15.
Makro URL
To makro pozwala pobrać cały adres URL danej strony. Pozwala także na pobranie
fragmentów adresu takich jak: Nazwa hosta, zapytanie czy dowolny fragment.
Dokładniej wytłumaczone do czego może służyć każdy typ komponentu makra URL.
● URL: Zwraca cały adres URL
● Protocol: Zwraca protokół adresu URL (http lub https)
● Host Name: Zwraca nazwę hosta (np. marketinglab.pl, google.com, itd.)
● Port: Zwraca numer portu nazwy hosta. Porty służą do komunikacji komputera z
internetem. Różne porty odpowiadają za różne rodzaje połączeń. Połączenia dla stron będą
korzystały z portów: 80 lub 443 w zależności czy to http czy https.
● Path: Ścieżka adresu URL bez nazwy hosta, np. jeśli mamy adres www.jakas-‐
strona.pl/example.html, otrzymamy zwrot: example.html.
● Query: Zwraca wartość wybranego zapytania w adresie URL.
● Na przykład w adresie URL: www.jakas-‐strona.pl/example.html?utm_source=mail,
15 http://dan-russell.com/2013/03/sampling-a-percentage-of-your-users-with-google-tag-manager/
94
możemy pobrać wartość zapytania “utm_source” i wykorzystać to w warunku do
uruchomienia jakiegoś tagu lub możemy wykorzystać przy okazji tworzenia innych
wartości takich jak choćby nazwy parametrów zdarzeń w Google Analytics.
● Fragment: Zwraca ciąg znaków z adresu URL bez poprzedzającego #.
Lookup Table (tabela przeglądowa)
Jedno z bardziej użytecznych makr jeśli mamy zbudować warunek wartości zmiennej
zależnej od wartości innej zmiennej. Tabela przeglądowa pozwala stworzyć makro, w
którym wartość będzie zależna od wartości innego makra.
Chyba najciekawszym przykładem jest sytuacja, kiedy testujemy zmiany w obrębie GTM.
Testujemy zdarzenia czy działają w Google Analytics, generujemy sporo kliknięć, wizyt itd.
w trybie Podglądu (Debug mode). Dzięki Tabeli przeglądowej możemy stworzyć warunek,
który w zależności od tego w jakim trybie jesteśmy -‐ na żywo czy w trybie podglądu strony,
będzie podmieniał nam numery ID kont Analytics. W ten sposób możemy w trybie
Podglądu (Debug) testować zdarzenia w GA na innym koncie (do testów), nie zaśmiecając
sobie naszego prawdziwego konta sztucznymi zdarzeniami.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 95
W tym celu wykorzystamy kombinację makra Debug oraz Lookup Table.
Tworzymy makro o rodzaju Debug, które automatycznie przybiera wartość True jeśli
jesteśmy w trybie Debug (Podglądu) albo False, jeśli w nie jesteśmy. Kiedy ktoś klika w
stronę w trybie “na żywo”.
Następnie tworzymy makro Lookup Table (u mnie nazwałem je SafeMode), i podajemy
warunek: Jeśli jesteś w trybie Debug (true) wykorzystaj wartość makra {{UA -‐ Rewolucja -‐
test account}}, a jeśli nie jesteś w trybie Podglądu (Debug) wykorzystaj wartości z makra
{{UA -‐ Rewolucja -‐ live}}.
Oczywiście makra {{UA -‐ Rewolucja -‐ live}} i {{UA -‐ Rewolucja -‐ test account}} stworzyłem
wcześniej. Oba są typu Stałego ciągu (Constant String) i mają wartości dwóch numerów
kont. Konta do testów i konta prawdziwego.
Teraz tylko pozostaje nam użyć makra {{SafeMode}} we wszystkich miejscach gdzie
wykorzystujemy ID naszych kont Analytics. Chodzi oczywiście o tagi.
96
Mierzenie linków wychodzących jako zdarzeń automatycznych w GA
W przypadku generowania i kupowania ruchu na stronę internetową często ważnym
aspektem mierzenia jego efektywności jest także wiedza dotycząca ewentualnych “ucieczek”
odwiedzających z danej witryny. W tym celu w Google Analytics często tworzy się
zdarzenia, które rejestrują ruch wychodzący ze strony. W tym celu, do tej pory, trzeb było
oznaczać (tagować) wszelkie linki w witrynie prowadzące na “zewnątrz” strony. Google
Tag Manager jest nam w stanie pomóc śledzić ruch wychodzący w sposób automatyczny.
Aby tego dokonać musimy wykonać następujące kroki:
1. Dodać tag, który automatycznie zarejestruje kliknięcia na linki na stronie
2. Dodać tag Google Analytics, który będzie odpowiedzialny za rejestrację i przekazanie
kliknięć jako zdarzeń do GA.
3. Stworzyć regułę, które będzie rejestrowało tylko kliknięcia na wychodzące linki
Ad 1. Dodać tag, który automatycznie zarejestruje kliknięcia na linki na stronie
Tworzymy tag typu Odbiornik Kliknięć. Z regułą dla wszystkich stron.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 97
Ad 2. Tworzymy tag Google Analytics odpowiedzialny za rejestrację zdarzeń.
W momencie wyboru parametrów, możemy skorzystać z makr, które przekażą
automatycznie do GA informacje o tym jaki jest pełen adres URL strony zewnętrznej oraz
możemy także pobrać “anchor text”16 linka do PDF.
Ad 3. Tworzymy regułę dla makra
16 Anchor text - widoczny, klikalny tekst linka
98
Jako warunek podajemy dwa warunki. Jak zawsze w przypadku Odbiorników
automatycznych, warunek {{event}} równa się gtm.click oraz warunek, który wyklucza
kliknięcia na linki kierujące na treści w obrębie naszej witryny. W tym przypadku będzie to
{{element url}} nie zawiera “nazwa_naszej_domeny”. Makro {{element url}} zwraca
wartość, która jest pełnym adresem url linku, który został kliknięty.
Mierzenie pobrań dokumentów (np. PDF) jako zdarzeń automatycznych w GA
W tym przypadku, chcemy rejestrować, jako zdarzenia w Google Analytics, pobrania plików
PDF. To, co musimy zrobić:
1. Dodać tag (lub jeśli jest już to skorzystamy z istniejącego) , który automatycznie
zarejestruje kliknięcia na linki na stronie, Odbiornik kliknięć.
2. Dodać tag Google Analytics, który będzie odpowiedzialny za rejestrację i
przekazanie pobrań plików PDF jako zdarzeń do GA.
3. Stworzyć regułę, które będzie rejestrowało tylko kliknięcia (pobrania) plików PDF
Ad 2. Dodajemy tag Google Analytics odpowiedzialny za rejestrację pobrania pliku
PDF jako zdarzenia.
Pominęliśmy punk 1, dlatego, że mamy już na koncie stworzony tag typu Odbiornik kliknięć.
Jeśli nie mamy, możemy skorzystać z przykładu wcześniejszego, gdzie jest to dokładnie
opisane.
A więc, tworzymy tag GA odpowiedzialny za rejestrację zdarzeń (typ: zdarzenia) z
parametrami, które będą przekazane do Google Analytics jako zdarzenie. Jednym z
parametrów jest parametr „Action”. W tym parametrze wykorzystujemy makro {{element
text}}, które przekaże jako jego wartość “anchor text” pobranego PDF’a. „Anchor text” to w
tym przypadku będzie podlinkowana nazwa pliku PDF. Bardzo często tak jest, wiec stąd
Copyright by Przemek Modrzewski, www.marketingLAB.pl 99
mój pomysł na takie rozwiązanie. Jeśli PDF’y na stronie są oznaczone jako linki do pobrania
z anchor-‐tekstami, typu “Pobierz teraz” to odradzam korzystania z tego makra, bo nie
dowiemy się później za wiele z parametru zdarzenia GA – Action.
Ad 3. Reguła dla tagu do rejestracji pobrania PDF
Ważna jest reguła, która ma aktywować ten tag. W tej regule zawarliśmy dwa warunki: Jak
zawsze w przypadku rejestracji automatycznej kliknięć {{event}} równa się gtm.click i
drugi warunek dotyczący rodzaju rejestrowanego, jako zdarzenie, pliku. W tym przypadku
używałem prostej reguły {{element url}} czyli adres url, zawiera ciąg znaków “pdf”. Czasem
tego typu warunki będą wymagały więcej zachodu, jeśli pliki mają różne rozszerzenia, albo
bywają różnice w nazwach np. plik PDF może być spakowany. Wtedy zapewne z pomocą
przyjdą nam wyrażenia regularne (regex).
100
W momencie używania Odbiorników (click listeners) zawsze musimy pamiętać o dodaniu
w regule warunku {{event}} równa się gtm.click (lub inny jeśli używamy akurat innego
odbiornika np. gtm.linkclick).
Trzeba pamiętać, też aby wykluczyć rejestrację PDF’ów z innych reguł, które
zbierają kliknięcia na wszystkie inne linki. Można dodać regułę wykluczającą {{element
url}} zawiera pdf. Funkcja do wykluczania znajduje się pod opcją do określania reguł.
UWAGA! Jeśli nie czytaliśmy całego ebooka, tylko wyrywkowo, to trzeba pamiętać, że
wykorzystując GTM do rejestracji zdarzeń zawsze musimy pamiętać o tym, aby oprócz tagu
GA, który rejestruje zdarzenia(events), zawsze był obecny tag GA odpowiedzialny za
rejestrację wyświetleń (pageviews).
Copyright by Przemek Modrzewski, www.marketingLAB.pl 101
Mierzenie kliknięć na obrazki jako zdarzenia na stronie w GA
Być może ciekawi nas jak często ktoś klika na elementy graficzne (np. obrazki), które w cale
nie muszą być linkami. Może chcemy sprawdzić czy jakaś grafika zasługuje na link, albo
podejrzewamy, że użytkownicy strony mogą się mylić i myśleć, że jakiś obrazek jest
klikalny i to ich rozprasza od ścieżki zakupowej albo powoduje dezorientację. Weźmy
prosty przykład: Mamy obrazek na stronie, którego kod wygląda tak:
Chcemy rejestrować zdarzenie w Google Analytics, jako kliknięcie na ten obrazek. Chcemy
rozróżnić kliknięcia na formy graficzne od zwykły linków tekstowych. Co musimy zrobić?
1. Tworzymy makro, które pozwoli nam „wyłuskać” informacje o nazwie elementu
kodu źródłowego, w tym przypadku chcemy wyciągnąć oznaczenie obrazków <img>.
2. W tagu Google Analytics, odpowiedzialnym za rejestrację zdarzeń, w parametrach
zdarzenia wstawiamy kombinację makr, które nam automatycznie przekażą do GA
zdarzenia z odpowiednimi oznaczeniami.
102
Ad 1. Tworzymy makro, które pozwoli nam pobrać informacje o nazwie elementu
kodu źródłowego strony, który został kliknięty.
Wykorzystaliśmy w tym celu typ makra “Zmienna Warstwy Danych”, a nazwa zmiennej
pobranej z Warstwy Danych to nazwa Odbiornika elementów na stronie (gtm.element).
Ponieważ w GTM działa drzewiasty układ elementów DOM, możemy dodać po kropce o jaki
element nam chodzi i zapytać o jego nazwę (tagName). Czyli w obrębie rozpoznanego,
przez GTM, elementu kodu strony(np. <a>, <div>, itp.), narzędzie poszukuje nazwy danego
tagu. De facto, będzie to jego rodzaj. Jeśli zapytamy o rodzaj elementu (tagName) dla linku:
<a href=”jakas_strona.pl” id=”link1”>Link do jakas_strona</a> to otrzymamy wartość „a”.
Stąd możemy wykorzystać komendę tagName do pozyskiwania rodzajów elementów, które
kliknął użytkownik17. Jeśli ktoś kliknie na obrazek to my otrzymamy wartość <img> i o to
nam chodzi.
17 tagName to nic innego jak komenda Javascript. Więcej o tagName można przeczytać tutaj: http://www.w3schools.com/jsref/prop_element_tagname.asp
Copyright by Przemek Modrzewski, www.marketingLAB.pl 103
UWAGA!Pamiętajmy o wersjach Warstwy Danych. Wersja 2 pozwala rozpoznać, że kropka
w tym ciągu znaków jest bramą do zagnieżdżonych informacji a nie po prostu zwykłym
znakiem.
Ad 2. W tagu Google Analytics odpowiedzialnym za rejestrację zdarzeń, w
parametrach zdarzenia wstawiamy kombinację makr
W tagu Google Analytics odpowiedzialnym za rejestrację zdarzeń, w parametrach
zdarzenia wstawiamy kombinację makr {{event}} i {{tagName}}.
Po przetestowaniu w Google Analytics powinien zostać zarejestrowane następujące
zdarzenie.
104
gtm.click jako {{event}} oraz IMG jako {{tagName}}. W ten sposób wiemy, że dane
kliknięcie odbyło się w obrazek. Ważne, żeby w regule aktywowanie tagu zbierającego
zdarzenia nie dodawać, żadnych warunków dodatkowych oprócz {{event}} równa się
gtm.click. Nie chcemy blokować rozpoznawania żadnego kliknięcia.
Cross-domain tracking za pomocą GTM (UA)
Zdarza się bardzo często, że to co chcemy mierzyć przy pomocy Google Analytics, nie jest
tylko jedną domeną, ale nasze internetowe działania odbywają się w obrębie kilku domen
lub subdomen. Jeśli mamy na przykład dwie domeny (domena1.pl oraz domena2.pl) to w
standardowej konfiguracji GA, jeśli użytkownik przechodząc z domeny 1 na domenę 2
będzie, w GA dla domeny 2, traktowany jako użytkownik pochodzący z ze źródła
domena1.pl / referral (odesłanie). Jeśli chcemy znać całą ścieżkę takiego użytkownika dla
obu domen (np. z jakiego faktycznie źródła pochodzi) i traktujemy obie domeny jako
jedną całość, to musimy w Google Analytics skonfigurować śledzenie pomiędzy domenami
(cross-‐domain tracking). Podobna sytuacja, nieco prostsza, tyczy się śledzenia ruchu
pomiędzy subdomenami, a domenami (np. subdomena.domena1.pl ). W jakie sposób
możemy skonfigurować śledzenie tego typu przy pomocy GTM?
W przypadku kiedy korzystamy z Universal Analytics możemy skorzystać z opcji
Copyright by Przemek Modrzewski, www.marketingLAB.pl 105
automatycznego śledzenia ruchu pomiędzy domenami. Jest to bardzo proste. Jeśli
korzystamy z jednego kontenera dla obu domen:
1. Tworzymy (edytujemy) tag UA odpowiedzialny za śledzenie odsłon.
2. Wybieramy wartość ”true” dla opcji ‘Allow Linker” oraz dodajemy nazwy domen,
które chcemy wspólnie śledzić. robimy to po przecinku.
3. Pozostawiamy regułę – „Aktywuj na wszystkich stronach”
To właściwie wszystko. W tym momencie GTM będzie dzielił się ustawieniami ciastek dla
obu domen. zobaczymy to w linku po kliknięciu i przejściu na drugą domenę. Ważne, żeby
spojrzeć na drugi element ciągu znaków po kropce od prawej.
106
Ten numer to unikalny identyfikator użytkownika (tak na prawdę przeglądarki), on nie
powinien się zmieniać podczas przechodzenia pomiędzy domenami.
Jeśli używamy różnych kontenerów dla każdej domeny, musimy pamiętać aby w każdym
kontenerze był zainstalowany tag UA z tym samym numerem oraz ustawieniami.
Na koniec wchodzimy do naszego konta Google Analytics i w ustawieniach profilu
dodajemy ignorowane adresy odesłań. W innym przypadku referrale pomiędzy domenami
źródła ruchu będą się nadpisywać (jako odesłania z połączonych domen)
Copyright by Przemek Modrzewski, www.marketingLAB.pl 107
Instalacja dynamicznego remarketingu za pomocą GTM Coraz częściej możemy spotkać się z wykorzystaniem narzędzia w akcjach
marketingowych jakim jest dynamiczny remarketing. Narzędzie działa bardzo efektywnie i
jest właściwie nieocenionym elementem działań marketingowych, który wykorzystują
sklepy oraz reklamodawcy z bardzo dużym asortymentem.
Nie będziemy tutaj jednak tłumaczyć zasad działania samego dynamicznego remarketingu.
W tym celu odsyłam do Pomocy AdWords. W tym miejscu powiemy, za to, w jaki sposób
zaimplementować dynamiczny remarketing, poprzez GTM.
Co nam będzie potrzebne?
Jak wiemy, aby dynamiczny remarketing mógł działać, potrzebne nam są dodatkowe
parametry dodane do standardowego kodu remarketingowego.
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 'ZASTĄP_WARTOŚCIĄ',
ecomm_pagetype: 'ZASTĄP_WARTOŚCIĄ',
ecomm_totalvalue: 'ZASTĄP_WARTOŚCIĄ'
};
</script> <script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_conversion_label = "YYYYYYYYYY";
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
108
<img height="1" width="1" style="border-‐style:none;" alt=""
src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&label=YY
YYYYYYYY&guid=ON&script=0"/>
</div>
</noscript>
To co widać powyżej to standardowy kod remarketingowy z dodatkowymi parametrami
(na czerwono), dzięki którym, system jest w stanie serwować odpowiednie produkty
odpowiednim osobom. Dzięki parametrom możemy także tworzyć warunki i reguły
dotyczące list remarketingowych i serwowania reklam.
W tradycyjny sposób, musimy dodać do każdej podstrony z produktami kod z
dodatkowymi parametrami. Oczywiście nikt tego nie robi ręcznie, tylko zatrudnia
programistę, który pobiera dane z treści strony, cmsa, bazy danych czy CRM i wstawia w
standardowy kod wartości. My zrobimy podobnie, ale inaczej ;). To będzie pierwsze
rozwiązanie. W drugim sposobie, spróbujemy obyć się bez interwencji programistycznej.
Spróbujemy wykorzystać odpowiednie zmienne i makra i poszukamy wartości w treści
naszej strony. Zacznijmy od standardowego sposobu.
Metoda pierwsza - standardowa
Chcą wykorzystać dynamiczny remarketing przy użyciu GTM musimy:
1. Stworzyć tag remarketingowy.
2. Stworzyć reguły, które określą na jakich stronach ma się danych tag uruchamiać.
3. Wybrać zmienne i przekazać wartości dotyczące produktów do Warstwy Danych,
4. Stworzyć makro, które będzie “łącznikiem” pomiędzy danymi z Warstwy Danych, a
tagiem remarketingowym,
5. Przetestować i opublikować wersję kontenera.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 109
Ad 1. Tworzymy tag remarketingowy
Tag tworzymy tak samo jak w przypadku zwykłego tagu remarketingowego. Podajemy
numer ID tagu remarketingowego, który pobieramy z konta AdWords (robiliśmy to, przy
okazji tworzenia zwykłego tagu remarketingowego, na początku tego ebooka) i
dochodzimy do miejsca, gdzie pojawia się opcja dodania niestandardowych parametrów.
To tutaj możemy dodać nasze parametry dla dynamicznego remarketingu. Możemy to
zrobić na dwa sposoby: wykorzystując Warstwę Danych (i tak teraz zrobimy) lub możemy
zdefiniować każdy parametr jako makro i to jest drugi sposób, który omówimy za chwilę.
Ad 2. Tworzenie reguły dla tagu remarketingowego
Tag remarketingowy powinien wywoływać się stronach, które świadczą o pewnego
rodzaju intencjach użytkownika odwiedzającego nasz serwis. I tak, dobrym pomysłem jest
przypomnienie się, z produktem, użytkownikowi, który oglądał produkt, ale go nie kupił. W
110
takim razie warto jest dodać do listy remarketingowej osoby, które odwiedzały podstrony
serwisu z konkretnymi produktami. Dynamiczny remarketing zrobi za nas resztę i
automatycznie będzie pokazywał użytkownikowi takie produkty, które już u nas przeglądał.
Rekomendowane jest oznaczenie każdego rodzaju strony, im więcej danych tym lepiej do
rozróżnienia użytkownika i skonstruowania dla niego odpowiedniego przekazu
remarketingowego. Do dyspozycji mamy takie kategorie strony, które warto oznaczyć:
My zajmiemy się teraz kategorią stron produktowych. Aby nasz tag uruchamiał się tylko na
stronach produktowych musimy znaleźć jakaś wspólną cechę takich stron. Może to być
fragment kodu, ID elementu DOM czy cześć adresu URL.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 111
Weźmy przykład sklepu http://www.charlotteas.com/ z biżuterią. Wspólną cechą każdej
strony z konkretnym produktem jest fragment “products” w adresie URL.
W związku z tym utworzymy regułę:
Uruchom tag remarketingowy, wtedy gdy {{url}} zawiera ciąg znaków: products.
112
Jeśli oczywiście wartości parametrów będą dodawane dynamicznie (np. rodzaj strony)
przed przekazaniem do Warstwy Danych (kolejny krok) to możemy kod remarketingowy
właściwie aktywować na każdej stronie. W innym przypadku, musimy stworzyć tyle kodów
remarketingowych, z oddzielnymi regułami dla każdego rodzaju stron, ile rodzajów stron
chcemy oznaczyć kodem remarketingowym.
Ad 3. Wybieramy parametry i przekazujemy do Warstwy Danych
Możemy podać więcej parametrów niż tylko: typ strony (pagetype), identyfikator produktu
(prodID) i wartość produktu (total value). Ważne, żebyśmy nie zmieniali zmiennych, które
są przypisane do dynamicznego remarketingu18. Rekomenduję trzymanie się nomenklatury
zaproponowanej w pomocy AdWords.
Trzy powyższe zmienne są zmiennymi standardowymi i z nich należy korzystać. 18 Więcej o parametrach dynamicznego remarketingu - https://support.google.com/adwords/answer/3103357
Copyright by Przemek Modrzewski, www.marketingLAB.pl 113
Oczywiście możemy dodać więcej zmiennych. Ich opis jest dostępny w pomocy AdWords
dotyczącej dynamicznego remarketingu.
Teraz najważniejsze. Spójrzmy na kod poniżej. Widzimy tam zmienną „google_tag_params”.
Do tej zmiennej musimy przekazać wszystkie zmienne i wartości dotyczące produktu do
dynamicznego remarketingu. To niestety musi się wydarzyć przy pomocy kogoś, kto
opiekuje się naszą stroną i potrafi te dane pobrać z naszego serwera, cmsa, silnika sklepu.
W każdym razie nie jest to zbyt trudne. Odbywa się to na tej samej zasadzie, co
implementacja moduły E-‐commerce Google Analytics w sklepie.
Skrypt ze zmiennymi ecomm zamkniętymi w zmiennej google_tag_params umieszczamy
ponad tablicę Warstwy Danych -‐ dataLayer = [] ;. Tak jak widać na przykładzie.
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 'Identyfikator_produktu',
ecomm_pagetype: 'product',
ecomm_totalvalue: 'wartość_produktu'
};
</script>
<script>
dataLayer = [{
google_tag_params: window.google_tag_params
}];
</script>
Jak widzimy powyżej, w Warstwie Danych umieszczamy zmienną przekazującą nasze
zmienne dynamicznego remarketingu.
Co zrobiliśmy? Tworzyliśmy zmienną google_tag_params, która zawiera w sobie pary
danych zmienna:wartość potrzebne do naszego remarketingu. Następnie w Warstwie
114
Danych odwołujemy się do tej zmiennej. Teraz nasze dane są już dostępne dla GTM. Trochę
to zagmatwane, ale jeśli nie chcemy tego rozumieć wystarczy dokładnie to zrobić jak
powyżej. Oczywiście uwzględniając swoje produkty ;)
Ad 4. Tworzymy makro, które połączy dane z Warstwy Danych z tagiem
remarketingowym.
Makro musi być w rodzaju Zmienne Warstwy Danych (dataLayer Variable). Tego rodzaju
makro korzysta ze zmiennych i wartości z Warstwy Danych. Jako zmienną
wykorzystujemy zmienną, którą już przekazaliśmy wyżej do Warstwy Danych czyli
“google_tag_params”.
Moje makro nazwałem tak jak zmienną, aby wiedzieć do czego dane makro się odnosi, ale
każdy może użyć nazwy jakiej mu wygodnie.
Następnie wracamy do tagu remarketingowego i dokonujemy konfiguracji parametrów
niestandardowych. Sprowadza się to do wyboru zmienne Warstwy Danych czyli naszego
makra, które stworzyliśmy przed chwilą.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 115
Gotowe. To co mamy to w pełni skonfigurowany dynamiczny remarketing dla rodzaju stron
produktowych. Czyli to co się wydarzy? W momencie kiedy użytkownik pojawi się na
stronie ze słowem “products” w adresie URL (reguła, którą stworzyliśmy) to zostanie
wywołany kod remarketingowy ze zmienną Warstwy Danych “google_tag_params”. Z kolei
zmienna “google_tag_params” korzysta z wcześniej przekazanych danych ze zmiennej
umieszczonej ponad naszą tablicą dataLayer = [];.
Cały zabieg tworzenia dynamicznego wydaje się trochę ”na około” za pierwszym razem. Z
kolei jak się dobrze przyjrzeć to raz skonfigurowany kod remarketingowy będzie działał
niezależnie jakie dodatkowe zmienne będziemy chcieli dodać. Nie musimy także edytować
nic w tabeli Warstwy Danych (dataLayer = [];). Wystarczy edytować (modyfikować lub
dodawać zmienne i wartości) w naszej zmiennej ponad tabelą dataLayer. Inną sprawą jest
też fakt, że jeśli chcemy wykorzystać Warstwę Danych w dynamicznym remarketingu
możemy wykorzystać tylko jedno marko. Stąd my w jednym makrze “zamykamy” wiele
zmiennych i wartości zamiast jednej.
116
To wszystko. Warto pamiętać o innych rodzajach stron. Musimy dla nich tworzyć albo inne
zestawy reguł i tagów, albo dynamicznie podmieniać rodzaje stron w zmiennej var
google_tag_params, która znajduje się ponad tabelą dataLayer = [].
Cała reszta to już praca na koncie AdWords. Tworzenie list remarketingowych oraz
kampanii AdWords z dynamicznymi kreacjami.
Warto też poczytać o innych dostępnych zmiennych w dynamicznym remarketingu w
pomocy AdWords pod tym adresem:
https://support.google.com/adwords/answer/3103357
Metoda druga - bez przekazywania zmiennych programistycznie
Metoda pierwsza, rekomendowana, gdyż wykorzystuje Warstwę Danych, nie zawsze może
nam najbardziej pasować. Chociażby z powodu potrzeby pomocy programisty. Musimy
jakoś dynamicznie przekazywać wartości naszych zmiennych do Warstwy Danych. Bez
małych modyfikacji programistycznych się niestety nie obejdzie.
Druga metoda, mniej popularna, pozwala nam obejść się bez programisty i wykorzystać
możliwości jakie daje nam Google Tag Manager. Co w takim razie zrobimy? Wspomożemy
się GTM i zlecimy mu rozpoznawanie rodzaju strony, produktu i ceny z zawartości kodu
strony. Brzmi ciekawie. Prawie zawsze da się to zrobić, a im strona lepiej (staranniej)
napisana programistycznie tym będzie łatwiej.
Co zatem zrobimy?
1. Stworzymy makra, które rozpoznają zmienne z treści strony
2. Zmodyfikujemy tag remarketingowy
3. Stworzymy regułę do aktywowania tagu remarketingowego
Copyright by Przemek Modrzewski, www.marketingLAB.pl 117
Ad 1. Tworzenie makr, które rozpoznają (zidentyfikują) zmienne z treści strony
Podjęliśmy wyzwanie rozpoznania zmiennych i wartości z treści strony przy pomocy
możliwości GTM, bez pomocy programisty i wykorzystanie ich w konfiguracji
dynamicznego remarketingu. No więc do dzieła.
Mamy do rozpoznania trzy zmienne:
1. Typ strony (ecomm_pagetype) -‐ w naszym przypadku mają to być strony z produktami
2. Identyfikator produktu (ecomm_prodid) -‐ w naszym przypadku poszukamy nazwy
produktu i ustawimy ją jako identyfikator. Możemy tak zrobić bo każda nazwa jest
unikalna na stronie.
3. Wartość produktu (ecomm_totalvalue) -‐ to także będziemy starali się wyłuskać.
Do dzieła.
Poszukujemy typu strony (page_type)
Nasz przykład opieramy na stronie charlotteas.com, sklepie z biżuterią z bursztynem.
118
W celu odnalezienia jakiegoś charakterystycznego dla strony tagu czy oznaczenia
edytujemy stronę charlotteas.com na stronie dotyczącej przykładowego produktu.
Wchodzimy zatem w zakładkę dotyczącą produktów oraz wybieram pierwszy lepszy
produkt. Adres strony, którą będę podglądał to:
http://www.charlotteas.com/collections/pendants/products/pendant12
Podglądając kod źródłowy szukam miejsca, które pozwoli mi odnaleźć element w kodzie
odpowiedzialny za identyfikację tego rodzaju strony (strona produktowa).
Zwykle zaczynam od poszukiwania jakiegoś unikalnego ID elementu. W podglądzie źródła
strony, poszukuję unikalnych identyfikatorów. Najczęściej są to ID takich elementów jak
body i div, ale mogą też być inne.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 119
Znalazłem unikalne ID dla elementu <div>. To id=product. Sprawdziłem i dla innych stron
np. kontakt czy głównej to id ma inne wartości. To dobry kandydat. Teraz trzeba wyłuskać
tą informację i przenieść ja do GTM. Zrobimy to za pomocą makra typu “DOM element”.
Co to makro robi?
Makro odnajduje element o identyfikatorze “product”. W tej sytuacji jest to element DIV.
Nazwę atrybutu podaję jako ID. To oznacza, że chcę wyciągnąć tylko treść samej wartości
identyfikatora (czyli z id=”product” wyciąga “produkt”). Gdybym nie dodał w tym miejscu
nazwy parametru to makro wyciągnie teksty z całego elementu div oznaczonego jako
120
id=product, a nie o to nam chodzi.
Jest drugi sposób na wyznaczenie wartości zmiennej (ecomm_pagetype). Nawet prostszy,
ale ma pewne ograniczenia. Jeśli nie możemy znaleźć odpowiednich zależności w kodzie
strony, które pozwolą na automatyczny rozpoznawania rodzaju strony. To możemy
wykorzystać makro (Constant String), w którym wyznaczamy ma sztywno nazwę rodzaju
strony.
Jeśli wyznaczymy “na sztywno” wartość zmiennej ecomm_pagetype, to musimy ten fakt
“zrekompensować” ustalając regułę dla tagu remarketingowego, kiedy ma być
uruchamiany. Tutaj będziemy mogli już na przykład wykorzystać adres URL.
Mamy zatem skonfigurowany parametr dotyczący zmiennej typu(rodzaju) strony -‐
ecomm_pagetype. Teraz następny parametr czyli identyfikator samego produktu. Tak jak
wcześniej ustaliliśmy, identyfikatorem może być nazwa produktu, bo jest unikalna w
obrębie strony. Musimy pamiętać, że wykorzystując wiele “feedów” w koncie Google
Merchant Center, identyfikatory nie mogą się powtarzać. Musimy to brać pod uwagę
wykorzystując nazwy jako identyfikatory19. Tworzymy zatem makro, które zidentyfikuje
19 Więcej o feedach - https://support.google.com/merchants/answer/188494
Copyright by Przemek Modrzewski, www.marketingLAB.pl 121
nam nazwę produktu. Znowu szukamy takiego elementu strony, który nam “przekaże”
nazwę produktu (lub inny unikalny identyfikator).
Znowu znalazłem element <div> z identyfikatorem “product”. Widzę, że nazwa produktu
jest klasą tego elementu. “Pendant12” to unikalna nazwa produktu. Aby pobrać tą wartość z
parametru class, znowu korzystamy z makra “DOM element”.
122
Co to makro robi?
Makro pobiera wartość z atrybutu “class” dla elementu <div> od identyfikatorze “product”
Drugim sposobem mogłoby być pobranie wartości elementu class z elementu <div> o
identyfikatorze id=”product, za pomocą makra “Custom JavaScript”. Tutaj musielibyśmy
kogoś poprosić kto potrafiłby skorzystać z języka JS. Takie makro, dla naszego przykładu
mogłoby wyglądać tak:
Mamy drugi z parametrów dynamicznego remarketingu, który mieliśmy ustalić. Teraz czas
na trzeci czyli ecomm_totalvalue.
Trzeci parametr także postaramy się wyciągnąć z kodu strony. Z tego co udało mi
się ustalić to cena produktu przechowywana jest w elemencie o identyfikatorze “price-‐
preview”.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 123
W związku z tym. Tworzymy makro po raz kolejny. Będzie to znowu makro o typie “DOM
element”.
Co to makro robi?
Makro pobiera zawartość elementu o identyfikatorze “price-‐preview”.
Mamy już wszystkie parametry potrzebne do dynamicznego remarketingu. Teraz wracamy
do naszego tagu remarketingowego, aby skończyć jego konfigurację.
Edytując tag remarketingowy, który stworzyliśmy na początku, dodajemy stworzone
parametry w sposób ręczny (nie przy pomocy Warstwy Danych).
124
Właściwie to już koniec. Teraz możemy sprawdzić nasze dzieło w trybie Podglądu (Debug).
Po przejściu na stronę skorzystamy z wtyczki Tag Assistant, żeby sprawdzić czy wartości
dynamicznego remarketingu się przekazują.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 125
Teraz wystarczy już tylko skonfigurować listy remarketingowe i kampanie na koncie
Google AdWords.
Ecommerce tracking w GA za pomocą GTM Dodawanie modułu śledzącego transakcje Ecommerce w Google Analytics, to jedno z
najważniejszych czynności konfiguracyjnych GA dla sklepów, ale nie tylko. Dzięki
modułowi Ecommerce możemy analizować prawie wszystkie raporty dotyczące
aktywności użytkowników na naszej stronie, przez pryzmat finansowy. Właściwie nie
wyobrażam sobie sklepu, który ma Google Analytics, a nie korzysta z modułu Ecommerce.
W tradycyjny sposób, aktywowanie polega na włączeniu modułu w ustawieniach Widoku
profilu w GA. Następnie musimy umieścić odpowiedni kod ze zmiennymi na stronie
potwierdzającej zakupy (dziękujemy_za_zakupy). Zmienne muszą otrzymać odpowiednie
wartości z naszego systemu sklepowego, żeby mogły być z tej strony, potwierdzającej
zakupy, przekazane do Google Analytics. Taki zabieg wymaga pomocy programistycznej.
Niestety przy pomocy GTM także od tego nie uciekniemy ponieważ musimy przekazać do
zmiennych wartości zakupów tak jak dotychczas. Tylko tym razem przekażemy je do
Warstwy Danych. Będzie za to łatwiej tym kodem zarządzać.
A więc do dzieła.
Aby zainstalować moduł Ecommerce na stronie z wykorzystaniem GTM musimy:
1. Stworzyć nowy tag Google Analytics odpowiedzialny za rejestracje transakcji.
2. Przekazać wartości dla zmiennych do Warstwy Danych
3. Ustawić reguły uruchamiania modułu zliczania transakcji
Ad 1. Tworzenie tagu GA do mierzenia transakcji
Tag do mierzenia transakcji tworzymy w taki sam sposób jak każdy inny tag Analytics. W
126
tym przypadku jednak wybieramy typ mierzenia (track type) jako “Transaction”.
Pamiętajmy, że za każdym razem tworzymy nowy tag GA, jeśli chcemy dodać jakiś nowy
typ mierzenia. Czyli w przypadku naszym to będzie kolejny tag GA na jednym koncie. Mamy
już tag odpowiedzialny za mierzenie Odsłon (pageview), mamy odpowiedzialny za
śledzenie zdarzeń (events) i teraz będziemy mieli odpowiedzialny za mierzenie transakcji
(Transaction).
Ad 2. Przekazywanie wartości do zmiennych w Warstwie Danych
W tym kroku, musimy wspomóc się osobą, która zajmuje się naszym sklepem od strony
programistycznej. Należy przekazać z danych o transakcji (zmienne obowiązkowe i
opcjonalne) wartość i dane dotyczące danej transakcji. Nasz tablica ponad kontenerem
GTM będzie wyglądać mniej więcej tak dla transakcji Ecommerce: <script>
dataLayer = [{
'transactionId': '1234',
'transactionAffiliation': 'Acme Clothing',
'transactionTotal': '11.99',
'transactionTax': '1.29',
'transactionShipping': '5',
'transactionProducts': [{
'sku': 'DD44',
'name': 'T-‐Shirt',
'category': 'Apparel',
'price': '11.99',
'quantity': '1'
},{
'sku': 'AA1243544',
'name': 'Socks',
'category': 'Apparel',
'price': '9.99',
'quantity': '2'
}]
}];
</script>
Copyright by Przemek Modrzewski, www.marketingLAB.pl 127
Do Warstwy Danych przekazujemy dane dotyczące każdego kupionego produktu oraz dane
dotyczące całej transakcji.
Istnieje zestaw zmiennych obowiązkowych i opcjonalnych, które musimy użyć w Warstwie
Danych:
Zmienne dla transakcji
128
Dane dotyczące kupionych produktów
Ad 3. Stworzenie reguły dl tagu GA odpowiedzialnego za transakcje
Pozostaje nam już tylko ustalenie reguły dla tagu, kiedy ma on być uruchamiany.
Ponieważ tag dotyczący transakcji ma zbierać informacje o wykonanych transakcjach to
powinien być uruchamiany w momencie kiedy transakcja dojdzie do skutku. Tak więc
jedynym słusznym miejscem do jego uruchomienia są strony z potwierdzeniem zakupu.
To strony typu: Dziekujemy_za-‐transakcje.html, potwierdzenie_transakcji.html i itp.
Tak więc tworzymy regułę.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 129
Pierwszy człon warunku jest myślę już oczywisty. Pozwalamy uruchomić tag w momencie
kiedy adres URL będzie zawierał fragment “transaction_completed”.
Drugi fragment może być nie, do końca, jasny. Zdarzenie wbudowane w GTM czyli gtm.dom,
nie pozwala uruchomić tagu dopóki cała strona nie zostanie załadowana. Czasem po prostu
zdarza się, że nasz kontener może, z różnych powodów, nie znajdować się na samej górze
treści strony i aby transakcja na pewno się zarejestrowała musimy pozwolić załadować
się całej stronie. Ot i cała tajemnica ;).
Konfiguracja realnego wskaźnika odrzuceń w Google Analytics
Wskaźnik odrzuceń (bounce rate) w Google Analytics jest jednym z istotniejszych
wskaźników, które są brane pod uwagę w kwestii oceny strony pod względem jej
użyteczności dla użytkowników. Wiadomo, że im wyższy wskaźnik odrzuceń, to oznacza, że
mniej osób skorzystało z dodatkowych treści na stronie. Znaczy, że badana strona nie
spełniła oczekiwań odwiedzającego. Stąd warto ten wskaźnik w takim dokładnie liczyć,
gdyż często na jego podstawie, miedzy innymi, podejmowane są decyzje optymalizacyjne.
Problem w Google Analytics, jeśli chodzi o ten wskaźnik , jest taki, że nie jest on dokładnie
liczony w konfiguracji standardowej. Jeśli ktoś wszedł na naszą stronę i pozostał na niej 10
sekund i wyszedł jest tak samo traktowane jak w przypadku użytkownika, który wszedł na
130
stronie , przebywał godzinę (bo czytał artykuł) po czym wyszedł. Dla GA klient „odbił się od
strony”, a czas jego przebywania na stronie wynosił 0 sekund. Czemu tak jest? Bo GA
mierzy czas na przebywania na stronie odejmując czas wejścia na kolejną stronę od czasu
wejścia na stronę pierwszą w odwiedzinach.
Przykład 1:
Wejście na witrynę -‐> Strona A (strona docelowa) czas. 10:00 -‐> Strona B -‐ czas wejścia:
10:01 -‐> wyjście z serwisu.
Czas przebywania na stronie A = 1 minuta. Czas przebywania na stronie B nieznany. Nie
ma czego odjąć czas wejścia na stronę B.
Przykład 2:
Wejścia na witrynę -‐> Strona A czas: 10:00 -‐> wyjście z serwisu 10:29.
Czas realny 29minut na stronie. Czas podany przez GA – 0 s. Google Analytics nie wie ile
czasu przebywa użytkownik na stronie. Bo nie od czego odjąć godziny wejścia na stronę i
kwalifikuje to jako 0 s.
Jeśli chcemy podejmować jakiekolwiek decyzje na podstawie Wskaźnika odrzuceń musimy
go urealnić. Najlepszym przykładem jest określenie czasu po jakim Google Analytics ma
przestać traktować wejście na stronę jako odrzucenie. Czyli na przykład po 10 sekundach
od wejścia na stronę traktujemy użytkownika jako osobę zaangażowaną w treść strony i
wartościową wizytę dla niego i dla właściciela strony. Urealnijmy zatem wskaźnik
odrzuceń u nas na stronie. Do tego potrzebne nam jest zdarzenie w Google Analytics, które
zarejestruje czas przebywania na stronie i spowoduje, że wskaźnik odrzuceń nie zostanie
naliczony nawet po wyjściu z danej strony bez przechodzenia w głąb serwisu. Możemy to
zrobić przy pomocy GTM.
Co musimy zrobić:
Copyright by Przemek Modrzewski, www.marketingLAB.pl 131
1. Stworzyć tag z automatycznym Odbiornikiem czasu (time listener)
2. Stworzyć tag GA odpowiedzialny za przekazywania informacji o zdarzeniu
czasowym
3. Stworzy reguły, które pozwolą uruchamiać się tagom w odpowiednim momencie
Ad 1. Tag rejestrujący czas automatycznie
Tworzymy tag – Odbiornik czasowy. Ustawiamy nazwę zdarzenia (eventu). Generalnie ma
potrzeby jej ruszać. Ustawiamy interwał czasowy, co ile ma się danych event uruchamiać.
NA koniec ustawiamy kwestię ilości aktywacji danego zdarzenia. My ustawiliśmy jeden(1)
bo nam więcej nie potrzeba. Interesuje nas tylko czy ktoś był krócej czy dłużej niż 10
sekund.
Nie zapominamy, że trzeba ustawić także regułę, kiedy dany tag ma być uruchamiany.
W naszym przypadku , chcemy znać realny wskaźnik odrzuceń dla każdej strony naszego
serwisu. Tak więc ustawiamy „Wszystkie strony”.
132
Ad 2. Tworzymy tag GA odpowiedzialny za wskaźnik odrzuceń
Tworzymy nowy tag Google Analytics odpowiedzialny za rejestrację zdarzeń.
Dodajemy oznaczenia zdarzenia. Jak chcemy aby nazywała się kategoria i akcja zdarzenia.
Możemy też dodać oczywiście kolejne wartości, ale w tym przypadku nie ma to znaczenia.
Pamiętamy, żeby nie ruszać ustawienia „Non-‐interaction Hit”. Jeśli go zostawimy to przy
wykonaniu zdarzenia zostanie zlikwidowane wskaźnik odrzuceń. Zdarzenie wpłynie na
anulowanie go. Jeśli ustawimy jego wartość na „true” to zdarzenie nie wpłynie na wskaźnik
odrzuceń i mimo wykonania się zdarzenia i tak zostanie naliczony wskaźnik odrzuceń przy
opuszczeniu witryny.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 133
Teraz tylko jeszcze reguła dla naszego tagu Google Analytics.
Nasza reguła mówi: Aktywuj tag Google Analytics, który zarejestruje zdarzenia kiedy
{{event}} równa się gtm.timer. Czyli nasz Odbiornik Czasowy. Wiemy, że Odbiornik
czasowy zostanie wywołany po 10 sekundach od wejścia na stronę. Wtedy właśnie nasz
Tag się aktywuje, zarejestruje zdarzenie i anuluje naliczenie się wskaźnika odrzuceń.
Tagi niestandardowe w GTM No właśnie. Co zrobić kiedy tagu, który chcemy zainstalować przy pomocy GTM po prostu nie ma na liście zdefiniowanej w Tag Managerze? Nie jest to żaden problem dlatego, że istnieją tagi niestandardowe. Mamy dostępne dwa rodzaje tagów niestandardowych:
1. Niestandardowy tag html 2. Niestandardowy tag graficzny
134
Ad 1. Niestandardowy tag html Dzięki temu rodzajowi tagu możemy dodać dowolny inny tag, którego obecnie nie ma w
standardzie na liście w GTM. Po prostu wklejamy w dostępne miejsce cały fragment kodu
śledzącego, który chcemy wdrożyć na stronę.
Przy pomocy tagu niestandardowego możemy też dodawać okazjonalnie, elementy na
stronę. Nie jest zalecane, ale możliwe. Możemy dodać, na przykład, skrypt javascript lub
zwykły kod html:
Dla przykładu, dodałem tag z bardzo prostym fragmentem kodu javascript, który ma
wywołać na stronie okno z komunikatem „to jest niestandardowy javascript”.
Po zapisaniu i opublikowaniu (lub w trakcie testowania) wersji kontenera. Na naszej
stronie dany skrypt się wywoła, wraz z innymi tagami.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 135
Tak samo jeśli dodamy zwykły kod HTML:
Wynik będzie jak poniżej:
136
Oczywiście to bardzo proste przykłady, ale mają one tylko zaprezentować możliwości jakie
daje tag niestandardowy. Co ciekawe możemy używać w kodzie tagu, stworzonych przez
nas makr. Trzeba tylko pamiętać zawsze o zamknięciu nazwy makra w podwójnych
klamrach {{moje_makro}}. Jeśli jednak zaczynamy przygodę z GTM, raczej tego rodzaju tag
nie będzie nam bardzo potrzebny. Większość najpopularniejszych skryptów śledzących jest
już wbudowana.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 137
Wykorzystanie GTM w aplikacjach mobilnych
Google Tag Manager oprócz swojej bardzo ważnej obecnie funkcji zarządzania tagami na
stronach internetowych, pozwala w rewolucyjny sposób zarządzać także naszymi
aplikacjami mobilnymi. Tutaj piszę zarządzać ponieważ tutaj nie chodzi tylko o tagi i kody
śledzące. Chodzi tutaj o zarządzanie samą aplikacją i wprowadzania w niej zmian. Czyli co
robi GTM dla aplikacji?
GTM dla aplikacji pozwala:
1. Zarządzanie tagami w aplikacji (kody GA, konwersji, remarketingu, itp.)
2. Wprowadzania zmian w aplikacji (rewolucja)
Zarządzanie tagami w aplikacji – kilka słów
Tutaj nie ma chyba żadnej niespodzianki. GTM pozwala nam zarządzać tagami wewnątrz
aplikacji. Pozwala nam to na śledzenie zachowań użytkowników w aplikacji, pozwala
implementować kody konwersji i remarketingowe. Dzięki temu możemy
prowadzić skuteczne kampanie remarketingowe dla naszej aplikacji.
138
Jak widać interfejs się nie wiele różni. Tak samo tworzymy kontener (możemy wybrać czy
tworzymy oddzielne kontenery dla iOS i Androida czy jeden wspólny), tagi, reguły i makra.
Prawda jest niestety taka, że bez asysty kogoś, kto jest zaangażowany w stworzenie
aplikacji będzie nam trudno zrozumieć wszystkie możliwości GTM dla aplikacji.
Najważniejsze żebyśmy zrozumieli czego możemy się spodziewać bo GTM dla aplikacji.
Wprowadzania zmian w aplikacji (rewolucja)
Problem z aplikacjami jest taki, że w momencie ściągnięcia ich na urządzenie trochę
tracimy nad nim kontrolę. Aplikacja, mówiąc krótko, poszła w świat. Tak jak samochód
wyjeżdża z fabryki i aby coś w nim zmienić, poprawić, naprawić trzeba przyjechać do
warsztatu, znaczy właściciel musi. Tak samo z aplikacją. Jeśli coś chcemy usprawnić
zmienić, poprawić to musimy stworzyć kolejną wersję aplikacji i zachęcić do jej pobrania.
Wszystko zależy od właściciela telefonu. Jeśli nie zechce pobrać nowszej wersji to
straciliśmy ten egzemplarz aplikacji „na zawsze”. Teraz sytuacja się zmieniła dzięki GTM
dla aplikacji.
Zarządzanie tagami to jedno, ale GTM potrafi o wiele więcej. Mianowicie pozwala nam mieć
kontrolę nad aplikacjami już ściągniętymi. Możemy wprowadzać zmiany w aplikacji i
zarządzać nią nawet jak została już pobrana. W ten sposób nie musimy prosić się o
ściąganie nowych wersji. Ale od początku.
Problem z aplikacjami mobilnymi
Tak jak wspomniałem wcześniej, aplikacja wysłana i zainstalowana u użytkownika jest
trochę poza naszym zasięgiem. Możemy jedynie ją aktualizować wysyłając nową wersję do
sklepu i zachęcając do jej pobrania. Wynika z tego kilka problemów:
Copyright by Przemek Modrzewski, www.marketingLAB.pl 139
● Aplikacja wymaga ponownej weryfikacji w sklepie pod względem bezpieczeństwa.
● Aplikację musimy potem ponownie wysłać oraz ktoś musi ją zainstalować od nowa.
● Na rynku, im więcej naszych aktualizacji, tym więcej wersji, które funkcjonują bo nie
wszyscy aktualizują oprogramowanie tak często jakbyśmy chcieli.
Oczywiście, nie jest zamierzeniem twórców GTM, aby omijać weryfikację sklepów. Zalecane
jest informowanie o zmianach i poddawanie ich weryfikacji, ale na innych zasadach.
Jak działa GTM dla aplikacji?
140
Google Tag Manager dla aplikacji działa na zasadzie ciągłego aktualizowania danych
zawartych w kontenerze. Zmiany propagują się do 12 godzin (zmiany są sprawdzane dwa
razy dziennie). Nie oznacza to, że jeśli aplikacja nie ma dostępu do internetu to aplikacja
nie będzie działać. W momencie instalacji, instalowany jest kontener z domyślnymi
wartościami zmiennych. Dodatkowo, GTM nie zużywa dużo transferu danych do
aktualizacji kontenera, więc nie musimy się martwić o to, że aplikacja zacznie być „transfer
żerna”.
Aktualizując kontener i tworząc nową wersję, po prostu czekamy na to, aż aplikacja się
zaktualizuje. Możemy oczywiście testować zmiany poprzez wersję testową, która
otwieramy na naszym mobilnym urządzeniu. Możemy też wysłać specjalny link osobom
trzecim, które także będą mogły obejrzeć testową wersję poprzez link.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 141
Co można zmienić, przez GTM, w aplikacji?
Google Tag Manager pozwala zmienić bardzo wiele rzeczy w aplikacji, od zmian wizualnych,
użytecznościowych, przez zmiany w miejscu wyświetlania reklam, do zmian w samych
zasadach działa aplikacji (np. Zmiana ilości żyć w grze).
Zobaczmy to na przykładzie testowej aplikacji wykorzystywanej przez zespół Google.
Mamy aplikację, która jest wykorzystywana do przechowywania kontaktów. W danej
aplikacji mamy miejsce na reklamę.
142
Po pewnym czasie stwierdzamy, że lepszym rozwiązaniem byłoby przeniesienie reklamy
na dół ekranu oraz wykorzystanie większego formatu. W GTM w danej chwili mamy takie
wartości jeśli chodzi nasze miejsce reklamowe.
Wystarczy zmienić wartości dla makra odpowiedzialnego za miejsce oraz typ reklamy.
Copyright by Przemek Modrzewski, www.marketingLAB.pl 143
W ten sposób uzyskamy następujący wynik. Reklama będzie od tej pory pojawiać się na
dole ekranu. Będzie innego formatu.
Innym przykładem może być na przykład zmiana wyglądu aplikacji ze względu na czasowe
akcje promocyjne. Zdecydowaliśmy, że na gwiazdkę chcemy mieć inne tło aplikacji. Takie
z choinką ;). Wystarczy wykorzystać makro, które uaktywni odpowiednie tło. Tutaj warto
wiedzieć, że tego typu rzeczy jak tło muszą już być obecne w samej aplikacji. My możemy
144
wpływać na zmiany reguł czy zasad ich wyświetlania, ale nie przesyłamy ich przez GTM do
aplikacji.
W ten sposób, w ciągu 12 godzin, nasza aplikacja u wszystkich będzie wyglądała tak.
Oczywiście jak będą w tym czasie podłączeni do internetu, aby kontener miał szasnę
się odświeżyć. Oczywiście zmiana nastąpi przy kolejnym otwarciu. Aplikacja wymaga
restartu, aby zobaczyć zmiany.
Inne przykłady to na przykład dodanie wersji językowych do aplikacji, zmiana ilości żyć w
Copyright by Przemek Modrzewski, www.marketingLAB.pl 145
grze itp. To wszystko możemy swobodnie modyfikować bo nie wymaga to implementacji
nowych elementów do aplikacji. Operujemy na tych samych zmiennych tylko zmieniamy
ich wartości.
Kilka myśli podsumowujących
Korzystając z Google Tag Managera nie możemy zapominać o kilku ważnych rzeczach,
które bardzo często nam umykają i powodują frustrację i stratę czasu. Oto kilka z nich:
1. Pamiętaj o publikacji nowej wersji kontenera zawsze po zmianach
2. Stwórz rozsądny system nazewnictwa tagów, reguł i makr
3. Trzymaj domeny na oddzielnych kontach, tak będzie łatwiej się połapać. Chyba, że kilka
domen to jedna całość w internecie.
4. Zawsze testuj tagi przed opublikowaniem
5. Korzystaj z makra Lookup table do stworzenia środowiska testowego w GA, aby nie
zaśmiecać statystyk testami
6. Zaplanuj migrację tagów zanim zaczniesz to robić
7. Uważaj na wielkie litery one mogą powodować, że makra i reguły nie będą działać
8. Używaj Tag Asystenta
Jest na pewno więcej takich popularnych kwestii związanych z używaniem GTM, ale te są
tymi, które uważam za najbardziej warte wspomnienia na sam koniec.
146
Plan migracji do GTM Na samym końcu części dotyczącej wykorzystania GTM na stronach internetowych,
zamieszczam proponowany harmonogram migracji tagów istniejących na stronie do GTM.
Warto mieć plan tego przedsięwzięcia tak, aby żadne dane nie zostały utracone w trakcie
migracji. Jest to tylko propozycja, każdy oczywiście może, ale nie musi z niego korzystać.
Plan
• Lista tagów do przeniesienia, • Czy są tagi niestandardowe, • Czy jest wdrożone śledzenie zdarzeń lub inne elementy śledzące w kodzie strony? • Czy obecnie śledzimy więcej niż jedną doemnę , subdomenę? • Kto odpowiada za edycję strony?
implementacja
• Wdrożenie "pustego" kontenera na stronę • Założenie testowego konta / pro�ilu Google Analytics do testów • Wdrożenie ustawień w GTM (+makro lookup table ) • Implementacja tagów , reguł i makr
Testowanie
• Testowanie ustawień tagów w trybie Podgląd (Debug)
Wdrożenie
• Kasowanie pojedynczo tagów ze strony i wdrażanie ich do GTM, poczynając od najprostszych i najbardziej standardowych
Copyright by Przemek Modrzewski, www.marketingLAB.pl 147
Zakończenie Niniejszy ebook ma za zadanie przybliżyć kwestie związane z wykorzystanie narzędzia
jakim jest Google Tag Manager, wszystkim tym, którzy nie są biegli w kwestiach
technicznych związanych z tworzeniem stron, programowaniem i wszystkim tym czym
powinni się zajmować osoby z działu IT lub webmasterzy. Siłą jednak dobrego specjalisty
od marketingu internetowego jest, przynajmniej, rozumienie zasad działania i możliwości
jakie dają nam nowe narzędzia i technologie. Tak więc zgodnie z tą myślą, starałem
się opisać zasadę działania i możliwości GTM, jak najprościej, omijając świadomie
wszystkie bardziej skomplikowane opisy i upraszczając pewne kwestie.
Ebook nie zawiera wszystkiego w temacie Google Tag Managera. Jest o wiele więcej, jeśli
ktoś będzie chciał się zagłębić w ten temat. W ebooku, umyślnie pominąłem pewne
elementy konfiguracji. Chodziło mi bardziej o przybliżenie możliwości i zasad działania.
Resztę musisz doczytać samodzielnie.
Będę wdzięczny za wszelkie sugestie dotyczące treści i formy.
Mam nadzieję, że materiał kogoś wspomoże w coraz bardziej technicznym świecie
marketingu.
Pozdrawiam
Przemek Modrzewski