Wszystko, co chcielibyście wiedzieć o Google Tag Manager, ale boicie się zapytać

– Google Tag Manager? Czy to w ogóle jest warte artykułu? – zdziwił się ostatnio ktoś bliski. Cóż, nawet Ci, którzy na co dzień zajmują się marketingiem internetowym, często postrzegają to narzędzie jak prostą „skrzynkę” do wrzucania skryptów na stronę. Jak drogę na skróty, która pozwala zaoszczędzić czas, gdy o pomoc programistów trzeba walczyć jak o niepodległość. Tymczasem Google Tag Manager (GTM) to prawdziwy „kombajn”, który – odpowiednio użyty – może wznieść Twój e-marketing na zupełnie nowy poziom.

Po co mi Google Tag Manager?

Tylko pomyśl, ile czasu czekałeś ostatnio na wdrożenie nawet najmniejszej zmiany w kodzie lub dodanie nowego skryptu marketingowego… Ile dni (tygodni?) minęło, zanim Twój nowy pomysł wszedł w życie… A przecież czas to pieniądz!

Na szczęście dzięki GTM w kilka minut sam wstawisz lub zmodyfikujesz praktycznie każdy skrypt śledzący (również nie dostarczany przez Google). Co więcej, bez rozległej wiedzy programistycznej ustawisz dla niego nawet najbardziej wyrafinowaną regułę uruchamiania. Chcesz wywoływać kod remarketingowy kiedy ktoś kliknie przycisk „Dodaj do koszyka”? Nie ma sprawy! A może wolisz odpalać go tylko dla tych, którzy przybyli na Twoją stronę z newslettera i oglądali produkt z wybranej kategorii? Załatwione!

Słuchaj „Marketer+” Podcast

Jedyne, w czym muszą Ci pomóc programiści, to jednorazowe dodanie na stronie skryptu GTM i – ewentualnie – przekazanie za pomocą tzw. warstwy danych dodatkowych informacji, które mają trafić do Google Analytics lub innych narzędzi analitycznych i marketingowych.

Dodatkową korzyścią ze stosowania GTM jest zwiększenie wydajności (szybkości) witryny. Zgodnie z badaniami amerykańskiej firmy Econsultancy, na przeciętnej stronie internetowej można znaleźć tagi od czternastu różnych usługodawców. Każdy z nich spowalnia ładowanie strony, a to nie wpływa dobrze na satysfakcję jej użytkowników… W Google Tag Manager skrypty są ładowane asynchronicznie – szybciej ładujące się tagi nie muszą czekać na te, które ładują się wolniej. A więc GTM pomoże Ci zaoszczędzić nie tylko czas działu IT :).

Brzmi dobrze, prawda? A więc do dzieła: z tego artykułu dowiesz się wszystkiego, co będzie Ci potrzebne na dobry start w pracy z Google Tag Managerem.

Kontenery, reguły, makra – z czym to się je?

Zacznijmy jednak „od początku” i rzućmy okiem na strukturę Google Tag Managera, która składa się z kilku elementów: konta, kontenera, tagów, reguł i makr.

[opis]Struktura Google Tag Managera[/opis]

[zrodlo]Materiały własne[/zrodlo]

Dla każdej zarządzanej przez nas witryny (albo aplikacji – w końcu mamy kolejny już „rok mobile”) możemy stworzyć tzw. kontener, czyli właśnie naszą wirtualną „skrzynkę”, do której będziemy wrzucać kolejne skrypty. Od strony technicznej kontener (ang. container) jest po prostu fragmentem kodu JavaScript, który powinniśmy umieścić na wszystkich podstronach naszej witryny tuż pod znacznikiem.

Teoretycznie jeden kontener możemy wykorzystać na kilku witrynach, ale wtedy nieźle nagimnastykujemy się przy zarządzaniu regułami. A że jestem zwolenniczką ułatwiania sobie życia, proponuję przyjąć zasadę: 1 witryna/aplikacja = 1 kontener.

Skrypty w nomenklaturze GTM nazywamy tagami. Tag jest więc fragmentem kodu, który przesyła jakieś informacje do stron trzecich (np. do Google). Przykładowe tagi to: kod śledzenia Google Analytics, kod konwersji Google AdWords czy kod dostawcy usług retargetingowych.

Tagi są zazwyczaj wykonywane/uruchamiane podczas ładowania strony lub w odpowiedzi na interakcje na stronie (np. kliknięcie). W GTM, to kiedy i na jakich stronach mają być wykonywane konkretne tagi możemy określić za pomocą reguł (w nowym interfejsie narzędzia zwanych po angielsku triggers). I tu zaczyna się zabawa: ponieważ takie reguły mogą być tworzone na podstawie niemal każdego rodzaju informacji (począwszy od adresu URL strony, przez zdarzenie, a na wartości niestandardowych zmiennych kończąc), mamy naprawdę ogromne pole do popisu. Możemy na przykład zażyczyć sobie, aby tag był uruchamiany:

• gdy adres URL strony odpowiada stronie z podziękowaniem,
• gdy użytkownik trafi na stronę docelową (landing page) z witryny partnerskiej,
• po obejrzeniu filmu wideo,
• gdy użytkownik kupi produkt o określonej cenie
• i w niemal każdej innej sytuacji :).

Ostatnim elementem naszej układanki są tzw. makra (w nowym interfejsie zwane variables), czyli zmienne i ich wartości, które chcemy później wykorzystywać w swoich skryptach i regułach. Przykładami takich zmiennych mogą być chociażby: adres URL, kategoria produktu, źródło odesłania czy autor artykułu. To właśnie dzięki makrom możemy tworzyć wyjątkowo elastyczne reguły uruchamiania tagów albo przekazywać dodatkowe informacje do narzędzi analitycznych. W dalszej części artykułu poświęcimy im trochę więcej uwagi, ale najpierw spróbujmy wdrożyć pierwszy skrypt przez GTM.

Krok po kroku: jak wdrożyć swój pierwszy tag?

Całą procedurę możemy zamknąć w kilku krokach:

1. Utworzenie tagu w Google Tag Managerze i określenie reguł jego uruchamiania – możemy przy tym wykorzystać jeden z wielu gotowych szablonów skryptów lub dodać własny. Zawsze nadawajmy tagom jasne, opisowe nazwy (np. „Kod konwersji Google AdWords”) – znacznie ułatwi nam to późniejsze zarządzanie. Aby skrypt zadziałał musimy też określić dla niego reguły (triggery), czyli wskazać, w jakich sytuacjach Google Tag Manager ma go uruchomić.

2. Testowanie tagu – zanim wdrożymy nasz pierwszy tag, warto sprawdzić, czy wszystko się zgadza. Jedną z moich ulubionych opcji jest możliwość podejrzenia i przetestowania wprowadzonych zmian, jeszcze zanim ostatecznie opublikujemy je na stronie. Dzięki temu możemy zawczasu wyłapać i naprawić ewentualne błędy. Możemy skorzystać z aż 3 sposobów weryfikacji:

• szybki podgląd pozwala wyświetlić podgląd wersji roboczej kontenera na naszej stronie (możemy podejrzeć, jak będzie wyglądała strona po publikacji nowej wersji kontenera);
• jeśli wykorzystamy opcję debugowania, w podglądzie pojawi się dodatkowa konsola z informacją, czy nasz tag zostanie uruchomiony w wyznaczonych przez reguły warunkach;
• jeśli chcemy mieć 200% pewności, że wszystko działa jak trzeba, możemy też przesłać link do podglądu innym osobom (opcja udostępniania) – gdy w niego klikną, specjalny plik cookie włączy tryb podglądu tylko dla ich przeglądarki.

3. Utworzenie nowej wersji kontenera – po przetestowaniu zmian powinniśmy utworzyć nową (zawierającą nasz tag) wersję kontenera – do tej pory pracowaliśmy bowiem na tzw. wersji roboczej. Już po chwili nowo utworzona wersja trafi do zakładki „Wersje”.

4. Publikacja nowej wersji kontenera – kiedy nowa wersja jest już gotowa i ma odpowiednią, opisową nazwę, możemy opublikować kontener z naszym pierwszym tagiem. Et voilà, nasz pierwszy skrypt serwowany przez Google Tag Managera trafił na stronę!

Jakie tagi można wdrażać przez GTM?

Choć Google Tag Manager posiada całkiem sporo szablonów, czasem zdarza się sytuacja, w której musimy wdrożyć jakiś niestandardowy tag, np.: skrypt konwersji Facebook, skrypt systemu remarketingowego, skrypt narzędzia do testów użyteczności i wiele, wiele innych. Większość z nich możemy bez problemu zaimplementować dzięki dwóm dodatkowym typom tagów:

• niestandardowy tag HTML – pozwala zarządzać niemal każdym tagiem HTML/JavaScript (listę nieobsługiwanych typów tagów znajdziesz na: goo.gl/gMEVVd). wkleić w odpowiednie okno zawartość kodu;
• niestandardowy tag graficzny – pozwala zarządzać np. niewidocznymi jednopikselowymi obrazami do śledzenia. Po wybraniu odpowiedniego rodzaju tagu, pojawi się pole, w które po prostu wpisujemy adres URL obrazu (bez parametrów).

„Houston, mamy problem!”, czyli co zrobić, gdy popełnimy błąd?

Jeśli, mimo dokładnego przetestowania zmian, opublikowanie nowej wersji kontenera zakończy się katastrofą, warto mieć w zanadrzu szybkie wyjście z sytuacji. Na szczęście Google Tag Manager podsuwa nam aż dwa:

• przywracanie poprzedniej wersji kontenera (w nowym interfejsie nosi nazwę Edit as a New Version) – świetnie się sprawdzi, jeśli namieszaliśmy w swojej wersji roboczej (czyli tej, w której pracujemy nad tagami), ale jeszcze jej nie opublikowaliśmy. Pamiętajmy przy tym, że jeśli nie chcemy stracić efektów pracy, powinniśmy zaznaczyć opcję tworzenia nowej wersji kontenera na podstawie bieżącej wersji roboczej. Jeśli tego nie zrobimy, wszystkie zmiany w tagach, makrach i regułach, które wykonaliśmy od czasów poprzedniej zapisanej wersji, przepadną;
• publikowanie poprzedniej wersji kontenera – to lepsze wyjście jeśli błędna wersja kontenera powędrowała już w świat i szybko trzeba ugasić pożar. Takie rozwiązanie nie wpłynie za to na naszą wersję roboczą, więc błędy, które zmusiły nas do „akcji ratunkowej” nadal tam będą. Najczęściej więc najlepszym wyjściem będzie połączenie obu scenariuszy.

Warstwa danych – co to takiego i dlaczego powinniśmy ją wdrożyć?

Warstwa danych (dataLayer) to po prostu miejsce, w którym możesz zawrzeć wszystkie informacje, jakie chcesz przekazać do GTM oraz dalej do poszczególnych skryptów i reguł. Jedną z najważniejszych korzyści z warstwy danych jest to, że dzięki niej dane z naszej strony mogą stać się dostępne dla wielu stosowanych przez nas narzędzi analitycznych i marketingowych, bez konieczności podawania ich w kilku różnych formatach. Bardzo obrazowo tłumaczy to Przemysław Modrzewski z Google, porównując dataLayer do uniwersalnej wtyczki, którą możemy kupić na lotnisku i podpiąć ją do dowolnego gniazdka na całym świecie.

Warstwa danych jest elementem, który jest umieszczony w kodzie strony, więc z prośbą o jej stworzenie musisz zwrócić się do programistów. Od strony technicznej warstwa danych to prosty fragment JavaSript. Dane mogą być przekazywane do warstwy na dwa sposoby:

1. przy ładowaniu strony – wówczas nad umieszczamy nad skryptem kontenera tablicę zbudowaną zgodnie ze schematem:

<script>
dataLayer = [{
'nazwa’ : 'wartość’
}];
</script>

gdzie 'nazwa’ oznacza nazwę danej zmiennej (np. 'kategoria’ lub 'nazwa produktu’), a 'wartość’ oznacza wartość, jaką dana zmienna przyjmuje, np.:

<script>
dataLayer = [{
'kategoria’ : 'Płyty CD’
'nazwa produktu’ : 'Pearl Jam Lightning Bolt’
}];
</script>

2. po wykonaniu określonej akcji (np. kliknięciu) – wówczas wykorzystujemy warstwę danych, która jest wbudowana w skrypt kontenera GTM i przekazujemy do niej dane za pomocą metody push, na przykład:

dataLayer.push({’plec’ : 'kobieta’});

Wartości przekazywane w dataLayer można podejrzeć na kilka sposobów – jednym z nich jest zastosowanie wtyczki Tag Assistant.

Magia makra: co możemy wyczarować dzięki zmiennym (makrom)?

O makrach wspominaliśmy już tyle razy, że pewnie nie możesz się już doczekać większej porcji informacji :). Na początek przypomnijmy, że makra to „zmienne wielorazowego użytku”, których wartości możemy później łatwo przekazywać do wielu tagów. Innymi słowy: makra przechowują wartości poszczególnych elementów (np. adresu URL, kategorii produktu, wartości zamówienia, autora artykułu) i pozwalają wykorzystywać je w skryptach i regułach. Makra składają się zawsze z dwóch nawiasów klamrowych oraz nazwy, np.: {{url}} i właśnie w takiej postaci używamy ich przy tworzeniu reguł i tagów.

W Google Tag Managerze niektóre makra są już domyślnie skonfigurowane i automatycznie pobierają swoje wartości, gdy użytkownik odwiedza daną stronę. Inne możemy swobodnie tworzyć sami, pamiętając przy tym, aby ich wartości były przekazywane do GTM. Pełną listę dostępnych rodzajów makr znajdziesz na: goo.gl/GEGBg2.

Jednym z najbardziej praktycznych jest makro na podstawie zmiennej warstwy danych. Pozwala na przesłanie niemal każdej informacji do narzędzi analitycznych (od ceny produktu po nazwisko autora artykułu), a jego utworzenie zajmuje dosłownie dwie minuty. Wystarczy wybrać odpowiedni typ makra, wymyślić dla niego nazwę i podać zmienną, której wartość chcemy „przechwycić” do makra. I gotowe! Na podobnej zasadzie możemy utworzyć makro na bazie elementu DOM lub globalnej zmiennej JavaScript.

Drugim superciekawym typem makra jest tabela przeglądowa (look-up table). Dzięki takiej tabeli możemy stworzyć makro, którego wartość będzie zależna od wartości innego makra, w myśl zasady: „Kiedy {{makro A}} ma wartość X, ustaw wartość {{makro B}} na Y”. Do czego to się może przydać? Mój ulubiony przykład to podmienianie identyfikatora usługi Google Analytics, kiedy pracujemy w trybie debugowania – dzięki temu nie „nabijemy sobie” sztucznie statystyk. Super sprawa! Szczegółową instrukcję wdrożenia (w języku angielskim) znajdziesz na stronie: goo.gl/h78OfI. Inne pomysły na wykorzystanie tabeli przeglądowej to:

• elastyczne zarządzanie Google Tag Managerem na kilku domenach – wówczas tabela przeglądowa pomoże nam zmapować URL hosta z prawidłowym numerem identyfikatora Google Analytics (patrz: goo.gl/5hb7Bf),
• mapowanie ze sobą wybranej metody dostawy i jej kosztów,
• przekazywanie zróżnicowanych wartości celu w Google Analytics.

Śledzenie zdarzeń: co można zrobić bez i z pomocą programisty?

Jeśli pracujesz już jakiś czas z Google Analytics, na pewno zdajesz sobie sprawę, jak ważna jest możliwość mierzenia czegoś więcej niż samych odsłon. Na naszych stronach jest cała masa elementów, które wpływają na jej skuteczność: filmy, symulatory, kalkulatory, tzw. slidery, gry, przyciski, pliki do pobrania…

Jak zmierzyć te wszystkie niestandardowe (a przecież bardzo częste!) interakcje ze stroną? Oczywiście za pomocą zdarzeń! W Google Tag Managerze zdarzenia możemy śledzić aż na dwa sposoby: automatyczny (hurra! nie wymaga edycji kodu!) i tradycyjny (pomoc IT będzie potrzebna, ale w zamian otrzymujemy większe możliwości konfiguracji). Każdy z nich ma duże zalety, dlatego omówimy sobie obydwa :).

Automatyczne śledzenie zdarzeń

Brzmi jak spełnienie marzeń, prawda? Koniec z walką o czas programistów, koniec z przekonywaniem, że „to naprawdę bardzo ważne i musimy to wdrożyć”! Od tej pory wiele zdarzeń możemy zmierzyć zupełnie sami . Wszystko dzieje się przy wykorzystaniu tzw. odbiorników (ang. listeners), które rejestrują informacje o tym, że na stronie miało miejsce np. wypełnienie formularza czy kliknięcie w link. W praktyce odbiorniki to po prostu tagi odbierające sygnały ze strony i automatycznie przesyłające informacje o zdarzeniu do warstwy danych. Takie zdarzenie GTM możemy później wykorzystać w tagach i regułach.
[opis]Proces automatycznego śledzenia zdarzeń[/opis]

[zrodlo] Materiały własne[/zrodlo]

Sprytne! Pełną instrukcję wdrożenia tego rozwiązania znajdziesz na stronie: goo.gl/UPxqHF.

Pamiętaj jednak, że zdarzenie Google Tag Manager to nie to samo, co zdarzenie Google Analytics. Te GTM-owskie możesz wykorzystać na wiele sposobów i przekazywać dane do wielu systemów analitycznych! Na podstawie zdarzeń (np. kliknięcia przycisku „Dodaj do koszyka”) możesz też niemal dowolnie tworzyć reguły uruchamiania tagów. Ogranicza Cię tylko Twoja pomysłowość!

Tradycyjne śledzenie zdarzeń

Jeśli automatyczne śledzenie zdarzeń nie wyczerpuje Twoich potrzeb, albo jest niemożliwe z uwagi na to, jak jest napisany kod źródłowy, istnieje jeszcze drugie wyjście! Możesz poprosić swój dział IT o dodanie fragmentu kodu JavaScript, który za pomocą funkcji push przekaże odpowiednie wartości do warstwy danych. A kiedy już tam trafią, wystarczy stworzyć na ich podstawie makra i wykorzystywać je w tagach i regułach.

[opis] Proces tradycyjnego śledzenia zdarzeń[/opis]

[zrodlo]Materiały własne[/zrodlo]

Gotowy kod wygląda bardzo podobnie do skryptu śledzenia zdarzeń Google Analytics, ale jeśli chcesz przesłać dane do GA, musisz dodatkowo utworzyć odpowiednie makra dla kategorii, akcji i etykiety oraz dedykowany tag zdarzenia. Szczegółową instrukcję wdrożenia (w języku angielskim) znajdziesz na stronie: goo.gl/oXHxEG.

GTM dla aplikacji: dlaczego to prawdziwa rewolucja?

Nie będzie w tym ani krzty przesady, jeśli napiszę, że Google Tag Manager dla aplikacji mobilnych jest narzędziem prawdziwie rewolucyjnym. Dlaczego? Ponieważ GTM pomaga zarządzać nie tylko tagami i kodami śledzącymi. On pomaga zarządzać samą aplikacją i wprowadzać w niej zmiany!

Jak słusznie podkreśla Przemysław Modrzewski, w momencie ściągnięcia przez użytkownika naszej aplikacji, w pewien sposób tracimy nad nią kontrolę. Możemy wprowadzić do niej nowe funkcje i usprawnienia, ale za każdym razem musimy ponownie opublikować jej nową wersję, przejść proces weryfikacji w sklepie z aplikacjami i – co może nawet najtrudniejsze – namówić użytkowników do jej pobrania.

Tymczasem Google Tag Manager pozwala wprowadzać wiele zmian w appce nawet po jej pobraniu, bez proszenia kogokolwiek o ściągnięcie nowszej wersji. Cała tajemnica polega na tym, że zamiast definiować określone wartości w aplikacji na sztywno, nadajemy im charakter dynamiczny. Potem za pomocą GTM wygodnie zarządzamy regułami, od których zależą zmiany tych wartości.
W ten sposób możemy zmieniać na przykład: wymiary i lokalizacje reklam, ustawienia gier (np. nagrody, liczba „żyć”, poziomy trudności), ustawienia interfejsu użytkownika, elementy wizualne (np. na okoliczność „gwiazdkowego” layoutu).

Jak to dokładnie działa? Przy okazji wdrażania GTM-a w naszej aplikacji, wybieramy domyślny kontener do wdrożenia w aplikacji, w którym ustawiamy domyślne wartości konfiguracyjne. Będą one obowiązywały do czasu, aż aplikacja połączy się z internetem i pobierze kolejną, uaktualnioną wersję kontenera. Jak często aplikacja będzie sprawdzała dostępność nowszej wersji kontenera? Zwykle co dwanaście godzin, więc nasze zmiany mają szansę całkiem szybko trafić do użytkowników .

Jeśli podobają Ci się możliwości Google Tag Managera dla aplikacji, szczegółowe instrukcje implementacyjne znajdziesz pod adresem: goo.gl/oxrJno.

Jak widzisz, Google Tag Manager może zaoferować Ci znacznie więcej niż szybkie wdrażanie nowych skryptów. Wystarczy poświęcić mu trochę czasu, a Twój marketing internetowy zmieni się nie do poznania :). Powodzenia!

[kreska]Warto doczytać:

1. P. Modrzewski, „Google Tag Manager dla nie-programistów”.
2. Blog Simo Ahavy.