Jak wdrożyć enhanced ecommerce poprzez GTM z wykorzystaniem datalayer?

źródło zdjęcia głównego: pexels.com

Dane takie jak, kliki w dowolne elementy umieszczone na stronie, wysłanie formularzy, pobranie plików, możemy zebrać praktycznie sami. Sprawa może skomplikować się jedynie w przypadku uzyskania danych transakcyjnych.

Wiele sklepów korzysta z GTM przy przesyłaniu danych transakcyjnych, jednak nadal robi to w wersji podstawowej nie wykorzystując pełnych możliwości jakie daje GA – dokładne omówienie możliwości jakie ulepszonego ecommerce znajdziecie na stronie.

W tym artykule pokażę wam jak wdrożyć enhanced e-commerce poprzez GTM. Ponieważ część prac wiąże się z umieszczeniem odpowiednich kodów na stronie, poproś kogoś o pomoc, jeśli nie masz odpowiedniej wiedzy.

Wdrożenie śledzenia transakcji w enhanced e-commerce poprzez GTM

Aby cieszyć się z pełnych możliwości ulepszonego ecommerce, pierwszym krokiem jakim powinniśmy wykonać jest oczywiście jego włączenie w Google Analytics

Digital Shelf – nowe pole walki marek. Jak nie utonąć w morzu danych i podejmować lepsze decyzje [WYWIAD]

W Google Analytics jest to „Konfiguracja ulepszonego e-commerce” – wystarczy włączyć tę opcję:

Jej uruchomienie powinno rozszerzyć opcje raportowania e-commerce, gdzie będziemy mieli dostęp np. do promocji wewnętrznych, list produktowych, czy też marek poszczególnych produktów.

Następnie możemy przejść do naszej strony, wdrożyć odpowiednie kody i utworzyć tagi w GTM.

Przekazanie danych do dala layer

Aby poprawnie umieścić dane w data layer musimy pamiętać, aby warstwa danych była umieszczona przed kodem GTM (niby oczywiste, ale nie każdy o tym pamięta). Schemat przekazania danych do GA, wygląda w ten sposób:

Oczywiście, aby przekazać dane do GA, musimy wykorzystać odpowiednie tagi w GTM, ale po kolei ☺

Dane transakcyjne w dataLayer

Aby poprawnie wysyłać informacje o transakcji oraz zakupionych towarach do GA w warstwie danych na stronie z potwierdzeniem zamówienia powinniśmy umieścić poniższy kod:

dataLayer.push({
’ecommerce’: {
’purchase’: {               // Informacje dotyczące samej transakcji
’actionField’: {
’id’: 'T12345′,
’affiliation’: 'Online Store’,
’revenue’: '35.43′,
’tax’:’4.90′,
’shipping’: '5.99′,
’coupon’: 'SUMMER_SALE’
},
’products’: [{ // Informacje dotyczące zakupionych produktów, należy powielić osobno dla każdego kupionego produktu
’name’: 'Triblend Android T-Shirt’,
’id’: '12345′,
’price’: '15.25′,
’brand’: 'Google’,
’category’: 'Apparel’,
’variant’: 'Gray’,
’quantity’: 1,
 'coupon’: ”
 },
{
’name’: 'Donut Friday Scented T-Shirt’,
’id’: '67890′,
’price’: '33.75′,
’brand’: 'Google’,
’category’: 'Apparel’,
’variant’: 'Black’,
’quantity’: 1
}]
}}});

Jest to przykładowa wersja kodu przesyłająca podstawowe informacje o transakcji – kod należy dostosować do własnych potrzeb.

Upraszczając powyższy kod powinien przyjmować postać:

UWAGA

Wiele sklepów opartych jest na gotowych rozwiązaniach CSM, dla których istnieją gotowe moduły lub wtyczki, które przekazują dane transakcyjne do warstwy danych – jeżeli korzystacie z takiego rozwiązania wystarczy w GTM utworzyć odpowiedni tag, który przekaże dane do Google Analytics

Po wdrożeniu, od razu możemy sprawdzić, czy dane na pewno zostały przekazane do warstwy danych i czy poprawnie się w niej wyświetlą. W tym celu możemy wykorzystać GTM, aczkolwiek poprawność danych przekazanych do warstwy danych możemy zweryfikować kilkoma dostępnymi narzędziami np. Google Tag Assistant lub inną wtyczką umożliwiającą podgląd Data Layer, możemy również użyć podglądu w konsoli wykorzystując np. „Narzędzia dla programistów” w przeglądarce Chrome.

Wyświetlenie przykładowych danych transakcyjnych widocznych w GTM:

Podgląd przykładowych danych w Data Layer – widok z wtyczki Google Tag Assisant:

Przesłane obiekty ecommerce widoczne z konsoli:

Budowa tagu ecommerce w Google Tag Manager

Po upewnieniu się, że konstrukcja kodu e-commerce jest poprawna, możemy przejść do zbudowania odpowiedniego tagu GTM, który prześle zmienne transakcyjne do Google Analytics.

W tym celu najlepiej wykorzystać tag „zdarzenie”, który uruchomi się i wyśle dane do GA po zajściu odpowiedniej reguły. W naszym wypadku regułą uruchamiającą tag będzie event o nazwie „Transakcja”. Event ten powinien zostać przesłany równocześnie z obiektem ecommerce, może to wyglądać np. tak:

dataLayer.push({
’event’: 'Transakcja’,
’ecommerce’: {

Następnie w GTM musimy dodać odpowiednią regułę:

Z grupy dostępnych typów reguł wybieramy „Zdarzenie niestandardowe”:

W polu nazwy zdarzenia wpisujemy zdarzenie, które zostało przesłane obok obiektu ecommerce, w naszym przypadku jest to „Transakcja”.

Naszą regułę możemy uzależnić od innych warunków oraz zdarzeń – każdy może dostosować je do własnych potrzeb i budowy serwisu. Jednak na potrzeby tego poradnika wykorzystamy jedynie event przesyłany wraz z obiektami transakcyjnymi.

Jeżeli reguła będzie uruchamiana tylko w wypadku zdarzenia Transakcja i nie dodamy innych warunków, należy zwrócić uwagę, aby event o tej nazwie użyć jedynie w przypadku transakcji.

Gotowa reguła, która uruchomi nasz tag:

Kolejnym krokiem jest budowa tagu, który prześle informacje o transakcji do Google Analytics.

Z dostępnych typów tagów w GTM wybieramy „Zdarzenie”

Uzupełniamy Identyfikator śledzenia konta GA do którego chcemy przesłać dane, w naszym przykładzie został on wcześniej zapisany do zmiennej typu „Stała”.

Pola takie jak „Kategoria”, „Działanie”, „Etykieta” możemy uzupełnić dowolnymi nazwami, łatwymi do identyfikacji w raportach Google Analytics i które będą dotyczyły transakcji:

Następnie w polu „Działanie niezwiązane z interakcją” zmieniamy wartość na „Prawda” – nasz tag będzie wywoływany jedynie w przypadku transakcji i nie wymaga interakcji ze strony użytkownika dlatego, aby nie wpływać na współczynnik odrzuceń należy zmienić jego wartość.

Kolejnym krokiem jaki powinniśmy wykonać jest włączenie funkcji ulepszonego e-commerce dla naszego tagu oraz użycie warstwy danych – zaznaczmy zatem oba obiekty.

Ostatnim krokiem jest dodanie wcześniej utworzonej reguły, która uruchomi nasz tag:

Cały tag zapisujemy nadając mu przykładową nazwę „GA-Potwierdzenie transakcji”.

Gotowy tag może wyglądać w następujący sposób:

Sprawdzenie danych

Aby sprawdzić dane musimy dotrzeć do końca ścieżki zakupowej, czyli do naszej strony z potwierdzeniem zamówienia. Możemy zatem przejść do typu podglądu GTM i przejść całą ścieżkę zakupową. Sprawdzając czy nasz tag faktycznie wywołuje się poprawnie na stronie potwierdzenia zamówienia.

Poprawne uruchomienie tagu na stronie z potwierdzeniem zamówienia:

 

Sprawdzenie danych przekazanych do data layer:

 Mamy zatem potwierdzenie, że nasz tag działa i odpala się na stronie z potwierdzeniem zamówienia gdy zajdzie odpowiednia reguła czyli event o nazwie „Transakcja”.

Pozostaje jeszcze sprawdzić jakie zmienne i wartości przesyłane są do GA (być może po drodze popełniliśmy błąd). Możemy to zrobić bezpośrednio w GA sprawdzając w raportach poprawność danych lub sprawdzić przesyłane requesty w konsoli:

Poniżej poprawne requesty w konsoli:

Na koniec, po upewnieniu się, że wszystkie dane wysyłane do GA są poprawne, możemy przejść do raportów w GA i cieszyć się spływającymi danymi.

Czy to koniec?

Poradnik ten dotyczy wdrożenia rozszerzonej wersji ecommerce w najprostszej postaci, przekazujemy w nim podstawowe informacje transakcyjne. Aby cieszyć się ze wszystkich możliwości jakie daje nam encharted ecommerce czyli:

Powinniśmy zajrzeć do poradnika Google, w którym znajdziemy w wszystkie niezbędne kody wdrożeniowe potrzebne do prawidłowego działania modułu w wersji rozszerzonej.

Zachęcam również do odwiedziny strony z demo sklepem Google, gdzie znajdziecie przykłady wdrożonych kodów dla enhanced ecommerce w wersji standardowej oraz z wykorzystaniem datalayer:

 

Powyższe opisane przykłady i zasady implementacji są identyczne i można je z powodzeniem zastosować w dowolnym sklepie internetowym. Jedynie reguły, czy też eventy uruchamiające poszczególne tagi, mogą być różne, w zależności od zastosowanych gotowych rozwiązań CSM. Zachęcamy również do kontaktu w przypadku problemów poprawną implementacją modułu ecommerce w Google Analytics.