ź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.
Zobacz również
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
#NMPoleca: Jak piękny design zwiększa konwersję w e-commerce? Tips & Tricks od IdoSell
W Google Analytics jest to „Konfiguracja ulepszonego e-commerce” – wystarczy włączyć tę opcję:
Słuchaj podcastu NowyMarketing
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.