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.
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 <head>, druga zaraz po tagu otwierającym <body>
W przypadku Wordpressa wdrożenie Google Tag Manager możemy zrealizować na dwa sposoby:
- 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.
- 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
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:
Zapisz się na newsletter i bądź na bieżąco z naszymi artykułami. Nie przegap najciekawszych tekstów.
Administratorem udostępnionych przez Ciebie danych osobowych jest Ideo Force Sp. z o.o. Podanie danych osobowych jest dobrowolne, jednak ich niepodanie uniemożliwi świadczenie usług na Twoją rzecz. Dowiedz się więcej o zasadach przetwarzania Twoich danych osobowych oraz przysługujących Ci uprawnieniach w Polityce prywatności.
Wdrożenie kodu GA w GTM
W przypadku braku Google Analytics w nowym sklepie:
- 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:
- Śledzenie wizyt w Google Analytics
- Remarketing dynamiczny
- Rozszerzony e-commerce
Kliknięcia w telefon/mail
<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:
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
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
