W poprzednim artykule poświęconemu Google Tag Managerowi przedstawiłem możliwości w zakresie zarządzania tagami. Google przykłada bardzo dużą uwagę, aby jego produkty analityczne działały w synergii, dzięki czemu Tag Manager świetnie (chociaż czasami z małymi odstępstwami) nadaje się do zintegrowania z Google Analytics.

Instalacja Google Analytics przez Google Tag Managera

Poniżej przedstawiłem przykładową konfigurację Analyticsa przy pomocy Tag Managera oraz zademonstrowałem w jaki sposób możemy śledzić zdarzenia, bez bezpośredniego ingerowania w kod strony.

Krok 1: Zmienna z identyfikatorem śledzenia

Najlepszym pierwszym krokiem będzie utworzenie zmiennej, którą będziemy wykorzystywać we wszystkich tagach używających Google Analytics.

Wchodzimy w sekcje “Variables” i klikamy na “New”. Wpisujemy nazwę, np. “Google Analytics ID”. Jako typ zmiennej wybieramy  “Google Analytics Settings”, a w polu “Tracking ID” wpisujemy wygenerowany w Analyticsie unikalny klucz. Ostatnim krokiem jest zapisanie zmiennej.

Krok 2: Dodanie podstawowego tagu Google Analytics

Przechodzimy do sekcji “Tags” i klikamy na “New”. Wpisujemy nazwę np. “Google Analytics Tag”. Klikamy w pierwszy box, aby wybrać typ tagu. W omawianym przykładzie wybieramy “Universal Google Analytics. Powinny pokazać nam się nowe pola w formularzu. Jako, że chcemy śledzić wyświetlenia stron, wybieramy  typ śledzenia: “Page View”. W polu “Google Analytics Settings” wybieramy nazwę zmiennej zdefiniowanej w kroku pierwszym.

To prawie wszystko, musimy jeszcze tylko ustawić regułę, według której będzie uruchamiał się nasz tag. Klikamy w drugi box i wybieramy regułę “All Pages”. Gwarantuje ona nam to, że na każdej podstronie, na której jest wywoływany kod Google Tag Managera zostanie również uruchomiony tag Analyticsa.

Krok 3: Zdefiniowanie reguły dla zdarzenia (eventu)

Na potrzeby artykułu załóżmy, że chcemy wysyłać zdarzenie do Google Analytics’a za każdym razem gdy ktoś kliknie w przycisk “Aplikuj teraz” w ogłoszeniach o pracę w serwisie Product Vision. Przed utworzeniem tagu najlepiej jest przygotować sobie regułę, która będzie aktywowała tag. Przechodzimy do sekcji “Triggers” i tam klikamy przycisk “New”.

Pierwszym krokiem jest podanie nazwy reguły. Nie spotkałem się tutaj z jakimś powszechnym wzorem, ale sam staram się zarówno reguły jak i tagi dla zdarzeń nazywać podając kategorię, akcję i label zdarzenia oddzielone myślnikami. Dzięki temu zachowujemy spójność pomiędzy Analyticsem, a Tag Managerem i łatwo nam jest odnaleźć poszukiwany przez nas Event.

Dokumentacja zdarzeń, opisywana przez Olgę w poprzednim artykule, przydaje nam się wtedy również do odnalezienia reguł lub tagów, powiązanych ze zdarzeniami. Jako typ reguły wybieramy “Click – all elements”. Nie chcemy jednak, aby wszystkie kliknięcia na stronie wysyłały do nas zdarzenie, zaznaczamy więc “Some clicks”. Po wybraniu tej opcji dostajemy dostęp do tworzenia warunków. Nasz button na stronie jak i w kodzie prezentuje się następująco:

Najprostszym warunkiem będzie sprawdzanie tekstu w jaki kliknął użytkownik, wybieramy więc “Click Text”, warunek logiczny “equals” i wartość “Aplikuj teraz”. W zasadzie taki warunek zagwarantuje nam już to, że wybrany przez nas tag będzie uruchamiany. Niestety w innej części strony może też się znajdować przycisk “Aplikuj teraz” niezwiązany z ofertami pracy (np. w ramach zapisów na szkolenie). Warto jest więc dodać kilka więcej warunków, które zabezpieczą nas przed błędnym uruchamianiem reguł, a w konsekwencji tagów.

W omawianym przykładzie możemy zauważyć, że oferty pracy posiadają słowo “jobs” w adresie. Klikając na przycisk z plusem dodajemy kolejny warunek. Wybieramy “Page Path”, “contains” i wpisujemy “jobs”. Dodatkowo sprawdzając kod html odpowiedzialny za wyświetlenie przycisku, możemy zaobserwować, że posiada on dwie klasy css – “button” oraz “apply-main-button”. One również mogą nam pomóc jako warunek uruchamiający regułę. Pełna reguła wraz z warunkami powinna wyglądać tak jak na screenie poniżej:

Krok 4: Utworzenie tagu wysyłającego zdarzenie

Przechodzimy do sekcji “Tags” i wybieramy “New”. Nazwę podajemy taką samą jak dla reguły (“Job offer – Apply – Bottom orange button”). Jako typ tagu wybieramy tak jak w kroku drugim “Universal Google Analytics”, ale tym razem nie chcemy zliczać wyświetleń stron, a wysyłać zdarzenia, więc w menu wybieramy “Event”. Po wybraniu tej opcji, powinny pojawić się nam dodatkowe pola tekstowe pozwalające zdefiniować parametry zdarzenia. Podajemy tutaj Category, Action, Label, Value oraz wskazujemy nasz identyfikator śledzenia. Ostatnim krokiem jest wybranie reguły, która ma uruchamiać wysłanie zdarzenia. Klikamy w box i wybieramy poprzednio zdefiniowaną regułę (“Job offer – Apply – Bottom orange button”). Tak zdefiniowany tag zapisujemy.

Krok 5: Sprawdzenie, a następnie publikacja zmian

Przed opublikowaniem zmian warto je przetestować. Można to zrobić klikając w przycisk “Preview”. Dzięki temu w naszej przeglądarce zostaje zapisane ciasteczko, które otworzy widget Tag Managera na stronie, nad którą aktualnie pracujemy. Możemy w nim testować nasze reguły i tagi, sprawdzać poprawnie zdefiniowaliśmy warunki oraz upewnić się czy tagi zawsze uruchamiają gdy tego oczekujemy.

Gdy jesteśmy pewni, że wszystko działa tak jak należy, możemy opublikować zmiany na produkcji. Wracamy do Google Tag Managera, klikamy w duży niebieski przycisk “Submit”. Możemy tutaj podać informację o wersji:  “Version name” oraz “Version description”, które nie tylko może być przydatne gdy pracujemy w GTM z innymi osobami, ale również gdy będziemy chcieli cofnąć zmiany. Po kliknięciu przycisku “Publish” nasze tagi zostają opublikowane. Gratulacje, właśnie samodzielnie podpiąłeś\łaś Google Analyticsa i pierwsze zdarzenie bez pomocy programistów 🙂

Łyżka dziegciu i zakończenie

Pomimo tego, że Google Tag Manager pozwolił mi w wielu sytuacjach, bez ingerencji w kod, opomiarować produkt i szybko ruszyć z podstawową analityką, nie jest niestety pozbawiony wad. Dużo tutaj zależy od budowy aplikacji, tak też np. klasyczne formularze jest łatwo podejrzeć i nawet skorzystać z przesłanych wartości, to niestety przy asynchronicznej komunikacji aplikacji z serwerem nie jest już tak dobrze. Różnie też GTM radzi sobie z zagnieżdżonymi elementami html.

Zdarza się czasami, że Tag Manager rozróżnia kliknięcie w tekst przycisku oraz w jego tło, przez co musimy stworzyć dwie reguły dla jednego przycisku. Nie zmienia to jednak faktu, że jest to bardzo przydatne i rozbudowane narzędzie, które umożliwia nie tylko szybkie dodawanie zdarzeń, ale też innych tagów – usług, z których chcemy skorzystać w produkcie (np. ankiety, nagrywanie sesji użytkowników, narzędzia marketingowe).

Szczególnie przydatny może się okazać w starych produktach, gdzie wprowadzenie każdej zmiany, nawet tak z pozoru prostej jak dodanie zdarzenia po kliknięciu w przycisk, może być czasochłonne, a co za tym idzie kosztowne.