Konfiguracja Google Tag Manager dla eCommerce

modern-analyst-1317115_1280

Pomimo tego, że doczekaliśmy się już drugiej wersji narzędzia Google Tag Manager (GTM), niektóre sklepy internetowe nadal nie wykorzystują jego funkcjonalności. A to błąd, ponieważ GTM niesie ze sobą szeroki pakiet korzyści nie tylko dla wprawnych analityków internetowych, ale także dla osób, które swoją przygodę z eCommerce dopiero rozpoczynają.

Dlaczego miałbym używać Google Tag Manager w moim sklepie internetowym?

Coraz bardziej ograniczone zasoby IT to problem prawie każdego eCommerce. Dotychczas współpraca z programistami była nieodzownym elementem procesu wdrażania analityki internetowej. W przypadku kiedy dział IT jest wąskim gardłem, zmiana chociaż jednej linijki kodu Google Analytics, uruchomienie ankiety na stronie, konfiguracja innych systemów analitycznych, może trwać dniami, a nawet miesiącami. Dzięki GTM dla eCommerce problem ten praktycznie znika – możesz samodzielnie, z dość dużą swobodą, modyfikować kody śledzące w swoim e-sklepie.

Czym jest Google Tag Manager? To system do zarządzania wszystkimi skryptami w serwisie internetowym. Nie tylko takimi jak Google Analytics czy skrypty śledzące konwersję z Google AdWords, ale także, niemal dowolnymi kodami JavaScript – chociażby dla zewnętrznych systemów analitycznych, czy testów A/B lub ankiet użyteczności. Najważniejsze informacje o GTM znajdziesz w naszym wpisie GTM dla początkujących.

Podstawowa konfiguracja Google Tag Manager

Jak wspominałem, obecnie dostępna jest już druga wersja Google Tag Manager, która zyskała dość mocno odświeżony oraz uproszczony interfejs graficzny. Dalsze porady w tym artykule będą właśnie dotyczyć najnowszej wersji GTM.

Rysunek 1. Struktura Google Tag Manager

Rys 1. Struktura Google Tag Manager

Struktura konta GTM (przedstawiona na rys. 1.) składa się z nadrzędnego elementu jakim jest konto użytkownika, w którym to umieszczać można dowolną liczbę kontenerów. Kontenery natomiast przechowują przypisane do nich tagi (np. kod Google Analytics lub Google AdWords), reguły wyzwalające tagi (np. polecenie uruchamiające kod Google Analytics na wszystkich podstronach naszego serwisu) oraz zmienne (o których więcej w dalszej części artykułu).

Przygodę z GTM rozpocząć musimy od założenia konta na stronie tego narzędzia. Proces jest bardzo prosty, stąd nie jest konieczne jego dokładne opisywanie i warto skupić się na etapach dostępnych już po zalogowaniu. Aby założyć konto należy (rys. 2) podać podstawowe dane: nazwę konta i nazwę kontenera oraz wybierać sposób użycia GTM (strona internetowa, aplikacja mobilna iOS lub Android).

Po utworzeniu konta, GTM zaproponuje instalację kodu kontenera w naszym serwisie internetowym. Wyświetlony kod należy wstawić w kod HTML serwisu tuż po otwarciu tagu <body>. Jest to jedyny moment w którym o pomoc możemy być zmuszeni poprosić dział IT. Nic nie stoi oczywiście na przeszkodzie, aby zmiany w kodzie wprowadzić samodzielnie – jeżeli tylko stan naszej wiedzy na to pozwala.

 Rysunek 2. Założenie nowego konta w GTM - Grupa Unity

Rys 2. Założenie nowego konta w GTM

Konfiguracja kodu Google Analytics w Google Tag Manager

Po zainstalowaniu kodu kontenera możemy przystąpić do konfiguracji GTM pod śledzenie statystyk Google Analytics (rys. 3.). Wybieramy opcję dodaj nowy tag, w której możliwe jest wskazanie szerokiej palety dostępnych kodów – jak widać predefiniowano nie tylko kody Google Analytics czy Google AdWords, ale także innych popularnych narzędzi (DoubleClick, LinkedIn, CrazyEgg, czy MouseFlow). My jednak skupmy się na konfiguracji Analytics.

W tym procesie ważne jest więc wybranie właśnie Google Analytics oraz uzupełnienie szczegółowych danych. Należy wpisać identyfikator śledzenia (można go znaleźć na koncie Analytics w formie UA-XXXXXX-XX np. UA-818295-01) i pozostawić opcje śledź typ jako wyświetlenie strony. Warto także zapoznać się z możliwościami ukrytymi pod opcjami więcej ustawień(to tutaj umieszczono zaawansowaną konfigurację tagu) oraz ustawienia zaawansowane. Ostatnim krokiem w procesie jest wybór warunków uruchomienia czyli regułę, która zadecyduje o wyświetleniu danego kodu w serwisie. W przypadku Google Analytics, wybieramy oczywiście opcjęwszystkie strony, gdyż chcemy aby użytkownicy śledzeni byli w każdym miejscu w naszym serwisie.

Po utworzeniu tagu znajdziemy go na liście wszystkich tagów w GTM. Nie jest to jednak koniec naszych działań, gdyż wszystkie dotychczas wprowadzone zmiany znajdują się w roboczej wersji kontenera. Aby je uruchomić należy wybrać opcję opublikuj znajdującą się w prawym, górnym roku ekranu.

Rysunek 3. Konfiguracja Google Analytics w GTM - Grupa Unity

Rys 3. Konfiguracja Google Analytics w GTM

Konfiguracja śledzenia zdarzeń – wysyłka formularza

Jednym z popularniejszych metod wykorzystania Google Analytics (GA) jest śledzenie niestandardowych zdarzeń w serwisie internetowym. W przypadku e-commerce może to być np. wysłanie formularza kontaktowego z pytaniami do obsługi sklepu internetowego. Jak wiemy, GA w podstawowej konfiguracji, nie umożliwia w automatyczny sposób zapisywania tego typu operacji. Korzystając z GTM możemy ustawić takie zdarzenie również bez wprowadzenia kłopotliwych zmian w kodzie HTML.

Proces należy rozpocząć od dodania nowego tagu, podobnie jak wykonywaliśmy to przy dodawaniu tagu GA. Jako produkt wybieramy Google Analytics, wskazujemy typ tagu, wpisujemy identyfikator śledzenia(na rys. 4 skorzystałem z wcześniej zdefiniowanej stałej zmiennej – można oczywiście wpisać identyfikator ręcznie), a jako śledź typ wybieramy zdarzenie.

Rysunek 4. Konfiguracja śledzenia wysyłki formularza GTM - Grupa Unity

Rys 4. Konfiguracja śledzenia  formularza

Wybranie tego typu zdarzenia spowoduje rozwinięcie szczegółowej konfiguracji pól kategoria, działanie, etykieta, wartość. Opcje te służą do kategoryzacji zdarzeń w GA i jeżeli widzisz je po raz pierwszy, warto zapoznać się z ich definicją w artykule pomocy GA. Pola te można uzupełnić „na sztywno” wpisując po prostu określone wartości. Jeżeli jednak posiadamy np. kilka formularzy w obrębie jednego serwisu warto zastosować zmienne które automatycznie pobiorą szczegółowe dane na podstawie treści witryny.

W przypadku formularzy warto skorzystać ze zmiennej, która wskaże nam na jakiej konkretnie stronie użytkownik wypełnił formularz. GTM daje nam możliwość skorzystania z przynajmniej trzech predefiniowanych zmiennych:

Rysunek 5. Konfiguracja zdarzenia GTM

Rysunek 5. Konfiguracja zdarzenia

Na rysunku 5. przedstawiono przykładowo wypełnione opcje kategoria, działanie, etykieta. W tym przypadku GTM przekaże do GA dane o zdarzeniu przypisane do kategorii formularze, działanie wysyłka, a jako etykieta zdarzenia wskazana będzie ścieżka dla podstrony na której wysłano formularz.

W kolejnym kroku procesu musimy skonfigurować warunki uruchomienia tagu na konkretnej podstronie naszego serwisu. GTM proponuje nam predefiniowane typ reguły formularz. Po jego wybraniu przechodzimy do etapu włącz gdy, w którym określamy kiedy dany tag będzie aktywny. W naszym przypadku znów sensowne będzie użycie zmiennych posługujących się adresem URL (Page URL, Page Hostname lub Page Path), które ustawiamy dla konkretnych podstron zawierających śledzony formularz. Należy wtedy wybrać warunek np. Page URL – zawiera – http://www.unity.pl/marketing-w-e-commerce, co spowoduje zapisywanie zdarzeń tylko dla danej podstrony. Możliwe jest również pójście drogą na skróty, czyli ustawienie wywołania tagu dla wszystkich podstron serwisu. W takim przypadku warunek przyjmie ustawienia Page URL – zawiera – *, gdzie symbol gwiazdki będzie dla GTM oznaczał dowolną podstronę.

W kolejnym etapie możliwa jest konfiguracja zapisywania tylko konkretnego formularza. Ustawienie może być pomocne, gdy na jednej podstronie posiadamy kilka formularzy. Należy wtedy poprzez zmienną click class (lub odpowiednio inną) wskazać konkretny formularz. Jako, że artykuł kierowany jest do osób początkujących, nie będziemy rozpatrywać tego przypadku i wybierzemy opcję bez wskazywania konkretnego formularza – warunek powinien więc przyjąć wartość Click Classes – zawiera – *. Podsumowanie naszych ustawień wskazuje rys. 6.

Po przejściu całego procesu wystarczy już tylko zapisać nasz tag i nie zapomnieć o publikacji nowej wersji kontenera, tak aby zmieniony GTM rozpoczął działanie na naszej stronie internetowej.

Konfigurując zdarzenia w Google Tag Manager zapewniamy ich zapisywanie i przekazywanie do Google Analytics. Podgląd zbieranych danych możliwy jest w każdym z raportów (po dodaniu konkretnego zdarzenia do widoku) lub zbiorczo w raporciezachowania > zdarzenia. Nic nie stoi na przeszkodzie, aby zbierane zdarzenia zapisywać po stronie GA jako cele. Należy w takim przypadku przystąpić do konfiguracji celu, wybierając jego właściwości (kategoria, zdarzenie, etykieta) zgodnie z wcześniej zdefiniowanymi w GTM.

Konfiguracja śledzenia zdarzeń – kliknięcia w linki

Jednym z kolejnych, popularnych opcji śledzenia zdarzeń są kliknięcia w linki zewnętrzne. Jak wiemy, Google Analytics nie zapisuje w standardowej konfiguracji danych związanych z kliknięciem linków prowadzących na zewnątrz serwisu. GTM jednak umożliwia badanie tego typu reakcji użytkownika.

Rysunek 6. Konfigurowanie reguły dla formularzy GTM

Rysunek 6. Konfigurowanie reguły dla formularzy

Konfigurację rozpoczynamy podobnie jak w przypadku śledzenia wysyłki formularza, czyli poprzez dodanie nowego tagu. Warto jednak zatrzymać się przy ustawieniu parametrów śledzenia (kategoria, działanie, etykieta), gdyż są one odmienne niż w poprzednim przypadku. Znów możemy użyć znany nam już zmiennych Page Hostname, Page Patch, Pahe URL, jednak w przypadku śledzenia linków (których zwykle jest dużo na danej podstronie) rozsądniejsze wydaje się wyciągnięcie informacji o konkretnym klikniętym linku. W takim przypadku wybrać można inne zmienne korzystające z atrybutów danego linka z kodu HTML:

  • Click Classes – jest to wartość atrybutu CLASS
  • Click ID – pobiera wartość atrybutu ID
  • Click Text – pobiera treść linku
  • Click URL – pobierany adres URL linku

Opierając się na konkretnym przykładzie hiperłącza zdefiniowanego w kodzie HTML jako

<a href=”http://testowylink.pl” id=”A” class=”B”>treść linku</a> nasze zmienne przyjmą wartość:

  • Click Classes = B
  • Click ID = A
  • Click Text = treść linku
  • Click URL = http://testowylink.pl

Jak więc widać, warto przywiązywać dużą wagę do budowania ustrukturyzowanego kodu HTML, gdyż jego zawartość wpływać będzie na łatwość w konfiguracji GTM.

W kolejnym kroku, jako warunek uruchomienia wybieramy kliknij, a następnie przystępujemy do ustawienia reguły uruchomienia. Dodajemy nową regułę w której to możliwe jest wybranie parametru cele jako tylko linki lub wszystkie elementy. W przypadku wyboru tylko linki, GTM będzie rejestrował kliknięcia linków oznaczonych w kodzie HTML jako hiperłącza czyli poprzez zastosowanie tagu <a href=”…”>, zaś w przypadku zaznaczenia wszystkie elementy rejestrowane będą wszystkie kliknięcia użytkowników bez znaczenia, czy element klikalny jest formalnym linkiem.

Przechodząc dalej, podobnie jak poprzednio przystępujemy do konfiguracji warunku (włącz gdy), który definiuje zakres podstron na jakich będziemy mierzyć dane. Sposób ustawień jest analogiczny do mierzenia formularzy. Natomiast w następnym kroku możemy wskazać warunki uruchomienia, czyli konkretne linki które mają zostać odnotowane. W tym przypadku możemy posłużyć się poznanymi już zmiennymi Click Classes, Click ID, Click Text, Click URL.

Podsumowanie

Za nami pierwsze kroki w pracy z Google Tag Managerem w eCommerce. Skonfigurowaliśmy kod Google Analytics oraz zdarzenia zapisu wysyłki formularza i kliknięcia w linki zewnętrzne. Jak jeszcze możemy w popularny sposób wykorzystać GTM dla eCommerce? Lista opcji jest bardzo duża, chociażby wykorzystanie warstwy danych (data layer), czy mierzenie skuteczności formularzy… Więcej o zaawansowanych funkcjach Google Tag Managera, już wkrótce.

CEO w Digital Hill - agencji Performance Marketing dla eCommerce z Grupy Unity. Wcześniej COO w agencji interaktywnej Ideacto z Grupy Divante. Posiada kompetencje z zakresu marketingu efektywnościowego oraz strategii handlu internetowego. Wykładowca akademicki na studiach podyplomowych z zakresu e-marketingu na Uniwersytecie Leona Koźminskiego w Warszawie oraz Akademii Górniczo-Hutniczej w Krakowie. Prelegent na wielu branżowych konferencjach i współautor największej polskiej publikacji o eCommerce – Biblii eBiznesu.

Więcej na naszym blogu...

Zobacz wszystkie posty