Z tego przewodnika dowiesz się, jak wdrożyć w witrynie funkcje Ulepszonego e-commerce Universal Analytics za pomocą Menedżera tagów Google.
Przegląd
Ulepszony e-commerce w Google Analytics umożliwia wysyłanie danych o wyświetleniach, promocjach i sprzedaży produktów ze wszystkimi odsłonami i zdarzeniami Google Analytics. Używaj danych o odsłonach do śledzenia wyświetleń produktów i zakupów produktów. Używaj zdarzeń do śledzenia etapów procesu płatności i kliknięć produktów.
Zanim zaczniesz
Zapoznaj się z sekcją Typy danych i działania ulepszonego e-commerce w Przewodniku dla programistów Ulepszonego e-commerce, by zaplanować implementację. Z tego przewodnika dowiesz się, które pola są wymagane, a które opcjonalne w przypadku każdej interakcji e-commerce, którą chcesz mierzyć.
Włączanie Ulepszonego e-commerce
W większości implementacji należy włączać Ulepszone e-commerce w każdym tagu zdarzenia lub odsłony strony Universal Analytics. Ulepszone e-commerce możesz włączyć na 2 sposoby na ekranie edytora tagów w interfejsie internetowym:
- Implementacja z użyciem warstwy danych (zalecane)
- Implementacja z użyciem niestandardowego makra JavaScript
Chociaż obie metody zapewniają równoważne funkcje e-commerce, zalecamy jednak stosowanie metody Warstwa danych we wszystkich witrynach obsługujących warstwę danych. W tym przewodniku jako domyślną metodę warstwy danych opisujemy, natomiast na końcu tego przewodnika znajduje się dokumentacja Używanie niestandardowego makra JavaScript.
Korzystanie z warstwy danych
Z tych sekcji dowiesz się, jak za pomocą warstwy danych mierzyć te działania ulepszonego e-commerce:
- Wyświetlenia produktu
- Kliknięcia produktu
- Wyświetlenia szczegółów produktu
- Dodanie do koszyka / usunięcie go z koszyka
- Wyświetlenia promocji
- Kliknięcia promocji
- Strona płatności
- Zakupy
- Zwroty środków
Czyszczenie obiektu e-commerce
Zalecamy użycie poniższego polecenia, aby wyczyścić obiekt e-commerce przed przekazaniem zdarzenia e-commerce na warstwę danych. Dzięki wyczyszczeniu obiektu wiele zdarzeń e-commerce na stronie nie będzie wpływać na siebie nawzajem.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
Pomiar wyświetleń produktów
- Pomiary e-commerce:
impressions
- Akceptuje dane: tablica
impressionFieldObjects
Wyświetlenia produktu możesz mierzyć za pomocą działania impression
i co najmniej 1 elementu impressionFieldObjects
. W tym przykładzie założono, że informacje o produktach wyświetlane na stronie są znane podczas wczytywania strony:
<script> // Measures product impressions and also tracks a standard // pageview for the tag configuration. // Product impressions are sent by pushing an impressions object // containing one or more impressionFieldObjects. dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'ecommerce': { 'currencyCode': 'EUR', // Local currency is optional. 'impressions': [ { 'name': 'Triblend Android T-Shirt', // Name or ID is required. 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'list': 'Search Results', 'position': 1 }, { 'name': 'Donut Friday Scented T-Shirt', 'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Black', 'list': 'Search Results', 'position': 2 }] } }); </script>
Pomiar kliknięć produktu
- Pomiary e-commerce:
click
- Akceptuje dane:
list
, tablicaproductFieldObjects
Kliknięcia linków do produktów możesz mierzyć, przekazując działanie click
do warstwy danych (wraz z operatorem productFieldObject
reprezentującym kliknięty produkt jak w tym przykładzie):
<script> /** * Call this function when a user clicks on a product link. This function uses the event * callback datalayer variable to handle navigation after the ecommerce data has been sent * to Google Analytics. * @param {Object} productObj An object representing a product. */ function(productObj) { dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'event': 'productClick', 'ecommerce': { 'click': { 'actionField': {'list': 'Search Results'}, // Optional list property. 'products': [{ 'name': productObj.name, // Name or ID is required. 'id': productObj.id, 'price': productObj.price, 'brand': productObj.brand, 'category': productObj.cat, 'variant': productObj.variant, 'position': productObj.position }] } }, 'eventCallback': function() { document.location = productObj.url } }); } </script>
Pomiar wyświetleń szczegółów produktu
- Pomiary e-commerce:
detail
- Akceptuje dane:
list
, tablicaproductFieldObjects
Możesz mierzyć widok szczegółów produktu, przekazując do warstwy danych działanie detail
wraz z co najmniej 1 elementem productFieldObjects
reprezentującym wyświetlane produkty:
<script> // Measure a view of product details. This example assumes the detail view occurs on pageload, // and also tracks a standard pageview of the details page. dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'ecommerce': { 'detail': { 'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property. 'products': [{ 'name': 'Triblend Android T-Shirt', // Name or ID is required. 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray' }] } } }); </script>
Pomiar dodania lub usunięcia z koszyka
- Pomiary e-commerce:
add
,remove
- Akceptuje dane:
list
, tablicaproductFieldObjects
Podobnie możesz mierzyć dodania lub usunięcia elementów z koszyka za pomocą funkcji actionFieldObject
add
lub remove
i listy productFieldObjects
:
Dodawanie produktu do koszyka
// Measure adding a product to a shopping cart by using an 'add' actionFieldObject // and a list of productFieldObjects. dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'event': 'addToCart', 'ecommerce': { 'currencyCode': 'EUR', 'add': { // 'add' actionFieldObject measures. 'products': [{ // adding a product to a shopping cart. 'name': 'Triblend Android T-Shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'quantity': 1 }] } } });
Usuwanie produktu z koszyka
// Measure the removal of a product from a shopping cart. dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'event': 'removeFromCart', 'ecommerce': { 'remove': { // 'remove' actionFieldObject measures. 'products': [{ // removing a product to a shopping cart. 'name': 'Triblend Android T-Shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'quantity': 1 }] } } });
Pomiary promocji
Możesz mierzyć zarówno wyświetlenia, jak i kliknięcia w ramach wewnętrznych promocji w witrynie, np. banerów wyświetlanych na stronie reklamujących wyprzedaż konkretnego podzbioru produktów lub oferty bezpłatnej dostawy.
Pomiar wyświetleń promocji
- Pomiary e-commerce:
promoView
- Akceptuje dane: tablica
promoFieldObjects
Aby zmierzyć wyświetlenie promocji, ustaw dla klucza promoView
w zmiennej warstwy danych e-commerce wartość promoFieldObject
, która opisuje promocje wyświetlane użytkownikom na stronie:
<script> // An example of measuring promotion views. This example assumes that // information about the promotions displayed is available when the page loads. dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'ecommerce': { 'promoView': { 'promotions': [ // Array of promoFieldObjects. { 'id': 'JUNE_PROMO13', // ID or Name is required. 'name': 'June Sale', 'creative': 'banner1', 'position': 'slot1' }, { 'id': 'FREE_SHIP13', 'name': 'Free Shipping Promo', 'creative': 'skyscraper1', 'position': 'slot2' }] } } }); </script>
Pomiar kliknięć promocji
Aby mierzyć kliknięcie promocji, przekaż działanie promoClick
do warstwy danych z tablicą zawierającą atrybut promoFieldObject
opisujący klikniętą promocję:
<script> /** * Call this function when a user clicks on a promotion. This function uses the eventCallBack * datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics. * * @param {Object} promoObj An object representing an internal site promotion. */ function onPromoClick(promoObj) { dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'event': 'promotionClick', 'ecommerce': { 'promoClick': { 'promotions': [ { 'id': promoObj.id, // Name or ID is required. 'name': promoObj.name, 'creative': promoObj.creative, 'position': promoObj.pos }] } }, 'eventCallback': function() { document.location = promoObj.destinationUrl; } }); } </script>
Pomiar procesu płatności
Aby mierzyć każdy etap procesu płatności, musisz:
- Zmierz każdy etap procesu płatności za pomocą działania
checkout
. - W razie potrzeby mierz opcje płatności za pomocą działania
checkout_option
. - Opcjonalnie określ łatwe w użyciu nazwy kroków w raporcie ścieżki płatności. Aby to zrobić, skonfiguruj Ustawienia e-commerce w sekcji Administracja interfejsu internetowego.
1. Pomiary kroków procesu płatności
- Pomiary e-commerce:
checkout
- Akceptuje dane:
step
, tablicaproductFieldObjects
Aby mierzyć proces płatności, który może obejmować przycisk płatności i co najmniej jedną stronę płatności, na której użytkownicy podają dane dotyczące dostawy i płatności, użyj działania checkout
i pola step
, aby wskazać etap procesu płatności, który jest mierzony.
W polu option
możesz też podać dodatkowe dane o stronie, np. typ płatności wybrany przez użytkownika.
<script> /** * A function to handle a click on a checkout button. This function uses the eventCallback * data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics. */ function onCheckout() { dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'event': 'checkout', 'ecommerce': { 'checkout': { 'actionField': {'step': 1, 'option': 'Visa'}, 'products': [{ 'name': 'Triblend Android T-Shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'quantity': 1 }] } }, 'eventCallback': function() { document.location = 'checkout.html'; } }); } </script>
2. Pomiar opcji realizacji transakcji
- Pomiary e-commerce:
checkout_option
- Akceptuje dane:
step
,option
Opcja płatności jest przydatna w przypadku, gdy etap procesu płatności został już zmierzony, ale chcesz rejestrować dodatkowe informacje o tym samym kroku. Może to być na przykład sposób dostawy wybrany przez użytkownika.
Aby to zrobić, użyj działania checkout_option
w połączeniu z polami step
i option
.
<script> /** * A function to handle a click leading to a checkout option selection. */ function onCheckoutOption(step, checkoutOption) { dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'event': 'checkoutOption', 'ecommerce': { 'checkout_option': { 'actionField': {'step': step, 'option': checkoutOption} } } }); } </script>
3. Konfiguracja ścieżki płatności
Opcjonalnie każdemu etapowi procesu płatności możesz nadać opisową nazwę, która będzie używana w raportach. Aby skonfigurować te nazwy, przejdź do sekcji Administracja w interfejsie internetowym Google Analytics, wybierz widok (profil) i kliknij Ustawienia e-commerce. Postępuj zgodnie z instrukcjami konfiguracji e-commerce, aby oznaczyć etykietą każdy krok procesu płatności, który chcesz śledzić.
Mierzenie zakupów
- Pomiary e-commerce:
purchase
- Akceptuje dane:
id
(identyfikator transakcji), tablicaproductFieldObjects
Przekaż szczegóły transakcji do warstwy danych za pomocą działania purchase
i elementu event
, które będzie uruchamiać tag z włączonym Ulepszonym e-commerce. W tym przykładzie szczegóły transakcji są znane w momencie załadowania strony i zostaną wysłane razem z odsłoną, gdy skrypt gtm.js
zwróci:
<script> // Send transaction data with a pageview if available // when the page loads. Otherwise, use an event when the transaction // data becomes available. dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'ecommerce': { 'purchase': { 'actionField': { 'id': 'T12345', // Transaction ID. Required for purchases and refunds. 'affiliation': 'Online Store', 'revenue': '35.43', // Total transaction value (incl. tax and shipping) 'tax':'4.90', 'shipping': '5.99', 'coupon': 'SUMMER_SALE' }, 'products': [{ // List of productFieldObjects. 'name': 'Triblend Android T-Shirt', // Name or ID is required. 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'quantity': 1, 'coupon': '' // Optional fields may be omitted or set to empty string. }, { 'name': 'Donut Friday Scented T-Shirt', 'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Black', 'quantity': 1 }] } } }); </script>
Pomiar zwrotów
- Pomiary e-commerce:
refund
- Akceptuje dane:
id
(identyfikator transakcji), tablicaproductFieldObjects
Aby mierzyć pełny zwrot środków za transakcję, prześlij wskaźnik refund
actionFieldObject
wraz z identyfikatorem transakcji transakcji, za którą zwracamy środki:
<script> // Refund an entire transaction by providing the transaction ID. This example assumes the details // of the completed refund are available when the page loads: dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'ecommerce': { 'refund': { 'actionField': {'id': 'T12345'} // Transaction ID. Required for purchases and refunds. } } }); </script>
Aby zmierzyć częściowy zwrot środków, dodaj listę wartości productFieldObjects
wraz z identyfikatorami produktów i ilościami, za które chcesz otrzymać zwrot środków:
<script> // Measure a partial refund by providing an array of productFieldObjects and specifying the ID and // quantity of each product being returned. This example assumes the partial refund details are // known at the time the page loads: dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'ecommerce': { 'refund': { 'actionField': {'id': 'T12345'}, // Transaction ID. 'products': [ {'id': 'P4567', 'quantity': 1}, // Product ID and quantity. Required for partial refunds. {'id': 'P8901','quantity': 2} ] } } }); </script>
Przekazywanie wymiarów niestandardowych ograniczonych do produktu
Aby przekazać do obiektu e-commerce wymiar niestandardowy ograniczony do produktu, dodaj go do produktu w następujący sposób:
dimensionn
gdzie n
to liczba naturalna, na przykład:
<script> dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'ecommerce': { 'purchase': { ... 'products': [{ 'name': 'Triblend Android T-Shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'dimension1': 'Same day delivery' }] } } }); </script>
Przekazywanie danych niestandardowych o zakresie na poziomie produktu
Aby przekazywać do obiektu e-commerce dane niestandardowe o zakresie na poziomie produktu, dodaj je do produktu w ten sposób:
metricn
gdzie n
to liczba naturalna, na przykład:
<script> dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'ecommerce': { 'purchase': { ... 'products': [{ 'name': 'Goal Flow Garden Hose', 'id': 'p001', 'brand': 'Google Analytics', 'category': 'Home Goods', 'variant': 'Green', 'price': '20', 'quantity': 1, 'metric3': '10' // Custom metric 'Cost' }] } } }); </script>
Łączenie wyświetleń i działań
Jeśli masz zarówno wyświetlenia produktu, jak i działanie, możesz je połączyć i objąć pomiarem w jednym działaniu.
Poniższy przykład pokazuje, jak zmierzyć widok szczegółów produktu z wyświetleniami produktów w sekcji produktów powiązanych:
<script> dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'ecommerce': { 'impressions': [ { 'name': 'Triblend Android T-Shirt', // Name or ID is required. 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'list': 'Related Products', 'position': 1 }, { 'name': 'Donut Friday Scented T-Shirt', 'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Black', 'list': 'Related Products', 'position': 2 }], 'detail': { 'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property. 'products': [{ 'name': 'Triblend Android T-Shirt', // Name or ID is required. 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray' }] } } }); </script>
Korzystanie z niestandardowego makra JavaScript
Jeśli Twoja witryna nie obsługuje warstwy danych, możesz wywołać funkcję, która zwraca obiekt danych e-commerce, za pomocą niestandardowego makra JavaScript. Obiekt powinien używać składni warstwy danych omówionej we wcześniejszej części tego przewodnika, na przykład:
// A custom JavaScript macro that returns an ecommerceData object // that follows the data layer syntax. function() { var ecommerceData = { 'ecommerce': { 'purchase': { 'actionField': {'id': 'T12345'}, 'products': [ // List of productFieldObjects ], ... // Rest of the code should follow the data layer syntax. } }; return ecommerceData; }
Jeśli zamiast warstwy danych zdecydujesz się używać niestandardowego makra JavaScriptu, wybierz Włącz funkcje ulepszonego e-commerce i ustaw opcję Odczytaj dane z makra.