В руководстве описывается, как реализовать в веб-интерфейсе функции Universal Analytics для расширенной электронной торговли с помощью Google Менеджера тегов.
Обзор
С помощью функций расширенной электронной торговли для Google Аналитики вы можете передавать данные о просмотре товаров, промоакциях и покупках вместе с информацией о просмотрах страниц и событиях, отслеживаемых Google Аналитикой. Просмотры страниц используются для отслеживания показов товаров и покупок, а события – для отслеживания кликов по товарам и этапов оформления покупки.
Подготовка к работе
Ознакомьтесь с разделом Типы данных и отслеживаемые действия в руководстве по расширенной электронной торговле для разработчиков. Из него вы узнаете, какие поля являются обязательными и необязательными для того или иного взаимодействия электронной торговли.
Включение функций для расширенной электронной торговли
В большинстве реализаций расширенную электронную торговлю нужно включить для каждого тега просмотра страницы или события Universal Analytics. Это можно сделать в редакторе тегов одним из следующих способов:
- с помощью уровня данных (рекомендуется);
- с помощью собственного макроса JavaScript.
Несмотря на то что оба способа обеспечивают аналогичный функционал электронной торговли, мы рекомендуем применять уровень данных на всех сайтах, которые его поддерживают. В этом руководстве речь пойдет о методе уровня данных. Информация об использовании собственных макросов JavaScript приведена в конце документа.
Использование уровня данных
Ниже описывается, как использовать уровень данных для отслеживания действий расширенной электронной торговли, таких как:
- Показы товаров
- Клики по товарам
- Показы подробных сведений о товарах
- Добавление товаров в корзину и удаление их из корзины
- Показы внутренней рекламы
- Клики по внутренней рекламе
- Оформление покупки
- Покупки
- Возврат средств
Очистка объекта электронной торговли
Перед передачей объекта электронной торговли на уровень данных рекомендуем очистить его с помощью приведенной ниже команды. Это необходимо, чтобы разные события электронной торговли на странице не влияли друг на друга.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
Показы товаров
- Показатель электронной торговли:
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: 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>
Клики по товарам
- Показатель электронной торговли:
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({ 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>
Показы сведений о товарах
- Показатель электронной торговли:
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: 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>
Добавление товаров в корзину и удаление их из корзины
- Показатель электронной торговли:
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({ 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 }] } } });
Удаление товара из корзины
// 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 }] } } });
Внутренняя реклама
Вы можете подсчитывать число показов внутренних промоакций на сайте (например, баннеров, рекламирующих распродажи категорий товаров или бесплатную доставку) и кликов по ним.
Показы внутренней рекламы
- Показатель электронной торговли:
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: 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>
Клики по внутренней рекламе
Чтобы регистрировать клики по внутренней рекламе, передайте на уровень данных действие 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({ 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>
Оформление покупок
Чтобы отслеживать все этапы оформления покупки, необходимо:
- Отслеживать каждый этап с помощью действия
checkout
. - Если применимо, отслеживать параметры покупки с помощью действия
checkout_option
. - Вы также можете присвоить понятные названия каждому шагу на пути к покупке. Для этого откройте вкладку Администратор и перейдите в раздел Настройки электронной торговли.
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({ 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. Параметры покупки
- Показатель электронной торговли:
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({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ 'event': 'checkoutOption', 'ecommerce': { 'checkout_option': { 'actionField': {'step': step, 'option': checkoutOption} } } }); } </script>
3. Настройка последовательности оформления покупки
Каждому этапу оформления покупки можно присвоить понятное название, по которому вам будет проще узнать этап в отчетах. Для этого откройте вкладку Администратор в веб-интерфейсе Google Аналитики, выберите представление (профиль) и перейдите в раздел Настройки электронной торговли. Задайте названия, следуя инструкциям.
Покупки
- Показатель электронной торговли:
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: 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>
Возвраты
- Показатель электронной торговли:
refund
. - Допустимые данные:
id
(идентификатор транзакции), массив объектовproductFieldObjects
.
Чтобы получить статистику по полному возврату суммы транзакции, передайте объект refund
с действием actionFieldObject
вместе с идентификатором возвращенной транзакции.
<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>
Чтобы получить статистику по частичному возврату, добавьте список объектов 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: 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>
Передача специальных параметров товара
Чтобы передать специальный параметр, связанный с товаром, объекту электронной торговли, добавьте в описание товара следующее обозначение:
dimensionn
Вместо n
должно быть указано натуральное число. Пример:
<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>
Передача специальных показателей товара
Чтобы передать специальный показатель, связанный с товаром, объекту электронной торговли, добавьте в описание товара следующее обозначение:
metricn
Вместо n
должно быть указано натуральное число. Пример:
<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>
Объединение показов и действий
Информацию о показах и действии можно отправить в одном обращении.
В примере ниже показано, как получить статистику по просмотру сведений о товаре с показами товара в разделе сопутствующих товаров.
<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>
Использование собственных макросов 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, выберите Включить расширенные функции электронной торговли и задайте макрос, из которого нужно читать данные.