1

Google Tag Manager w sklepie internetowym

W naszym cyklu poświęconym usłudze Google Tag Manager (GTM) przedstawiliśmy już wprowadzenie do tej usługi.

W kolejnej części pokażemy, co trzeba zrobić, aby uruchomić Google Analytics w sklepie internetowym, wykorzystując do pomocy GTM.

Zaczniemy od podstaw, czyli przygotowania mechanizmu, dzięki któremu będą zliczane transakcje.

Potem jednak przygotujemy kilka dodatkowych funkcji, które pozwolą nam lepiej rejestrować zachowania użytkowników w sklepie i podejmować odpowiednie działania zwiększające konwersje.

1Jak uruchomić zliczanie transakcji

canva_transakcje

Uruchomienie mechanizmu ecommerce w Google Analytics może być łatwe lub dosyć trudne, w zależności od użytego oprogramowania sklepu internetowego.

Największe wyzwanie polega na tym, że dane o transakcji trzeba przekazać do GTM za pomocą obiektu dataLayer. Brzmi skomplikowane, ale w praktyce to dosyć prosty kawałek kodu javascript, w którym zapisujemy informacje o transakcji użytkownika.

Dane muszą być przekazane w określony sposób, dzięki któremu poszczególne wartości zostaną automatycznie rozpoznane.

Niektóre platformy sklepowe są już przygotowane do obsługi GTM, albo przynajmniej mogą być rozbudowane z pomocą odpowiednich wtyczek.

W innych przypadkach wbudowanej obsługi GTM jeszcze nie ma, w związku z czym konieczne będzie wsparcie programisty, który przygotuje odpowiedni fragment kodu.

1.1. Dane transakcji przekazane do GTM ze strony potwierdzenia płatności

Na stronie potwierdzenia płatności musimy utworzyć obiekt dataLayer o konstrukcji takiej, jak w przykładzie poniżej:

Kilka słow wyjaśnienia. W pierwszym kroku tworzymy tablicę, do której przekazujemy informacje o wszystkich produktach zakupionych w danej transakcji. Jeżeli jest ich kilka, fragment kodu „gtm_products.push({ … });” musi zostać wykonany w pętli tyle razy, ile mamy produktów w koszyku. W kolejnym kroku ustawiamy wartości zmiennych zgodnie z wymogami GTM. Przekazujemy identyfikator transakcji, cenę całkowitą zakupu, informacje o kosztach dostawy itd. Całość uzupełniona jest o przygotowaną wcześniej tablicę ze szczegółową listą produktów. Warto zwrócić uwagę, że ustawiamy też zdarzenie (event), które w naszym przykładzie nazywa się „trackTrans”. To bardzo wygodny sposób, aby potem łatwo wywołać odpowiedni tag zliczający transakcję w Google Tag Managerze. Wiele sklepów ma różne adresy kończące transakcję, w zależności od wybranej kombinacji płatności i typu dostawy. Dzięki zastosowaniu zdarzenia, nie będziemy musieli definować skomplikowanych reguł bazujących na adresach URL.

1.2. Dodanie tagu transakcji w Google Tag Managerze

Gdy obiekt dataLayer wywołuje się już na stronie potwierdzenia transakcji, czas dodać odpowiedni tag w GTM, przekazujący dane transakcji do Google Analytics. Jako typ tagu wybieramy „Klasyczne Google Analytics” lub „Universal Analytics”, w zależności od tego, jakie wdrożenie GA mamy przygotowane na stronie. Z rozwijanej listy „Śledź Rodzaj” wybieramy opcję „Transakcja”. ecommerce_tag Musimy też utworzyć nową regułę uruchamiającą nasz tag. Ponieważ wcześniej przygotowaliśmy odpowiednie zdarzenie, to reguła jest bardzo prosta: trackTrans Zapisujemy nowy tag, tworzymy nową wersję kontenera i publikujemy ją.

1.3. Testowanie wdrożenia

Czas wykonać testową transakcję i sprawdzić, czy rejestruje się ona w Google Analytics. Jeżeli mechanizm nie działa, w pierwszej kolejności warto sprawdzić, czy na pewno wszystkie pola nazywają się tak, jak w podanym powyżej przykładzie (czyli transactionId, transactionTotal, transactionProducts, itd.). Drobne błędy czy literówki w nazwach tych pól sprawią, że dane o transakcji nie zostaną automatycznie rozpoznane. Jeżeli jesteśmy pewnie, że wszystko jest przygotowane poprawnie, a transakcje wciąż się nie zliczają, w kolejnym kroku powinniśmy skorzystać z mechanizmu debuggowania, który jest wbudowany w GTM. W tym celu klikamy w przycisk Podgląd i potem Debuguj. Spowoduje to, że na dole strony, w której zainstalowany jest kontener GTM, pojawi się dodatkowa ramka, pokazująca, które dokładnie tagi zostały uruchomione. Wykonujemy jeszcze jedną transakcję testową i upewniamy się, że tag rejestrujący transakcję faktycznie jest wywoływany na stronie podziękowania za zakupy. Jeżeli nie jest, to sprawdzamy i poprawiamy odpowiednio reguły uruchamiania tagu.

2 Śledzenie kliknięć w przycisk „Do koszyka”

Fakt, że użytkownik dodaje produkt do koszyka, znacznie podnosi szansę, że dokona ostatecznie zakupu. Z drugiej strony, wciąż nie ma gwarancji, że dojdzie do transakcji. Nasze analizy w wielu sklepach pokazują, że często zaledwie ok. 1/3 osób, które dodają produkty do koszyka, dokonuje zakupu od razu. Oznacza to, że 2/3 nie zostały naszymi klientami, przynajmniej nie w danej chwili. Do tych osób możemy i powinniśmy skierować kampanie remarketingowe, aby przyciągnąć je do naszego sklepu. Pytanie jednak brzmi: jak wyodrębnić grupę tych osób i stworzyć odpowiedni segment, na bazie którego przygotujemy listę remarketingową? Trudność polega na tym, że wiele nowoczesnych sklepów obsługuje dodanie produktu do koszyka za pomocą mechanizmów ajaksowych – nie następuje przeładowanie całej strony i zmiana adresu. Oznacza to, że zwykła analiza odwiedzanych stron niewiele pomoże – konieczne jest śledzenie kliknięć w przycisk „dodaj do koszyka”. Na szczęście jest to bardzo proste z użyciem GTM.

2.1. Odbiornik kliknięć

W pierwszym kroku musimy dodać nowy tag – odbiornik kliknięć. Bardziej szczegółowo zasadę działania odbiorników opisujemy w poprzednim tekście. Po dodaniu odbiornika (z regułą, która odpala go na wszystkich stronach), utworzeniu nowej wersji kontenera i opublikowaniu jej, przechodzimy do sklepu, znajdujemy dowolną stronę z produktem, klikamy „Do koszyka” i uruchamiamy konsolę w przeglądarce. Wyszukujemy w konsoli obiekt dataLayer i szukamy obiektu przypisanego do zdarzenia gtm.click, czyli kliknięcia na naszym przycisku. Jeżeli mamy odrobinę szczęścia, to w linijce „element id” albo „element classes” znajdziemy identyfikator lub klasy, które jednoznacznie identyfikują przycisk dodania do koszyka. click_w_konsoli

2.2. Zdarzenie wysyłane do Google Analytics

W tym momencie jesteśmy już gotowi, żeby dodać kolejny tag Google Analytics, wysyłający zdarzenie do Google Analytics. Jako rodzaj śledzenia wybieramy Zdarzenie, co wyświetli dodatkowe pola do uzupełnienia. W polu Kategoria wpisujemy np. „Koszyk”, w polu Działanie „Dodano do koszyka”, a w polu etykieta np. wbudowane makro {{url}}, dzięki czemu będziemy widzieli, z których podstron serwisu użytkownicy dodają produkty do koszyka. dodawanie_do_koszyka Pozostaje ustalić warunki, kiedy dane makro ma się uruchomić. Zakładając, że przycisk dodawania do koszyka ma klasę np. „add-to-cart”, wówczas tworzymy nową regułę, w której znajdą się dwa warunki: regula_koszyka Tworzymy nową wersję kontenera, publikujemy i gotowe. Każde kliknięcie w przycisk dodawania do koszyka będzie rejestrowane jako zdarzenie w Google Analytics, a my będziemy w stanie na podstawie tych zdarzeń utworzyć listę remarketingową. Najprostszy przykład to lista osób, które dodały produkt do koszyka, ale nie dokonały transakcji. Jej konfiguracja w GA mogłaby wyglądać następująco: remarketing_segment Bardziej zaawansowany przykład to rozwinięcie pierwszej listy, gdzie dzielimy użytkowników na listy w zależności od tego, z której kategorii produkty dodawali do koszyka. Kategorię możemy często rozpoznać na podstawie adresu zdarzenia, zapisywanego w jego etykiecie.

3 Oznaczenie kategorii stron

Jeżeli planujemy wykorzystać w promocji naszego sklepu bardziej zaawansowane metody retargetingowe (dynamiczny remarketing w Google, Criteo, Quartic czy podobne), to będziemy musieli przekazać do odpowiednich skryptów informację o tym, na jakiego typu podstronie znajduje się użytkownik w danym momencie (strona główna, kategorii, produktu, koszyk, itd.). Możemy sobie bardzo uprościć wszystkie przyszłe wdrożenia, jeśli do obiektu dataLayer przekażemy odpowiednie informacje. Jest to oczywiście krok opcjonalny, ale bardzo zalecamy jego przeprowadzenie. W praktyce wygląda to następująco:

Parametr pageType powinien przybierac? jedna? z poniz?szych wartos?ci:

  • home,
  • searchresults,
  • category,
  • product,
  • cart,
  • purchase,
  • other

Cart to podsumowanie koszyka, purchase to podzie?kowanie za zamo?wienie, other to wszystkie strony, kto?re nie wpisuja? sie? w pozostałe.

Podane wartości są zgodne ze specyfikacją Google do konfiguracji dynamicznego remarketingu.

4 Śledzenie filtrów w sklepie

Obecne platformy sklepowe pozwalają korzystać z dużej liczby filtrów i opcji sortowania, które w założeniu pomagają użytkownikom dotrzeć precyzyjnie do wybranych produktów.

Z punktu widzenia właściciela sklepu, byłoby dobrze wiedzieć, które filtry są używane najczęściej – to mówi nam wiele o preferencjach klientów.

Oczywiście dane takie można częśto wyciągnąć na podstawie analizy URLi w Google Analytics, ponieważ filtry zwykle powodują przeładowania stron i dopisują się w adresie, ale dużo łatwiej i przyjemniej jest, gdy możemy sobie ich użycie rejestrować jako zdarzenia i zbierać w czytelne raporty.

Posłużmy się przykładem rozwijanej listy, która pozwala zmnienić sposób sortowania produktów na stronie kategorii (od najtańszych, od najdroższych, od najpopularniejszych itd.).

Problem polega na tym, że nie możemy posłużyć się prostym odbiornikiem kliknięć z GTM, ponieważ wtedy rejestrowalibyśmy opcję już wybraną, a my chcemy rejestrować tylko fakt, że wybrana opcja się zmieniła (np. użytkownik przełączył sortowanie z najdroższych na najtańsze produkty).

W naszych wdrożeniach wykorzystujemy w tym celu dwa tagi.

4.1. Skrypt jQuery, który wykrywa zmianę opcji w rozwijanych listach

Pierwszy element to kawałek kodu jQuery, który wykrywa, że zmieniła się opcja wybrana w konkretnej liście rozwijanej. Kod w przykładowym wdrożeniu wygląda jak poniżej.

Kilka słów komentarza.

Po pierwsze, ten przykład zakłada, że na stronie jest używane jQuery. Na szczęście, w wielu przypadkach ten warunek jest spełniony.

Po drugie, nie chcemy, żeby nasze skrypty jQuery uruchamiały się, dopóki nie załaduje się cały kod strony (DOM), dlatego w regułach uruchomienia wykorzystamy zdarzenie gtm.dom, które jest uruchamiane, gdy cała strona jest wczytana.

Po trzecie, selektor jQuery (czyli „section.sort-by > select.options”) będzie na pewno inny w Waszych wdrożeniach. W naszym przykładzie jest to po prostu znacznik select klasą „options”, osadzony w znaczniku section z klasą „sort-by”, ale to bardzo indywidualna kwestia.

W momencie, gdy zmieni się opcja tego elementu, uruchomiony zostanie kod znajdujący się w .change(…).

Kod ten ustawia zdarzenie GTM („sortowanie”) i zapisuje wartość nowej opcji, która została wybrana.

Oczywiście samo zdarzenie, jak i wartość wybranej opcji są przekazywane do obiektu dataLayer.

Powinniśmy zadbać o to, żeby kod ten uruchamiał się tylko na tych stronach, gdzie występuje taka opcja sortowania. Odpowiednie warunki można skonfigurować w regułach uruchamiania tagu. W jednym z naszych przypadków reguła ta wyglądała następująco:

regula_sortowania

Jak widać, wykluczamy strony, których adresy kończą się wzorcem typu 534543.html – czyli identyfikator produktu i potem rozszerzenie html. Są to strony produktów, na których nie ma opcji sortowania.

W swoich wdrożeniach musicie zadbać o opracowanie odpowiednich reguł.

4.2. Przekazanie wybranej opcji sortowania jako zdarzenia do Google Analytics

Tworzymy nowe makro, nazywamy je „opcja_sortowania”. Wybieramy „Zmienna warstwy danych” jako typ makra, a w polu Nazwa zmiennej warstwy danych wpisujemy „opcja_sortowania”.

Jest to oczywiście zgodne z tym, co zakodowaliśmy krok wcześniej w naszym skrypcie jQuery, który przekazuje wartość wybranej opcji do pola „opcja_sortowania” w obiekcie dataLayer.

makro_sortowanie

Tworzymy nowe tag Google Analytics, ustawiając jego rodzaj na Zdarzenie.

W polu Kategoria ustawiamy „układ strony kategorii”, w polu Działanie wpisujemy „sortowanie”, a w polu Etykieta korzystamy z makra {{opcja_sortowania}}.

event_sortowanie

Musimy jeszcze określić, kiedy ten tag ma być uruchamiany. To na szczęście jest bardzo proste. Tworzymy nową regułę „sortowanie”, w której definiujemy jeden warunek:

regula_sortowania1

Zapisujemy wszystko, tworzymy nową wersję kontenera i publikujemy ją.

Jeśli wszystko zrobiliśmy poprawnie, to po jakimś czasie (gdy zbiorą się dane), w Google Analytics będziemy mogli zobaczyć raport podobny do poniższego.

raport_sortowania

Widać jak na dłoni, które opcje sortowania są najpopularniejsze.

Na tej podstawie można podjąć szereg dodatkowych działań:

  • Uruchomić testy A/B, gdzie najpopularniejsza opcja sortowania staje się domyślną
  • Przygotować listy remarketingowe na podstawie wybranej opcji sortowania, a następnie odpowiednio dopasować komunikaty reklamowe – inne do osób sortujących od najtańszych produktów, inne do osób szukających najnowszych itd.

5 Podsumowanie

Ze wszystkich opisanych w tym odcinku kroków, konieczne w sklepie internetowym jest tylko wdrożenie śledzenia transakcji.

Wszystkie pozostałe pomysły są opcjonalne, ale pozwolą nam pozyskać dużo głębszą wiedzę o użytkownikach.

Z drugiej strony, te pomysły mają też posłużyć jako inspiracja do dalszych poszukiwań, bo lista możliwości jest znacznie, znacznie dłuższa.

Oto kilka pomysłów, które możecie rozgryzać sami, a my być może niektóre z nich opiszemy w kolejnych odcinkach:

  • Śledzenie użytkowników zalogowanych i niezalogowanych
  • Zapisywanie konkretnych atrybutów produktów, które przeglądają użytkownicy (np. kolorów ubrań) do dodatkowych wymiarów lub zmiennych niestandardowych
  • Wykorzystanie GTM do uruchamiania dynamicznych formularzy (np. do gromadzenia adresów email), które odpalają się w ściśle określonych warunkach.

Jeśli macie pomysły na to, co chcielibyście śledzić (lub co już śledzicie) w swoich sklepach internetowych, podzielcie się nimi w komentarzach, a my postaramy się zaprezentować szczegółowe rozwiązania w kolejnych tekstach.

Shares 0
Marcin Lejman
 

Jestem współwłaścicielem Critical.pl. Prowadzę przede wszystkim projekty związane z analityką internetową, optymalizacją konwersji i budową strategii online, a nadzoruję działania SEO i PPC prowadzone przez naszą firmę. Jeśli czujesz, że Twój biznes ma niewykorzystany potencjał i chcesz go rozwinąć, skontaktuj się ze mną - chętnie porozmawiam o możliwościach.

Click Here to Leave a Comment Below 1 comments
Łukasz - 05/12/2014

Swietny artykuł!

Reply

Leave a Reply:

0 Shares