Rewolucja w konfiguracji zdarzeń na stronie za pomocą Google Tag Managera

Tym razem wracam do tematu wykorzystywania Google Tag Managera, czyli jednego z najważniejszych narzędzi w pracy każdego SEMity. O Google Tag Menedżerze pisałem jakiś czas temu przedstawiając to narzędzie. Tym razem o jego najnowszej funkcjonalności, która dość długo była w fazie bardzo ograniczonej bety czyli o auto-tagowaniu treści strony. A dokładniej o tworzeniu wszelkiego rodzaju zdarzeń w Google Analytics (i nie tylko) bez potrzeby ingerencji (edycji) kodu strony. Ale od początku….

Zdarzenia w Google Analytics i nie tylko

Jeśli chcemy zmierzyć coś wiecej na stronie oprócz samych wyświetleń musimy skorzystać albo z wirtualnych odsłon (raczej starsze rozwiązanie) albo z opcji zdarzeń. Za pomocą zdarzeń możemy mierzyć wszelkiego rodzaju interakcje z naszą stroną (kliknięcia na linki, guziki, wypełnienia formularza, najeżdżanie myszką na logo, itp.). Właściwie nie wiele jest rzeczy, których byśmy nie mogli oznaczyć jako zdarzenie. Dodatkowo możemy zdarzenie (np. kliknięcie na link) wykorzystać jako cel czyli coś co uznajemy za najważniejszą czynność jaką może wykonać odwiedzający. Celem najczęściej jest np. wypełnienie formularza, zakup albo coś co jest najbliżej ewentualnych zysków . Teki cel nazywamy najczęściej konwersją. Są jednak także tzw. mikro-konwersje czyli mniejsze akcje odwiedzających, które nie są bezpośrednio powiazane z przychodem, ale bez nich szansa na sprzedaż, albo inną najważniejszą akcje na stronie, nie byłoby szans. Może to być kliknięcie na link, rozpoczęcie wypełniania formularza, itp. Mierzenie tzw. mikrokonwersji (różnorakich zdarzeń) daje nam szansę na poprawę ścieżki to konwersji właściciwych i zwiększenie przychodów z naszych działań w internecie. Tak więc  jakby nie patrzeć , zdarzenia są ważne i należy je stosować.

Problem, wyzwanie

Problem jaki zawsze napotykam, zwłaszcza w dużych organizacjach to kwestia edycji strony. Niestety jeśli chcemy zmierzyć zdarzenie (niech to będzie znowu kliknięcie na link) musimy dodać mały fragment kodu javascript do naszego linka. Co gorsza, musimy to zrobić w kodzie strony. Mimo, że nie jest to jakieś bardzo skomplikowane to najczęściej nie możemy tego zrobić sami. Musi to zrobić dział IT (!!!). Tu zaczynają się schody. Zlecenia, szukanie argumentów na zdanie “nie da się”, oczekiwanie, testowanie, szukanie dziur w systemie bezpieczeństwa itd. Pół roku w plecy, a zdarzeń nie ma. Trochę półżartem, ale jeśli musimy optymalizować kampanię z dnia na dzień to musi szasnę na dostęp do danych musimy mieć szybko. Konkludując, wszelkie modyfikacje na stronie zabierają czas, nerwy i chęć do życia wszystkim zainteresowanym stronom. Tak tak, IT też ma z nami cieżko ;).

Rozwiązaniem na bolączki świata marketingu internetowego miały być wszelkiego rodzaju narzędzia do tagowania (tag manager). Trochę sie poprawiło. Nie musimy prosić o dodawanie kodów GA, adwords, remarketingowych i innych. Super. Ale jeśli chcemy mierzyć zdarzenia wracamy do punktu wyjścia. Musimy edytować kod strony aby dodać fragment kodu w celu mierzenia zdarzeń. Koszmar od nowa.

Auto-tagowanie – nirwana SEMity 😉

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 (Google Tag Manager) 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>, adres URL i wiele innych. W przypadku pzytoczonym, identyfikatorem jest id=link-do-czegos.

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

No to może jakiś przykład po tej trochę przydługiej teorii.

***EDIT***
Zachęcam do pobrania przewodnika Google Tag Managera, gdzie temat automatycznych zdarzeń jest szerzej opisany
***EDIT***

Przykład 1: Mierzenie linków na stronie

Weźmy sobie prosty przykład. Mamy stronę docelową z zapisem na przykładowy newsletter.

Weźmy na tapetę na pierwszy rzut link na dole. Chcemy mierzyć kliknięcia na ten link jako zdarzenie w Google Analytics. Tak wiec po kolei:

1. Tworzymy tag, który będzie odpowiedzialny za rozpoznawanie kliknięć na link (tzw. link click listener). Możemy oczywiście w tym kroku wybrać także inny rodzaj tagu, który będzie rozpoznawał wszystkie kliknięcia, nie tylko na linki (click listener), ale trzymam się porządku. Ten tag automatycznie tworzy warstwę danych (data layer), która będzie rozpoznawała odpowiedni rodzaj akcji na stronie (kliknięcie na przykład).

2. Określamy regułę, kiedy nasz tag ma być odpalany. W tym przypadku moja regułą wskazuje, że interesuje mnie mierzenie kliknięć na link w stopce na każdej podstronie strony docelowej. Stąd reguła “{{url}} matches RegEx .*” czyli odpal tag na wszystkich podstronach serwisu.

3. Następnie tworzymy kolejny tag odpowiedzialny za zdarzenia w Google Analytics. Pamiętajmy, że kazdy tag w GTM odpowiada za co innego. Jeśli chcemy mierzyć wyświetlenia i zdarzenia, musimy mieć dwa tagi GA. Jeden odpowiedzialny za wyświetlenia, a drugi za zdarzenia. Wszystkie kolejne rzeczy, które chcemy mierzyć wymagają kolejnych tagów.

Jak widać powyżej, wybrałem tag Google Analytics oraz jego typ jako event. Czyli ten tag odpowiedzialny będzie za mierzenie konkretnego zdarzenia, które określam paramaterami (widać to na obrazku powyżej). Te paramtery odpowiadają parametrom, które muszę określić dla Google Analytics, aby zdarzenia się zliczały. Normalnie (bez GTM) dodałbym je w kodzie strony. Tak robiliśmy do tej pory. Kod strony wyglądał tak:

_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

Więcej o zdarzeniach w Google Analytics znajdziemy w pomocy Analytics.

Wracając do przykładu. Jak widać dodałem makro w rubryce “Web property ID”. To miejce do dodawania ID naszego konta Analytics, w którym będziemy mierzyć zdarzenia. Wykorzystałem makro, aby za każdym razem nie podawać tego ID od nowa. Po prostu za każdym razem kiedy dodaje nowy tag dotyczące jednego konta Analytics, dodaję makro {{GA-ID-1}}, w którym wcześniej określiłem numer ID konta Analytics.

Ok, jedziemy dalej.

4. W kolejnym kroku dodajemy regułę dla tego tagu. Każdy tag ma swoje reguły, kiedy ma być aktywowany (odpalany). Można powiedzieć spokojnie, że ten krok jest najważniejszy bo jak tu coś źle ustawimy to później kończy się na dwu-godzinnym poszukiwaniu błędów w każdym miejscu, łzach, histerii i demolowaniu mebli. Wiem z autopsji. Tak więc uważajmy na nasze kochane reguły.

Tak więc co ustawiłem? Ustawiłem dwie reguły, które mają zawęzić pole manewru i rozpoznawania akcji na stronie przez GTM i określania który to link będzie odpowiedzialny za zdarzenie.

Pierwsza reguła “event equals gtm.linkClick” odpowdzialna jest za odpalenie naszego tagu z naszym rozpoznawaczem kliknięć (link click listener). To musimy wpisać sami (gtm.linkClick) do reguły. Pomocna  tu będzie pomoc GTM w tej materii.

Druga reguła zawiera warunek: “makro {{guzik123}} musi równać się guzik123”. Proszę nie przyzwyczajać sie do nazw bo były na szybko wymyślane.

To makro {{guzik123}} za chwilę będziemy tworzyć.

5. Pozostaje nam właśnie kwestia makra, które pomoże nam rozpoznać, o który link nam chodzi. Ten warunek w naszej regule wcześniej właśnie za to będzie odpowiedzialny. Gdyby go nie było, wszystki kliknięcia na linki zostały by zaliczone jako zdarzenie w Google Analytics. Też w sumie fajne, ale nie o to nam teraz chodzi.

Tworzę makro {{guzik123}} (nazwa dowolna tylko trzeba ją zawrzeć później w regule). Po czym wybieram rodzaj makra jako “Auto-event variable”. Ten rodzaj makra pozwala nam tworzyć w ogóle automatyczne tagi. Na końcu wybieram typ zmiennej. No i tu czasem bywają problemy. Ja wybrałem po prostu ID elmentu w kodzie HTML. Czyli ID elementu DOM. W razie czego możemy poczytać o elementach DOM tutaj.

Gdzie znajduję to ID elementu, o który mi chodzi? W kodzie strony. Oczywiście jeśli wcześniej dogadamy się z “człowiekiem-kodem-strony”, żeby ładnie to wszystko oznaczył. Oczywiście jak “człowiek-kod-strony” jest z prawdziwego zdarzenia to elementy będą posiadały swoje ID od razu ;).

W ten sposób nasza reguła zadziała w taki sposób. Zapisz zdarzenie pod warunkiem kiedy rozpoznasz kliknięcie na link (link click listener) i jeśli będzie to kliknięcie na element o ID=guzik123.

Czy działa nam nasza konfiguracja, możemy od razu sprawdzić w Google Analytics w raportach “Na żywo” -> Zdarzenia. Pamiętajmy, żeby opublikować zmiany w GTM po czym wchodzimy na stronę, klikamy na link, przechodzimy do GA i obserwujemy sobie raport na żywo. 🙂

Miłego używania. Więcej można oczywiście przeczytać w pomocy Google Tag Managera.

Jak oceniacie tą funkcjonalność?