Руководство по расширенной электронной торговле для разработчиков (Universal Analytics)

В этом руководстве описывается, как реализовать на сайте функции Universal Analytics для расширенной электронной торговли с помощью Google Менеджера тегов.

Обзор

С помощью функций расширенной электронной торговли для Google Аналитики вы можете передавать данные о просмотре товаров, промоакциях и покупках вместе с информацией о просмотрах страниц и событиях, отслеживаемых Google Аналитикой. Просмотры страниц используются для отслеживания показов товаров и покупок, а события – для отслеживания кликов по товарам и этапов оформления покупки.

Подготовка к работе

Ознакомьтесь с разделом Типы данных и отслеживаемые действия в руководстве по расширенной электронной торговле для разработчиков. Из него вы узнаете, какие поля являются обязательными и необязательными для того или иного взаимодействия электронной торговли.

Включение функций для расширенной электронной торговли

В большинстве реализаций расширенную электронную торговлю нужно включить для каждого тега просмотра страницы или события Universal Analytics. Это можно сделать в редакторе тегов одним из следующих способов:

  • с помощью уровня данных (рекомендуется);
  • с помощью собственного макроса JavaScript.

Несмотря на то что оба способа обеспечивают аналогичный функционал электронной торговли, мы рекомендуем применять уровень данных на всех сайтах, которые его поддерживают. В этом руководстве речь пойдет о методе уровня данных. Информация об использовании собственных макросов JavaScript приведена в конце документа.

С помощью уровня данных

Ниже описывается, как использовать уровень данных для отслеживания действий расширенной электронной торговли, таких как:

Показы товаров

  • Показатель электронной торговли: impressions.
  • Допустимые данные: массив объектов impressionFieldObjects.

Для подсчета показов товаров используйте действия impression, а также один или несколько объектов impressionFieldObjects. В примере ниже предполагается, что сведения о товарах, которые будут отображены на странице, известны в момент ее загрузки.

<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': {
    '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>

Клики по товарам

  • Показатель электронной торговли: click.
  • Допустимые данные: list, массив объектов productFieldObjects.

Чтобы подсчитывать клики по ссылкам на товары, передайте на уровень данных действие click и объект productFieldObject для нужных товаров (см. пример кода ниже).

<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({
    '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>

Показы сведений о товарах

  • Показатель электронной торговли: detail.
  • Допустимые данные: list, массив объектов productFieldObjects.

Чтобы подсчитывать показы подробных сведений о товаре, передайте на уровень данных действие detail, а также один или несколько объектов productFieldObjects для просматриваемых товаров.

<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': {
    '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>

Добавление товаров в корзину и удаление их из корзины

  • Показатель электронной торговли: add, remove.
  • Допустимые данные: list, массив объектов productFieldObjects.

Аналогичным образом можно подсчитывать число добавленных в корзину или и удаленных из нее товаров. Для этого используйте объекты действий add или remove класса actionFieldObject, а также список объектов productFieldObjects.

Добавление товара в корзину

// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
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
       }]
    }
  }
});

Удаление товара из корзины

// Measure the removal of a product from a shopping cart.
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
      }]
    }
  }
});

Промоакции

Вы можете подсчитывать число показов внутренних промоакций на сайте (например, баннеров, рекламирующих распродажи категорий товаров или бесплатную доставку) и кликов по ним.

Показы промоакций

  • Показатель электронной торговли: promoView.
  • Допустимые данные: массив объектов promoFieldObjects.

Чтобы подсчитать число показов промоакции, укажите в качестве ключа promoView переменной на уровне данных электронной торговли объект promoFieldObject, соответствующий промоакции на странице.

<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': {
    '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>

Клики по промоакциям

Чтобы подсчитать число кликов по промоакции, передайте на уровень данных действие promoClick, а также массив данных с объектом promoFieldObject, содержащим ее описание.

<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({
    '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>

Оформление покупок

Чтобы фиксировать каждый этап оформления и оплаты покупки, необходимо:

  1. Реализовать отслеживание каждого этапа с помощью действия checkout.
  2. Если необходимо, настроить отслеживание параметров покупки с помощью действия checkout_option.
  3. Вы также можете присвоить понятные названия каждому шагу на пути к покупке. Для этого откройте вкладку Администратор и перейдите в раздел Настройки электронной торговли.

1. Этапы оформления покупки

  • Показатель электронной торговли: checkout.
  • Допустимые данные: step, массив объектов productFieldObjects.

Чтобы получать статистику по процедуре оформления покупки (которая может включать в себя нажатия кнопки "Купить", а также действия на нескольких страницах, где пользователь указывает адрес доставки и другие реквизиты), задайте ее этапы с помощью действия checkout и поля step. Также с помощью поля option вы можете запрашивать со страницы дополнительную информацию, например о выбранном способе оплаты.

<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({
    '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. Параметры покупки

  • Показатель электронной торговли: checkout_option.
  • Допустимые данные: step, option.

Данные о параметрах покупки могут пригодиться, если вы уже получили информацию о каком-либо этапе ее оформления, но вам нужны дополнительные сведения. Например, о том, какой способ доставки выбрал пользователь. Для их сбора используйте действие checkout_option, а также поля step и option.

<script>
/**
 * A function to handle a click leading to a checkout option selection.
 */
function onCheckoutOption(step, checkoutOption) {
  dataLayer.push({
    'event': 'checkoutOption',
    'ecommerce': {
      'checkout_option': {
        'actionField': {'step': step, 'option': checkoutOption}
      }
    }
  });
}
</script>

3. Настройка последовательности оформления покупки

Каждому этапу оформления покупки можно присвоить понятное название, по которому вам будет проще узнать этап в отчетах. Для этого откройте вкладку Администратор в веб-интерфейсе Google Аналитики, выберите представление (профиль) и перейдите в раздел Настройки электронной торговли. Задайте названия, следуя инструкциям.

Настройка расширенной электронной торговли в интерфейсе администратора Google Аналитики. Нужно задать четыре шага последовательности оформления покупки: 1. Просмотр корзины. 2. Предоставление платежной информации. 3. Подтверждение информации о покупке. 4. Квитанция об оплате.
Рис. 1. Настройки электронной торговли: последовательность оформления покупки

Покупки

  • Показатель электронной торговли: purchase.
  • Допустимые данные: id (идентификатор транзакции), массив объектов productFieldObjects.

Передайте сведения о транзакции на уровень данных с помощью действия purchase и события event, которое будет активировать тег для расширенной электронной торговли. В примере ниже данные транзакции известны в момент загрузки страницы. Они будут переданы с просмотром страницы в ответе скрипта gtm.js:

<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': {
    '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>

Возвраты

  • Показатель электронной торговли: refund.
  • Допустимые данные: id (идентификатор транзакции), массив объектов productFieldObjects.

Чтобы получить статистику по полному возврату суммы транзакции, передайте объект actionFieldObject с действием refund вместе с идентификатором возвращенной транзакции.

<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': {
    'refund': {
      'actionField': {'id': 'T12345'}         // Transaction ID. Required for purchases and refunds.
    }
  }
});
</script>

Чтобы получить статистику по частичному возврату, добавьте список объектов productFieldObjects с идентификаторами товаров и возвращаемыми суммами.

<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': {
    'refund': {
      'actionField': {'id': 'T12345'},        // Transaction ID.
      'products': [
            {'id': 'P4567', 'quantity': 1},   // Product ID and quantity. Required for partial refunds.
            {'id': 'P8901','quantity': 2}
       ]
     }
  }
});
</script>

Передача специальных параметров товара

Чтобы передать специальный параметр, связанный с товаром, объекту электронной торговли, добавьте в описание товара следующее обозначение:

  dimensionn

Вместо n должно быть указано натуральное число. Пример: 

<script>
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>

Передача специальных показателей товара

Чтобы передать специальный показатель, связанный с товаром, объекту электронной торговли, добавьте в описание товара следующее обозначение:

  metricn

Вместо n должно быть указано натуральное число. Пример: 

<script>
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>

Совместная отправка данных о показах и действиях

Данные о показах товара и действии можно передавать в одном обращении и отслеживать их вместе.

В примере ниже вы увидите, как получить статистику по просмотру сведений о товаре с показами товара в разделе "С этим часто покупают".

<script>
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>

Использование собственных макросов JavaScript

Если ваш сайт не поддерживает уровень данных, используйте собственный макрос JavaScript для вызова функции, которая возвращает объект данных электронной торговли. В объекте должен соблюдаться синтаксис уровня данных, приведенный выше. Например:

// 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;
}

Если вы решите использовать вместо уровня данных собственный макрос JavaScript, выберите Включить расширенные функции электронной торговли и задайте макрос, из которого нужно читать данные.