Blog

Wdrożenie Enhanced Ecommerce za pomocą wtyczki na WordPress

Instalacja i ustawienia wtyczki na wysyłkę Data Layera pod Enhanced Ecommerce

Przetestowałem wtyczkę, która tworzy automatyczny DataLayer pod wdrożenie Enhanced Ecommerce w Google Analytics. W przypadku, gdy masz zaimplementowane wybijanie warstw danych (Data Layer) na swoim sklepie możesz pominąć pierwsze akapity i przejść do części związanej z wdrożeniem tagów w Google Tag Managerze. Wtyczka natomiast może być idealnym rozwiązaniem dla mniejszych sklepów, które potrzebują przekazywanie parametrów w dość standardowy sposób. Nie sprawdzi się to w większych sklepach, gdzie zazwyczaj wymagania pod względem zmiennych są nietypowe i rozbudowane. Jeśli jednak nie masz w swoim zespole dewelopera lub analityka, który wdroży DataLayer na stronie ani budżetu na rozszerzoną analitykę to rozwiązanie wydaje się być rozsądne.

Zacznij od instalacji na WordPressie wtyczki o nazwie Google Tag Manager for WordPress (https://pl.wordpress.org/plugins/duracelltomi-google-tag-manager/). Za pomocą tej wtyczki możesz również wykonać inne rzeczy jak np. osadzić Google Tag Managera. Kod GTM mam wrzucony bezpośrednio w kod strony, więc pominę tę część. Jeśli jednak na stronie nie masz jeszcze podpiętych narzędzi to szczegóły znajdziesz: https://bettersteps.pl/blog/instalacja-google-analytics-i-google-tag-managera-na-stronie-internetowej/.

We wtyczce przejdź do zakładki Integration -> WooCommerce. Oznacz Track enhanced e-commerce, a następnie zapisz ustawienia.

Weryfikacja działania wtyczki i wybijania Data Layer na stronie

Po włączeniu wtyczki warto sprawdzić czy wszystko jest w porządku, a warstwa danych związana z procesem zakupowym jest wysyłana. Polecam do tego używać przeglądarki Chrome i rozszerzenia DataLayer Checker. Równie dobrze możesz to sprawdzić w konsoli, ale na pewno przy pomocy Checkera pójdzie szybciej. Na załączonym obrazku widać, że parametry zakupowe zostały wysłane. Wartości zmiennych zaciągane są z produktów wrzuconych na sklep, więc oczywiście dla każdego sklepu będą indywidualne. Taki test warto zrobić na wszystkich głównych krokach: dodanie do koszyka, kroki na koszyku i podsumowanie zamówienia.

Implementacja Enhanced Ecommerce w Google Tag Managerze

W artykule zakładam, że masz założony Google Tag Manager na stronie i przez niego wysyłasz dane do Google Analytics. Jeśli jeszcze tak nie jest i dopiero instalujesz narzędzia to odwiedź https://bettersteps.pl/blog/instalacja-google-analytics-i-google-tag-managera-na-stronie-internetowej/. Jest tam proces całej instalacji Google Tag Managera oraz przygotowanie podstawowych tagów pod wysyłkę danych do Google Analytics

Krok 1 – stworzenie reguły (trigger) w Google Tag Managerze

Do zbierania danych pod Enhanced Ecommerce potrzebujemy tagu, który pobierze dane z Data Layera. Zacznijmy od stworzenia reguły, który będzie definiować, kiedy tag ma być uruchamiany. Moim celem jest zbieranie Data Layera w momencie dodania produktu do koszyka, na checkoutach i podsumowaniu. W przypadku wtyczki, którą testuje będę miał 3 główne eventy: dodanie do koszyka, checkout i purchase. Wtyczka wysyła wymienione eventy z nazwami (wartościami):

dodanie do koszyka: gtm4wp.addProductToCartEEC
checkout: gtm4wp.checkoutStepEEC
purchase: gtm4wp.orderCompletedEEC

Reguła, którą nazwałem event – Enhanced Ecommerce addToCart, checkout i purchase w polu Nazwa Zdarzenia będzie miała zatem wpisane: gtm4wp.addProductToCartEEC|gtm4wp.checkoutStepEEC|gtm4wp.orderCompletedEEC oraz odznaczone pole wyrażenie regularne. Mogłem stworzyć trzy oddzielne reguły, dla każdego z wymienionych wyżej eventów, ale szybciej będzie to ograć wszystko w jednym. Taką regułę wystarczy zapisać. Wszystkie czynności robię bezpośrednio na produkcji, dlatego inne warunki nie będą tu potrzebne. W przypadku większych sklepów oczywiście należy przetestować tagi na środowisku testowym.

Krok 2 – stworzenie zmiennych

Potrzebujemy zmiennych, z których pobierzemy wartości przesyłane w Data Layerze. Wykorzystamy je w nastepnym etapie, dlatego tutaj tłumaczę tylko, jak można to zrobić. W następnych krokach dowiesz się jak je wykorzystać i przesłać do Google Analytics.
Pierwszą zmienną będzie Event. Po wejściu w Zmienne skorzystaj ze Zmienne Wbudowane i wybierz Skonfiguruj. Tam z kategorii Narzędzia zaznacz Event. Po zaznaczeniu zamknij okienko.

W kolejnej zmiennej będziemy przekazywać przychód ze sprzedaży. W przyszłości pozwoli to na dokładną analizę źródeł ruchu i wartości naszych stron. W zmiennej zdefiniowaniej przez użytkownika klikamy w Nowa. Wybieramy Zmienna Wartwa danych.

W nazwie zmiennej wpisujemy: ecommerce.purchase.actionField.revenue. Jest to zmienna z Data layera, która przekazuje wartość całego koszyka podczas dokonania transakcji.

Krok 3 – stworzenie tagu

Tag wdrażamy dla Google Analytics – Universal Analytics, dlatego wybieramy ten typ tagu. Typ śledzenia to Zdarzenie. W przypadku parametrów śledzenia zdarzeń jest tu pewna dowolność, ale polecam w Kategorii wpisać Ecommerce, a w działaniu (inaczej Akcja Zdarzenia w Google Analytics) przesłać wartość wysyłaną w parametrze Event. Oznacza to, że zależy nam na przekazaniu wartości: gtm4wp.addProductToCartEEC, gtm4wp.checkoutStepEEC, gtm4wp.orderCompletedEEC.

Uwaga – na sklepie, którym testuje wtyczkę jest jednokrokowy checkout. Nie jest to typowe rozwiązanie i na twoim sklepie możesz mieć kilka stron checkout (np. dane do wysyłki i adres do wysyłki na dwóch oddzielnych urlach podczas procesu zakupowego). W takim przypadku poprawne będzie pobranie wartości z parametru ecommerce.checkout.actionField.step i przekazanie jej w tagu np. w Etykiecie jako 1 lub 2 lub 3 krok na checkout.

W przypadku tego sklepu w Działaniu należy wybrać zmienna Event, którą wcześniej stworzyliśmy. Etykietę możemy zostawić pustą. W wartości zdarzenia wybierzemy zmienną, którą stworzyliśmy wcześniej, czyli nasz przychód z zakupów. Wartość ta będzie występowała tylko na podsumowaniu zakupu.

W polu Działanie niezwiązane z interakcją zmieniamy na Prawda. Jeśli będziemy mieli tu Fałsz to radykalnie obniżymy sobie bounce rate do prawie 0%, ale niestety nie będzie to prawdziwa liczba. Wybieramy zatem Prawda, tak aby event nie wpływał na bounce rate (współczynnik odrzuceń). W Ustawieniach Google Analytics wybieramy identyfikator Google Analytics, a także musimy wejść do Ustawień Rozszerzonych, aby w E-commerce włączyć funkcje ulepszegone e-commerce. Zaznaczamy również pole Użyj warstwy danych. Pozwoli to na automatyczne zaciąganie danych z Data Layerów wysyłanych przez wtyczkę.

Na sam konieć musimy dodać regułę, którą wcześniej przygotowaliśmy. Nasz tag jest gotowy. Warto go przetestować w trybie debuggowania, a jeśli wszystko zrobiliśmy poprawnie to go opublikować.

Włączenie Enhanced Ecommerce w Google Analytics

W Google Analytics w Widoku danych musimy jeszcze włączyć Enhanced Ecommerce. Zrobimy to po wejściu w Ustawienia -> Widok danych -> Ustawienia e-commerce. Polecam utworzyć w tym celu nowy widok, ale jest to już zależne od danego przypadku. W przypadku sklepu konieczne również będzie dodanie wykluczeń witryn odsyłających. Jeśli tego nie zrobimy nasza ścieżka zgubi faktycznę źródło sprzedaży. Dobrze jest to opisane w artykule Damiana, dlatego odsyłam bezpośrednio do jego bloga: https://www.damianrams.pl/jak-wykluczyc-bramki-platnosci-google-analytics/

Mała pułapka wtyczki

W trybie debbugowania testując stworzony w artykule tag i zmienne zauważyłem, że pomimo jednego kroku na checkout wysyłanych jest w momencie przejścia na podsumowanie zamówienia kilka checkoutów. Jest to związane z tym, że na sklepie jest jednokrokowy checkout, co nie jest standardem w Woocommerce.

Żeby nie zbierać kilku checkoutów jednocześnie (różniły się tylko inną wartością w zmiennej step) ustawiłem główny tag GA-Event-addTocart, Checkout, Purchase, aby był uruchamiany raz na stronę. Podczas testów wyglądało, że załatwiło to sprawę, także rekomenduję sprawdzenia tego również u Was czy przypadkiem nie macie „sztucznie” skróconej ścieżki zakupowej przy której wtyczka nieco wariuje i automatycznie wysyła kilka checkoutów po przejściu na podsumowanie.