Ulepszone e-commerce w Menedżerze tagów

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:

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, tablica productFieldObjects

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, tablica productFieldObjects

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, tablica productFieldObjects

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:

  1. Zmierz każdy etap procesu płatności za pomocą działania checkout.
  2. W razie potrzeby mierz opcje płatności za pomocą działania checkout_option.
  3. 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, tablica productFieldObjects

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

Konfiguracja e-commerce w interfejsie administracyjnym Google Analytics. Ścieżka procesu płatności jest zdefiniowana w 4 krokach: 1. Koszyk recenzji, 2. zbieranie danych do płatności; 3. Potwierdź szczegóły zakupu, 4. Paragon.
Rysunek 1. Konfiguracja e-commerce, ścieżka płatności.

Mierzenie zakupów

  • Pomiary e-commerce: purchase
  • Akceptuje dane: id (identyfikator transakcji), tablica productFieldObjects

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), tablica productFieldObjects

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.