Google.Analytics: настройка расширенной электронной торговли (Enhanced Ecommerce)

Enhanced Ecommerce — расширенная электронная торговля в Google Analytics: как настроить? Описание функций и 6 шагов по тотальному отлеживанию действий пользователя.

universal-analytics

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

1
ga('require', 'ecommerce');

1. Impression Data (Просмотренные товары)

Необходимо отправить информацию о товарах, которые были просмотрены:

1
2
3
4
5
6
7
8
9
10
11
ga('ec:addImpression', {            // объект - impressionFieldObject
  'id': 'P12345',                   // ID товара (string). Обязательный!
  'name': 'Android Warhol T-Shirt', // Название товара (string). Обязательный!
  'category': 'Apparel/T-Shirts',   // Категория товара (string).
  'brand': 'Google',                // Бренд (string).
  'variant': 'Black',               // Варианты товара (например, цвет) (string).
  'list': 'Search Results',         // Список, которому принадлежит товар (string).
  'position': 1                 // Номер в списке товаров (number).  
});
 
ga('ec:setAction', 'detail');

2. Product Data (Товары, добавленные в корзину)

1
2
3
4
5
6
7
8
ga('ec:addProduct', {               // Объект - productFieldObject.
  'id': 'P12345',                   // ID товара (string). Обязательный!
  'name': 'Android Warhol T-Shirt', // Название товара (string).
  'category': 'Apparel',            // Категория товара (string).
  'brand': 'Google',                // Product brand (string).
  'variant': 'Black',               // Product variant (string).
  'position': 1                    // Product position (number).
});

3. Promotion Data (Акционные товары)

1
2
3
4
5
6
ga('ec:addPromo', {               // Объект - promoFieldObject.
  'id': 'PROMO_1234',             // Идентификатор акции (string). Обязательный!
  'name': 'Summer Sale',          // Название акции (string). Обязательный!
  'creative': 'summer_banner2',   // Источник перехода (например, баннер), (string).
  'position': 'banner_slot1'      // Тип (например, позиция в слайдере), (string).
});

4. Action Data (Купленные товары)

1
2
3
4
5
6
7
8
ga('ec:setAction', 'purchase', {          // Объект -  actionFieldObject.
  'id': 'T12345',                         // ID товара (string). Обязательный!
  'affiliation': 'Google Store - Online', // Магазин, в котором произошла сделка (string).
  'revenue': '37.39',                     // Общая стоимость.
  'tax': '2.85',                          // Налог.
  'shipping': '5.34',                     // Доставка.
  'coupon': 'SUMMER2013'                  // Купон (промо-код) (string).
});

5. Product and Promotion Actions (Связь между акциями и купленными товарами)

1
2
3
ga('ec:setAction', 'click', {       // действие.
  'list': 'Search Results'          // Список товаров (string).
});

Варианты действий:

  • click — просмотр продукта в списке товаров или на странице товаров. /li>
  • detail — просмотр детальной информации о товаре.
  • add — добавление одного или нескольких товаров в корзину.
  • remove — удаление одного или нескольких товаров из корзины.
  • checkout — процесс проверки одного или более товаров.
  • checkout_option — отправка начала проверки.
  • purchase — покупка одно или более товаров. /li>
  • refund — возврат одно или более товаров.
  • promo_click — промо-действие.

6. Refunds Data (Возврат товара)

Полный возврат заказа

1
2
3
ga('ec:setAction', 'refund', {
  'id': 'T12345'    // ID транзакции.
});

Возврат отдельного товара

1
2
3
4
5
6
7
8
ga('ec:addProduct', {
  'id': 'P12345',       // ID товара
  'quantity': 1         // Количество.
});
 
ga('ec:setAction', 'refund', {
  'id': 'T12345',       // ID транзакции.
});

Порядок действий для отслеживания

Шаг 1

Отслеживаем появление в списках (выборках) товаров. Другими словами, товар показали пользователю — зафиксировали это в Ecommerce.

Например, проходим по всем элементам списка каталога, собираем информацию в массив и передаем в Гугл.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	$(".product_catalog > li").each(function(){
		i = i+1;
	        product_catalog[i] = {
			'id': ID,
			'name': name,
			'category': category,
			'brand': brand,
			'variant': variant,
			'list': list,
			'position': i
			}
 
		ga('ec:addImpression', product_catalog[i]);
		ga('ec:setAction', 'detail');
	})

Шаг 2

Фиксируем переход из списков (выборок) товаров на саму карточку товара. Для этого добавляем функцию onProductClick() по нажатию на кнопку\ссылку «узнать подробнее».

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	function onProductClick(id, name, category){
 
		var addProduct = new Array();
		addProduct = {
			'id': id,
			'name': name,
			'category': category,
			'brand': '',
			'variant': '',
			'position': ''
		}
 
		ga('ec:addProduct', addProduct);
		ga('ec:setAction', 'click', {list: 'Search Results'});	
	});

Шаг 3

Отправляем в Ecommerce о просмотре детальной информации в карточке товара. На каждой страницы карточки товара необходимо разместить код, который сообщит, что пользователь её просмотрел.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	$('.product_box').each(function(){
		var addProduct = new Array();
 
		addProduct ={
		  'id': id,
		  'name':  name,
		  'category': category,
		  'brand': '',
		  'variant': ''
		}
 
		ga('ec:addProduct', addProduct);
		ga('ec:setAction', 'detail');
		ga('send', 'pageview'); 	
 
	})

Шаг 4

Отлеживаем добавление или удаление в корзину товаров. Для этого добавляем функцию AddToCart() и removeCart(). Конечно, лучше передавать всю информацию, но если, например, интернет-магазин организован таким образом, что всё не заполнить — отправляем просто пустые значения.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
	function AddToCart(id, name, price) {
		var add_to_card = new Array();
 
		add_to_card = {
			'id': id,
			'name': name,
			'category': '',
			'brand': '',
			'variant': '',
			'price': price,
			'quantity': 1
		}
 
		ga('ec:addProduct', add_to_card);
		ga('ec:setAction', 'add');
		ga('send', 'event', 'UX', 'click', 'add to cart');     // Send data using an event.		
 
	}   
 
 
          function removeCart(id, name, price) {
		var remove_to_card = new Array();
 
	        remove_to_card = {
			'id': id,
			'name': name,
			'category': '',
			'brand': '',
			'variant': '',
			'price': price,
			'quantity': 1
		}
 
		ga('ec:addProduct', remove_to_card);
		ga('ec:setAction', 'remove');
		ga('send', 'event', 'UX', 'click', 'remove to cart');   
 
	}

Шаг 5

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

ga-ec

1. Оформление

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function checkout(cart) {
  for(var i = 0; i < cart.length; i++) {
    var product = cart[i];
    ga('ec:addProduct', {
      'id': product.id,
      'name': product.name,
      'category': product.category,
      'brand': product.brand,
      'variant':  product.variant,
      'price': product.price,
      'quantity': product.qty
    });
  }
}
 
ga('ec:setAction','checkout', {
    'step': 1,            
    'option': 'Visa'     
});
ga('send', 'pageview');

2. Доставка

Повторяем сначала тоже самое, оповещая, что товары никуда не делись и отправляем информацию о доставке по завершению (нажатию на кнопку «отправить»).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function checkout(cart) {
  for(var i = 0; i < cart.length; i++) {
    var product = cart[i];
    ga('ec:addProduct', {
      'id': product.id,
      'name': product.name,
      'category': product.category,
      'brand': product.brand,
      'variant':  product.variant,
      'price': product.price,
      'quantity': product.qty
    });
  }
}
 
ga('ec:setAction','checkout', {'step': 2});
ga('send', 'pageview');

Функцию с информацией о доставке, вызывается при переходе на удачное завершение.

1
2
3
4
5
6
7
8
9
10
11
function onShippingComplete(stepNumber, shippingOption) {
  ga('ec:setAction', 'checkout_option', {
    'step': stepNumber,
    'option': shippingOption
  });
 
  ga('send', 'event', 'Checkout', 'Option', {
     hitCallback: function() {
       // Advance to next page.
     }
  });

Шаг 6

Итоговая информация о транзакции: сначала все товары, потом общую статистику заказа.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('.product').each(function(){
  ga('ec:addProduct', {
    'id': 'id',
    'name': name,
    'category': category,
    'brand': brand,
    'variant': variant,
    'price': price,
    'quantity': quantity
  });
})
 
ga('ec:setAction', 'purchase', {
  'id': id,
  'affiliation': affiliation,
  'revenue': revenue,
  'tax': tax,
  'shipping': shipping,
  'coupon': coupon    
});
 
ga('send', 'pageview');

Официально обо всё (на английском языке) — тут.

Что получится?

Можно отследить: сколько раз этот товар показывался в списках, сколько раз его просматривали, добавили или удалили из корзины, завершили покупку, т.е. получить очень серьезную пищу для аналитики. Например, какие-то товары, можно будет «поднять» в списке товаров, а какие-то наоборот опустить. Увидеть, какие позиции удаляют из корзины наиболее часто.

table

table-2

P.S. Настраивал расширенную электронную торговлю впервые, вроде как всё получилось, но могут быть ошибки, если найдёте неточности, с удовольствием исправлю — пишите!

  • Дмитрий Рубцов

    Здравствуйте! У вас в блоке «1. Impression Data» после ec:addImpression вызывается действие detail, но насколько я понял, его не нужно вызывать при показе товаров (списка товаров). Оно обозначает просмотр карточки товара.