Z tego przewodnika dowiesz się, jak zbierać dane e-commerce za pomocą tagu analytics.js.
Przegląd
Pomiar e-commerce umożliwia pomiar liczby transakcji oraz przychodów generowanych przez Twoją witrynę. W typowej witrynie e-commerce, gdy użytkownik kliknie przycisk „Kup” w przeglądarce, informacje o zakupie są wysyłane do serwera WWW, który realizuje transakcję. Jeśli transakcja zostanie zrealizowana, serwer przekierowuje użytkownika na stronę z podziękowaniem i szczegółami zakupu oraz z potwierdzeniem zakupu. Możesz wysyłać do Google Analytics dane transakcji e-commerce ze strony z podziękowaniami za pomocą biblioteki analytics.js.
Istnieją 2 rodzaje danych e-commerce, które możesz wysyłać za pomocą tagu analytics.js: dane transakcji i produktu.
Dane transakcji
Transakcja odpowiada całej transakcji dokonanej w Twojej witrynie i zawiera te wartości:
Klucz | Typ wartości | Wymagane | Opis |
---|---|---|---|
id |
plik tekstowy, | Tak | Identyfikator transakcji. (np. 1234) |
affiliation |
plik tekstowy, | Nie | Sklep lub podmiot stowarzyszony, w którym miała miejsce transakcja (np. Ubrania Acme). |
revenue |
currency, | Nie | Określa całkowite przychody lub całkowitą kwotę transakcji (np. 11,99). Ta wartość może obejmować dostawę, podatki i inne korekty łącznych przychodów, które chcesz uwzględnić w obliczeniach przychodów. |
shipping |
currency, | Nie | Określa łączny koszt dostawy w ramach transakcji. (np. 5) |
tax |
currency, | Nie | Określa łączny podatek od transakcji. (np. 1,29) |
Dane produktu
Element reprezentuje poszczególne produkty, które znajdowały się w koszyku, i ma te wartości:
Klucz | Typ wartości | Wymagane | Opis |
---|---|---|---|
id |
plik tekstowy, | Tak | Identyfikator transakcji. Ten identyfikator łączy elementy z transakcjami, do których należą. (np. 1234) |
name |
plik tekstowy, | Tak | Nazwa elementu. (np. Puszyste różowe króliczki) |
sku |
plik tekstowy, | Nie | Określa kod SKU lub kod produktu. (np. SKU47) |
category |
plik tekstowy, | Nie | Kategoria, do której należy produkt (np.Zabawki imprezowe). |
price |
currency, | Nie | Osoba, jednostka i cena dla każdego produktu. (np. 11.99) |
quantity |
Liczba całkowita | Nie | Liczba jednostek kupionych w transakcji. Jeśli do tego pola zostanie przekazana wartość niebędąca liczbą całkowitą (np. 1,5), zostanie ona zaokrąglona do najbliższej liczby całkowitej. |
Implementacja
Pomiary e-commerce są zwykle wdrażane po zakończeniu procesu płatności przez użytkownika. Zwykle ma to miejsce na stronie z podziękowaniem. Gdy to zrobisz i wszystko będzie gotowe do wysyłania danych e-commerce do Google Analytics, musisz wykonać kilka czynności:
- Wczytywanie wtyczki e-commerce
- Dodawanie transakcji
- Dodawanie elementów
- Wysyłanie danych
- Czyszczenie danych
Wczytywanie wtyczki e-commerce
Aby zmniejszyć rozmiar biblioteki analytics.js, w bibliotece domyślnej nie ma pomiaru e-commerce. Jest dostępny jako moduł wtyczki, który musi zostać wczytany przed użyciem.
Aby wczytać wtyczkę e-commerce, użyj tego polecenia:
ga('require', 'ecommerce');
To polecenie musi zostać wykonane po utworzeniu obiektu śledzenia i przed użyciem funkcji związanej z e-commerce.
Po wczytaniu pojawi się kilka nowych poleceń związanych z pomiarami e-commerce, które zostaną dodane do domyślnego modułu śledzenia.
Dodawanie transakcji
Po załadowaniu wtyczki tworzy przezroczysty obiekt koszyka na zakupy. Do koszyka możesz dodać dane transakcji i produktów, a po jego pełnym skonfigurowaniu możesz wysyłać wszystkie dane naraz.
Dane transakcji dodajesz do koszyka za pomocą polecenia ecommerce:addTransaction
:
ga('ecommerce:addTransaction', { 'id': '1234', // Transaction ID. Required. 'affiliation': 'Acme Clothing', // Affiliation or store name. 'revenue': '11.99', // Grand Total. 'shipping': '5', // Shipping. 'tax': '1.29' // Tax. });
Dodawanie elementów
Następnie, aby dodać produkty do koszyka, użyj polecenia ecommerce:addItem
:
ga('ecommerce:addItem', { 'id': '1234', // Transaction ID. Required. 'name': 'Fluffy Pink Bunnies', // Product name. Required. 'sku': 'DD23444', // SKU/code. 'category': 'Party Toys', // Category or variation. 'price': '11.99', // Unit price. 'quantity': '1' // Quantity. });
Wysyłanie danych
Na koniec, po skonfigurowaniu wszystkich danych e-commerce w koszyku, wysyłasz je do Google Analytics za pomocą polecenia ecommerce:send
:
ga('ecommerce:send');
To polecenie sprawdzi każdą transakcję i produkt w koszyku, a następnie wyśle odpowiednie dane do Google Analytics. Gdy skończysz, koszyk na zakupy zostanie wyczyszczony i będzie gotowy do wysłania danych dotyczących nowej transakcji. Jeśli zostało wysłane poprzednie polecenie ecommerce:send
, zostaną wysłane tylko nowe dane transakcji i produktów.
Czyszczenie danych
Jeśli chcesz ręcznie wyczyścić koszyk na zakupy wszystkich transakcji i produktów, możesz użyć tego polecenia:
ga('ecommerce:clear');
Określanie walut lokalnych
Domyślnie w interfejsie internetowym zarządzania Google Analytics możesz skonfigurować wspólną, globalną walutę dla wszystkich transakcji i elementów. Domyślnie w przypadku wszystkich elementów i transakcji używana jest waluta globalna. W przypadku witryn dokonujących transakcji w wielu walutach wtyczka e-commerce umożliwia określenie lokalnej waluty transakcji oraz poszczególnych produktów.
Walutę lokalną należy podać w standardzie ISO 4217
. Pełną listę obsługiwanych walut konwersji znajdziesz w dokumentacji kodów walut.
Aby ustawić walutę lokalną w przypadku konkretnej transakcji i wszystkich jej elementów, wystarczy, że określisz walutę dla tej transakcji:
ga('ecommerce:addTransaction', { 'id': '1234', 'affiliation': 'Acme Clothing', 'revenue': '11.99', 'shipping': '5', 'tax': '1.29', 'currency': 'EUR' // local currency code. });
Na koniec możesz też określić walutę dla każdego produktu:
ga('ecommerce:addItem', { 'id': '1234', 'name': 'Fluffy Pink Bunnies', 'sku': 'DD23444', 'category': 'Party Toys', 'price': '11.99', 'quantity': '1', 'currency': 'GBP' // local currency code. });
Obsługa wielu trackerów
Możesz też użyć wtyczki e-commerce, jeśli na stronie masz zaimplementowane wiele (nazwanych) skryptów śledzenia. Wtyczka działa tak samo jak domyślny moduł śledzący z wyjątkiem formatu: trackerName.pluginName:method
.
Jeśli np. masz utworzony tracker o nazwie myTracker
:
ga('create', 'UA-XXXXX-Y', 'auto', {'name': 'myTracker'});
Następnie wczytaj wtyczkę e-commerce do tego nazwanego trackera za pomocą:
ga('myTracker.require', 'ecommerce');
Aby wysłać transakcję, możesz utworzyć obiekt transakcji i przekazać go do nazwanego modułu do śledzenia w ten sposób:
var transaction = { 'id': '1234', // Transaction ID. 'affiliation': 'Acme Clothing', // Affiliation or store name. 'revenue': '11.99', // Grand Total. 'shipping': '5' , // Shipping. 'tax': '1.29' // Tax. }; ga('myTracker.ecommerce:addTransaction', transaction);
Przy użyciu tej składni obiektu transakcji można używać w wielu trackerach.
Dane transakcji przesyłasz w ten sposób:
ga('myTracker.ecommerce:send');
Przykład
Większość witryn e-commerce realizuje transakcje na serwerze, a biblioteka analytics.js wysyła dane do Google Analytics z przeglądarki. Dlatego w celu prawidłowego przesyłania danych e-commerce do Google Analytics wymagana jest odrobina koordynacji między serwerem a klientem.
Większość witryn e-commerce renderuje stronę z podziękowaniem za pomocą silnika szablonów po stronie serwera. W tym przypadku musisz dodać kod pomiarowy e-commerce do szablonu po stronie serwera i za pomocą logiki serwera dynamicznie zapisywać wartości danych e-commerce na ostatecznej stronie. Oto przykład, jak to wygląda w przypadku języka PHP.
W języku PHP oznacza to zwykle pewną reprezentację danych e-commerce. W tym przykładzie dane są przechowywane w tablicy powiązaniowej:
<?php // Transaction Data $trans = array('id'=>'1234', 'affiliation'=>'Acme Clothing', 'revenue'=>'11.99', 'shipping'=>'5', 'tax'=>'1.29'); // List of Items Purchased. $items = array( array('sku'=>'SDFSDF', 'name'=>'Shoes', 'category'=>'Footwear', 'price'=>'100', 'quantity'=>'1'), array('sku'=>'123DSW', 'name'=>'Sandals', 'category'=>'Footwear', 'price'=>'87', 'quantity'=>'1'), array('sku'=>'UHDF93', 'name'=>'Socks', 'category'=>'Footwear', 'price'=>'5.99', 'quantity'=>'2') ); ?>
Pierwszym krokiem jest napisanie algorytmów przekształcania danych e-commerce w ciąg JavaScript wymagany przez analytics.js:
<?php // Function to return the JavaScript representation of a TransactionData object. function getTransactionJs(&$trans) { return <<<HTML ga('ecommerce:addTransaction', { 'id': '{$trans['id']}', 'affiliation': '{$trans['affiliation']}', 'revenue': '{$trans['revenue']}', 'shipping': '{$trans['shipping']}', 'tax': '{$trans['tax']}' }); HTML; } // Function to return the JavaScript representation of an ItemData object. function getItemJs(&$transId, &$item) { return <<<HTML ga('ecommerce:addItem', { 'id': '$transId', 'name': '{$item['name']}', 'sku': '{$item['sku']}', 'category': '{$item['category']}', 'price': '{$item['price']}', 'quantity': '{$item['quantity']}' }); HTML; } ?>
Następnie w tagu <script>
dodaj dodatkową logikę PHP, aby dynamicznie wyświetlać dane transakcji i produktów:
<!-- Begin HTML --> <script> ga('require', 'ecommerce'); <?php echo getTransactionJs($trans); foreach ($items as &$item) { echo getItemJs($trans['id'], $item); } ?> ga('ecommerce:send'); </script>
Po wykonaniu skryptu PHP na stronie zostaną wydrukowane dane transakcji i produktów wymagane przez tag analytics.js. Po wyrenderowaniu w przeglądarce kodu JavaScriptu znajdującego się na stronie wszystkie dane e-commerce będą wysyłane do Google Analytics.
Rodzaje walut
Domyślny rodzaj waluty można skonfigurować w interfejsie zarządzania. Gdy przesyłasz wartości walut za pomocą tagu analytics.js, wartość ta reprezentuje łączną wartość waluty.
Przecinek dziesiętny może służyć do oddzielania części waluty od części ułamkowej. z dokładnością do sześciu miejsc po przecinku. W przypadku pola waluty obowiązują te zasady:
1000.000001
Po przesłaniu wartości do Google Analytics cały tekst jest usuwany aż do pierwszej cyfry, znaku -
lub znaku dziesiętnego .
. Przykłady:
$-55.00
zmienią się w:
-55.00