Jak wdrożyć Google Tag Manager do WooCommerce

Google Tag Manager to rozwiązanie do tworzenia i zarządzania tagami oraz fragmentami kodów. Pozwala kontrolować definiowanie i uruchamianie tagów zarówno od Google, jak i innych firm. Jeśli zdecydujemy się na wdrożenie kodów śledzenia poprzez Google Tag Manager, skrypty będą ładować się niezależnie od siebie (nie następująco po sobie), co znacznie przyspieszy zbieranie informacji. Przeprowadzimy Was przez poszczególne etapy wdrażania Google Tag Manager w Wordpress i integracji z WooCommerce –  jednej z wtyczek Wordpressa typu open source dla e-commerce.

Zakładanie Google Tag Manager (GTM)

Kontener Google Tag Manager tworzymy poprzez założenie konta (https://tagmanager.google.com) wraz z konfiguracją z platformą docelową. Kontener to miejsce, w którym będziemy zarządzać kodami.

Po utworzeniu konta otrzymujemy kod, który należy zgodnie z instrukcją wdrożyć w serwisie. Istotne jest to, żeby pierwsza część kodu była w sekcji , druga zaraz po tagu otwierającym

W przypadku Wordpressa wdrożenie Google Tag Manager możemy zrealizować na dwa sposoby:

1. Poprzez dodanie kodów do pliku header.php – sposób wymagający modyfikacji kodu. Jego wadą w przypadku sklepów internetowych jest to, że dodatkowo i tak musimy posiadać dane, np. potrzebnych do remarketingu dynamicznego. Po drugie, jeśli dana strona nie korzysta z motywu potomnego to przy najbliższej aktualizacji motywu nasz kod zostanie usunięty z nagłówka motywu. Więcej o motywach potomnych przeczytasz tutaj.
2. Poprzez wtyczkę Google Tag Manager for Wordpress (GTM4WP) – wtyczka ta doda za nas kod GTM do źródła strony. Oprócz tego ma świetną integrację z WooCommerce, dzięki czemu dostaniemy od razu wszystkie dane potrzebne do:
   • integracji remarketingu dynamicznego w Google Ads,
   • rozszerzonego śledzenia e-commerce w Google Analytics (jeśli jest możliwość zawsze wdrażajmy rozszerzony e-commerce),
   • śledzenia formularzy kontaktowych – wtyczka integruje się z najpopularniejszą metodą wysyłki formularzy a więc wtyczką Contact Form 7.

Instalacja i konfiguracja wtyczki GTM4WP

Przed nami zainstalowanie i dopasowanie ustawień wtyczki Google Tag Manager for Wordpress. Będąc zalogowanym do panelu administratora Wordpress przechodzimy do zakładki Wtyczki -> Dodaj nową.

W polu wyszukiwania wpisujemy Google Tag Manager:

oraz instalujemy i aktywujemy pierwszą wtyczkę na liście:

Żeby przejść do jej konfiguracji wchodzimy w Ustawienia -> Google Tag Manager

Pobrany z Tag Managera kod wklejamy w pole GTM ID oraz wybieramy opcję Codeless injection. Należy sprawdzić czy nie ma żadnych problemów z wyświetlaniem strony – nigdy nie spotkałem takiego problemu, jeśli takie problemy występowałyby, wówczas wybierzmy Footer of the page.

Następnie przechodzimy do zakładki Basic data -> Google Ads i włączamy remarketing variable:

Kolejno Integration -> Contact Form 7 i włączamy integracje z CF7:

I przechodzimy do zakładki Integration -> WooCommerce i zaznaczamy:

• Track enhanced e-commerce
• Google Ads remarketing

Zaklikanie wszystkich tych opcji powoduje pojawienie się w kodzie np. danych potrzebnych do odpalenia remarketingu dynamicznego:

Wdrożenie kodu GA w GTM

Jeśli mamy już wdrożony kod podstawowy GA, możemy pominąć tę część – chociaż zazwyczaj lepiej usunąć podstawowy kod z kodu i wdrożyć wszystko za pomocą GTM.
W przypadku braku Google Analytics w nowym sklepie:

1. Przejdźmy do zakładki zmienne i kliknijmy nową:

2. Nazwijmy zmienną (KOD GA) i wybierzmy Ustawienia Google Analytics:

3. W pole identyfikator śledzenia wpiszmy nasz kod GA:

4. Rozwińmy także Więcej ustawień -> E-commerce -> Włącz funkcje ulepszonego e-commerce -> Użyj warstwy danych:

5. A następnie przejdźmy do zakładki Tagi i utwórzmy nowy tag:

6. Po nazwaniu Tagu np. Kod GA i wybieramy Google Analytics – Universal Analytics i Typ śledzenia -> Wyświetlenie strony:

7. W ustawieniach Google Analytics wybieramy wcześniej stworzoną zmienną Kod GA:

8. Do tagu musimy dodać regułę, żeby wskazać kiedy ma być inicjowany:

W przypadku kodu podstawowego GA będzie to All pages:

Na koniec zapisujemy tag, który  pozwoli na śledzenie odsłon serwisu w Google Analytics.

Konfiguracja remarketingu dynamicznego

W przypadku WooCommerce, wtyczka dodaje nam do kodu zmienne potrzebne dla remarketingu dynamicznego:

• Ecomm_prodid: ID produktu (zgodne z tym, które mamy w feedzie produktowym)
• Ecomm_pagetype: Typ strony np. product / checkout / purchase
• Ecomm_totalvalue: Wartość produktu / suma produktów w koszyku

Żeby móc ich użyć na potrzeby naszej kampanii Google Ads, musimy zaczytać je z kodu do GTM’a. W tym celu przechodzimy do zakładki zmienne i tworzymy nową zmienną warstwy danych:

Tworzymy zmienną ecomm_prodid i zapisujemy. Analogiczne zmienne tworzymy dla ecomm_pagetype i ecomm_totalvalue.

Po wszystkim powinniśmy mieć na liście 3 zmienne:

Następnie przechodzimy do zakładki tagi i tworzymy nowy tag:

W pole ID konwersji wpisujemy ID konwersji, które przekaże nam specjalista Google Ads:

Teraz dodajemy do tagu wcześniej umieszczone zmienne. W polu klucz wpisujemy wartości ecomm_pagetype, ecomm_totalvalue, ecomm_prodid – wartości wybieramy ze zmiennych, po wpisaniu dwóch {{ pojawi się opcja wybrania wcześniej zdefiniowanej zmiennej.

Tak, jak w przypadku tagu głównego GA dodajemy regułę wyświetlania All Pages i zapisujemy tag.

Korzystając z wtyczki do Chrome Google Tag Assistant możemy sprawdzić, czy dane wysyłają się w sposób poprawny:

Rozszerzony e-commerce

Uwaga! Żeby zacząć zbierać dane o rozszerzonym e-commerce w pierwszej kolejności musimy w GA włączyć poniższe opcje:

Przechodzimy do GTM i tworzymy nową regułę (możemy ją nazwać np. Ecommerce Events):

Wklejamy w pole poniższą listę i zaznaczamy „użyj dopasowania do wyrażenia regularnego”:

gtm4wp.productClickEEC|gtm4wp.addProductToCartEEC|gtm4wp.removeFromCartEEC|gtm4wp.checkoutOptionEEC|gtm4wp.checkoutStepEEC|gtm4wp.changeDetailViewEEC

Następnie tworzymy nowy tag Google Analytics według instrukcji z zrzutu ekranu poniżej, gdzie jako regułę uruchamiającą wybierzemy stworzoną przed momentem regułę E-commerce Events.

Dodatkowy tag dla mierzenia wyświetleń produktów tworzymy analogicznie kolejną regułą, jak poprzednio E-commerce Impressions:

Następnie tworzymy tag, a więc zaznaczamy Zdarzenie związane z interakcją -> Prawda. Pozwoli to zabezpieczyć się nam na wypadek, gdyby tag miał zaburzyć bounce rate strony:

W taki sposób mamy skonfigurowane w Wordpressie z WooCommerce:

1. Śledzenie wizyt w Google Analytics
2. Remarketing dynamiczny
3. Rozszerzony e-commerce

Kliknięcia w telefon/mail

Często zdarza się, że chcemy  wiedzieć ile było kliknięć w adresy e-mail czy numery telefonu. Dzięki GTM’owi łatwo możemy zmierzyć takie zdarzenia. Upewnijmy się tylko, że taki adres e-mail czy numer telefonu jest klikalny, jeśli nie to należy  o opisać je  w kodzie w formie linku tj.

000000000
mail@mail.pl

Utwórzmy w tym celu nową regułę Tylko linki:

Analogicznie tworzymy regułę dla kliknięć w numery telefonów (jedyna różnica to click URL zawiera tel: zamiast mailto):

Następnie możemy stworzyć tag, który pozwoli nam na przesyłanie tych zdarzeń do Google Analytics:

Publikacja zmian w kontenerze

Po konfiguracji po stronie Google Tag Manager musimy opublikować zmiany, aby dane wysyłały się do Google Analytics. Aby to zrobić w prawym górnym rogu szukamy button „Prześlij”.

Następnie klikamy „Opublikuj”. Wcześniej możemy wprowadzić szczegóły zmian, które wprowadziliśmy, co przyda się, jeśli będziemy chcieli cofnąć się do historycznej wersji kontenera.

Podsumowanie

Jak wiemy, sprzedaż internetowa i skuteczne zarządzanie procesami zachodzącym w obrębie witryny wymagają korzystania z narzędzi. Mają one nie tylko zaoszczędzić czas, ale zintensyfikować wydajność pracy. Google Tag Manager to z pewnością narzędzie, z którego warto korzystać w e-commerce – szybkie, integrujące z innymi rozwiązaniami, zautomatyzowane, elastyczne (wersje dostosowane do poziomu biznesowego). Nie od dziś wiadomo, że śledzenie ścieżek klientów jest niezbędne do poprawy funkcjonalności strony i przygotowania rozwiązań wykazujących najwyższe prawdopodobieństwo wystąpienia konwersji. To jedna strona – drugą jest analiza, która pozwala jeszcze lepiej rozumieć zachodzące zdarzenia, dając tym samym pełną wiedzę o zachowaniach użytkowników.