Jak zaimplementować śledzenie E-commerce w Google Analytics?

5 min czyt.
Poradnik
jak-zainstalowac-e-commerce-w-google-analytics
Spis treści

    Śledzenie E-commerce w Google Analytics to podstawa każdego sklepu internetowego. Dzięki niemu można zarówno zobaczyć statystyki transakcji oraz produktów, jak i wykorzystać je do dogłębnej analizy swojego biznesu. Jak zaimplementować śledzenie E-commerce? Przeprowadzę Cię przez tę procedurę krok po kroku.

    Implementacja E-commerce może odbywać się w trzech narzędziach:

    • Google Analytics (ustawienia administracyjne)
    • Software do tworzenia stron internetowych
    • Google Tag Manager 

    Jeśli w Twoim systemie obsługi strony internetowej (CMS) znajduje się wtyczka do obsługi E-commerce, bądź chcesz zrealizować E-commerce bezpośrednio na stronie, będzie Cię interesować tylko pierwszy punkt tego poradnika oraz link, który wstawiam poniżej:

    Dokumentacja Google – E-commerce bez użycia Google Tag Managera 

    Ale jeśli Twoja witryna ma również zaimplementowany Google Tag Manager, jak najbardziej rekomenduję Ci skorzystanie z niego – instalacja E-commerce pozwoli Ci dobrze się zapoznać z interfejsem tego narzędzia. 

    Oto dwa sposoby na implementację E-commerce – przez GA i Google Tag Managera.

    1. Implementacja E-commerce w ustawieniach Google Analytics

    Po wejściu w ustawienia administracyjne konta Google Analytics, po prawej stronie, w kolumnie poświęconej ustawieniom Widoku, widać zakładkę „Ustawienia e-commerce”.

    implementacja e commerce w ustawieniach google analytics

    Po kliknięciu w nią pokazuje się ekran z możliwością włączenia śledzenia E-commerce.

    implementacja e commerce w ustawieniach google analytics
    implementacja e commerce w ustawieniach google analytics

    Nie należy klikać przycisku odpowiedzialnego za Ulepszony E-commerce. Ta funkcja jest dużo bardziej skomplikowana niż podstawowe śledzenie E-commerce i należałoby poświęcić jej oddzielny (i to dużo dłuższy) poradnik. Należy więc włączyć jedynie pierwszy przycisk i kliknąć „Zapisz”.

    Tyle wystarczy po stronie ustawień w Google Analytics. To jednak nie wszystko – w tym miejscu należy albo przejść do punktu 2., albo skorzystać z opcji wspomnianej na początku poradnika.

    2. Implementacja E-commerce z użyciem Google Tag Managera

    Jeśli zainstalowałeś już GTM w swojej witrynie, sprawa będzie dosyć prosta. Jeśli nie jesteś pewien, jak to zrobić, pomocnicze informacje znajdziesz tu: 

    NAD skryptem, który jest odpowiedzialny za implementację GTM, należy wstawić kod tzw. DataLayer, czyli Warstwy Danych. Jest to funkcja, która realizuje przekazywanie konkretnych danych w jednolitej formie do narzędzi analitycznych, w tym do Google Tag Managera. Naszym celem jest implementacja E-commerce. W takiej sytuacji w DataLayer powinny się znaleźć następujące informacje. 

    implementacja e commerce z uzyciem google tag managera

    Zwróć uwagę, że tylko transactionID oraz transactionTotal są tutaj wymagane. Dzięki temu w Google Analytics będziesz mógł zobaczyć ID każdej transakcji oraz sumę za zamówienie. Jeśli chcesz zobaczyć również pozostałe elementy, jak najbardziej jest wskazane dodanie ich w kodzie DataLayer. W przypadku listy produktów, w każdym produkcie należy ustawić poniższe pola.

    implementacja e commerce z uzyciem google tag managera

    A więc jak taki kod DataLayer powinien wyglądać? Oto w pełni prawidłowy, przykładowy skrypt.

    <script>
    
    window.dataLayer = window.dataLayer || []
    
    dataLayer.push({
    
       ’transactionId’: ’1234′,
    
       ’transactionAffiliation’: ’Ubrania Acme’,
    
       ’transactionTotal’: 38.26,
    
       ’transactionTax’: 1.29,
    
       ’transactionShipping’: 5,
    
       ’transactionProducts’: [{
    
           ’sku’: ’DD44′,
    
           ’name’: ’Koszulka’,
    
           ’category’: ’Odzież’,
    
           ’price’: 11.99,
    
           ’quantity’: 1
    
       },{
    
           ’sku’: ’AA1243544′,
    
           ’name’: ’Skarpetki’,
    
           ’category’: ’Odzież’,
    
           ’price’: 9.99,
    
           ’quantity’: 2
    
       }]
    
    });
    
    </script>

    UWAGA! Zmienne w kodzie DataLayer muszą mieć dokładnie te same nazwy, które są podane w powyższej dokumentacji!

    Taki kod (oczywiście z dynamicznie przypisywanymi informacjami o podanych parametrach i produktach) należy wstawić na stronę z potwierdzeniem zamówienia NAD skryptem uruchamiającym Google Tag Manager.

    Jeśli kod jest już na stronie i myślisz, że dane przypisują się w odpowiedni sposób, należy sprawdzić dla pewności, czy Google Tag Manager poprawnie je odczytuje. Można to zrobić klikając przycisk „Podgląd” w interfejsie GTM.

    implementacja e commerce z uzyciem google tag managera

    Po kliknięciu przycisku „Podgląd” Tag Manager powinien się odświeżyć i pokazać takie okienko.

    implementacja e commerce z uzyciem google tag managera

    Jeśli takie okienko się nie pojawia, to znaczy, że podgląd w GTM wcale się nie uruchomił! Wspominam o tym, ponieważ na osobistej przeglądarce nie usuwam ciasteczek oraz cache i podejrzewam, że z tego powodu GTM czasem nie daje rady uruchomić podglądu. 

    UWAGA! Po każdej zmianie w trybie podglądu należy kliknąć przycisk „Odśwież”. Tylko wtedy GTM zweryfikuje tagi, sprawdzi, czy nie ma na pewno żadnych błędów, zapisze zmiany i będzie można przejść do strony internetowej, by sprawdzać modyfikacje już w akcji.

    Kiedy podgląd jest uruchomiony, należy przejść na stronę internetową, na której chcemy uruchamiać nasze śledzenie E-commerce, czyli na stronę z potwierdzeniem zamówienia. Jak dotrzesz do tej strony – wybór należy do Ciebie. Intuicyjna ścieżka to złożenie testowego zamówienia, ale jeśli masz inny sposób – śmiało. ????

    Kiedy już widzisz stronę z potwierdzeniem zamówienia, w okienku od trybu podglądu, w zakładce „DataLayer” powinieneś zobaczyć kod podobny do tego poniżej.

    implementacja e commerce z uzyciem google tag managera

    Wstawiłem  dla przykładu kod na stronie Audytu Google Analytics, ponieważ nie realizujemy w naszej agencji handlu detalicznego – nie mamy zatem strony z potwierdzeniem zamówienia. 

    Jeśli w okienku podglądu GTM widzisz taki (oczywiście spersonalizowany pod Twoje potrzeby analityczne) kod, to znaczy, że konfiguracja jest poprawna i możesz przejść do tworzenia tagu. 

    Tag na transakcje tworzy się w panelu GTM.

    implementacja e commerce z uzyciem google tag managera

    Należy wybrać tag Universal Analytics.

    implementacja e commerce z uzyciem google tag managera

    Ustawienia tagu możesz skopiować ze zrzutu ekranu.

    implementacja e commerce z uzyciem google tag managera

    Przy wyborze zmiennej ustawień najlepiej utworzyć zmienną „GA ID”, która będzie przechowywała identyfikator śledzenia Google Analytics (w tym celu kliknij tekst „Nowa zmienna…”)Można go pobrać z ustawień Google Analytics – zakładka Admin -> Informacje o śledzeniu -> Kod śledzenia. Tak pobrany kod należy wkleić do zmiennej.

    implementacja e commerce z uzyciem google tag managera

    Zapisz zmienną – GTM powinien wrócić do widoku tagu. Następnie trzeba dodać regułę, według której tag się uruchomi. W tym celu kliknij w wybór reguł i dodaj nową niebieskim plusikiem w prawym górnym rogu.

    implementacja e commerce z uzyciem google tag managera

    Kod DataLayer powinien wczytywać się przed kodem uruchamiającym GTM, ale dla pewności możesz wybrać „Element DOM Dostępny” (lub ang. „DOM Ready”).

    implementacja e commerce z uzyciem google tag managera

    Najlepiej wybrać warunek „Page ULR zawiera” i w polu po prawej stronie wpisać adres unikalnej strony, która wyświetla się na potwierdzenie zamówienia. Jeśli posiadasz inne metody, żeby weryfikować potwierdzenie zamówienia – możesz spróbować innych dostępnych zmiennych (Można je skonfigurować w zakładce „Zmienne”), bądź spróbować zrobić zdarzenie niestandardowe na faktyczną transakcję i ustawić regułę na takie zdarzenie, zamiast reguły „Element DOM dostępny”. 

    Po zatwierdzeniu zmian należy pamiętać o przetestowaniu działania tagu w trybie podglądu (pamiętaj też o każdorazowym odświeżeniu zarówno GTMa, jak i strony, żeby zmiany miały szansę pokazać się w podglądzie).

    Jeśli tag poprawnie się uruchamia i wszystkie kroki ścieżki logicznie prowadzą dane ze strony do DataLayer, dalej do Google Tag Managera i do Google Analytics – informacje o transakcjach powinny zacząć pojawiać się w raportach Google Analytics.

    Subscribe
    Powiadom o
    0 komentarzy
    Inline Feedbacks
    View all comments
    Avatar photo
    Jakub Bogdański

    Spis treści