Jak wdrożyć Google Tag Manager do WooCommerce

Masz stronę na CMS Wordpress albo prowadzisz sklep internetowy w oparciu o WooCommerce? Nie musisz edytować kodu strony, by móc kontrolować tagi. Dzięki Google Tag Manager możesz analizować konwersję i wiele innych. Poniżej szczegółowa instrukcja.
21 lipca 2020

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.

Spis treści:

1. Zakładanie Google Tag Manager (GTM).
2. Instalacja i konfiguracja wtyczki GTM4WP.
3. Wdrożenie kodu GA w GTM.
4. Konfiguracja remarketingu dynamicznego.
5. Rozszerzony e-commerce.
6. Kliknięcia w telefon/mail.
7. Publikacja zmian w kontenerze.
8. Podsumowanie.

 

Google Tag Manager

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.

Zakładanie konta GTM

Dodanie nowego konta

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 <head>, druga zaraz po tagu otwierającym <body>

Instalacja managera

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ą.

Dodaj wtyczkę

W polu wyszukiwania wpisujemy Google Tag Manager:

Wyszukiwanie GTM

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

GTM dla WordPress

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

Ustawienia GTM

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.

GTM ID

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

Google Ads GTM

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

Integration MTG

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

  • Track enhanced e-commerce
  • Google Ads remarketing

WoCommerce

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

Kod GTM

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ą:

Zmienne GTM

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

Wybierz typ zmiennej

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

Konfiguracja zmiennej

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

Funkcje ulepszonego ecommerce

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

Nowy tag

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

Google Analytics GTM

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

Kod GA

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

Reguły na blogu

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

Wybierz regułę

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

Stworzymy dla Ciebie kampanię reklamową od podstaw! Razem osiągniemy sukces! Wypromuj swoją markę już dziś!
Skontaktuj się

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:

Zmienna warstwa danych

Ecomm konfiguracja zmiennej

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:

Zmienne definiowane przez użytkownika

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

Remarketing Google Tag

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

Szczegółowe instrukcje

Identyfikator Konwersji

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.

Ustawienia ręczne

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:

Google Tag Assistant

Rozszerzony e-commerce

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

Ustawienia ecommerce

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

Zadania niestandardowe

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

Nazwa zdarenia

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.

Ecommerce Events

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

Skonfiguruj regułę

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:

Działanie z interakcją

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.

<a href=”tel:000000000”>000000000</a>
<a href=mailto:mail@mail.pl>mail@mail.pl</a>

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

Mail Click

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

Konfiguracja reguły

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

Universal Analitycs

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”.

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.

Przesyłanie zmian

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.

Stwórz z nami swoją reklamę w Social Media!

Autor

Podobne wpisy

Vanity Metrics – czym są i dlaczego warto ich unikać w biznesie?

15 lipca 2020
W biznesie, próżność jest zawsze złym doradcą. Posługiwanie się powierzchownymi danymi. Bezkrytyczne zachwycanie się rosnącymi statystykami. Satysfakcja płynąca z pobieżnej analityki. Każdy z nas narażony jest na uleganie urokowi Vanity Metrics.

Szybkość strony internetowej [KOMPENDIUM]

10 lipca 2020
Szybkość ładowania się strony internetowej jest jednym z najłatwiejszych do sprawdzenia elementów związanych z „performance’em strony”. W publikacji przybliżam temat przyspieszania witryny oraz narzędzi i wpływu szybkości na pozycjonowanie się witryny.
kontakt // ideoforce.pl