Настройка расширенной электронной торговли с помощью Google Tag Manager
Сегодня, анализируя e-commerce проекты, специалисты часто сталкиваются с недостатком данных по продажам, поведению пользователей при совершении (или не совершении) покупки, эффективности тех или иных категорий товаров. Какие-то из этих недостатков решаются с помощью стандартного функционала Google Analytics, а есть те, которые так и остаются белыми пятнами на карте продаж интернет-магазина.
Но модуль расширенной электронной торговли решает эти проблемы. А определенные сложности с его имплементацией сполна окупает богатый функционал и возможности, которые он предоставляет.
Для отслеживания детального процесса покупки, которую выполняют посетители, необходимо установить на сайт определенные фрагменты кода.
Необходимо отслеживание следующих действий расширенной электронной торговли (для примера взят интернет-магазин строительной тематики):
- Показы товаров (Product Impressions);
- Клики по товарам (Product Clicks);
- Переход на карточку товара (Product Detail Impressions);
- Добавление/удаление товара из корзины (Add / Remove from Cart);
- Показы промо (Promotion Impressions);
- Клики по промо (Promotion Clicks);
- Процесс оформления покупки (Checkout).
- Корзина
- Оформление заказа (этап 1: контактные данные)
- Оформление заказа (этап 2: способ доставки)
- Корзина
- Совершение транзакций (Purchases).
Как правило, предлагается размещать код отправки необходимых данных на каждой соответствующей странице. Однако для более экономичного использования ресурсов в данном случае было удобно использовать общий для всего сайта js объект, который аккумулирует методы отслеживания. Каждый метод принимает данные в формате, предоставленном справкой по Enhanced Ecommerce. В свою очередь эти данные уже собираются на всех нужных страницах сайта и отправляются через общий скрипт.
В примерах используется jQuery для работы с DOM деревом.
Ниже приведены фрагменты кода, которые следует разместить на сайте.
1.Измерение показов товаров
Метод отслеживания: impressions
В данном примере отправляется информация о показанных на странице товарах. Выполняться этот код должен при загрузке страницы для видимых товаров, а для товаров в скрытых блоках (например, слайдерах или скрытых блоках, раскрывающихся по нажатию на контролы) – сразу по отображению их клиенту (можно повесить callback функции на соответствующие события слайдеров и пр.)
|
1
2
3
4
5
6
7
8
9
|
<script>
…
var products = [];
...
// Производим заполнение массива товаров, отображаемых на странице
...
/* Отправка товаров через глобальный объект для работы с dataLayer */
EeProcessor.productImpressions(products);
</script>
|
Массив products собирается согласно руководству и имеет подобный вид:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
[
{
«name»:«Аккумуляторный шуруповёрт Bort BAB-10,8N-LiD»,
«id»:«5059»,
«price»:«1412.04»,
«brand»:«Bort»,
«category»:«Электроинструмент и оборудование»,
«list»:«common/home»,
«position»:1
},
{
«name»:«Аккумуляторный шуруповёрт Hitachi DS12DVF 3 12V. набор NEW»,
«id»:«5064»,
«price»:«2398.50»,
«brand»:«Hitachi»,
«category»:«Электроинструмент и оборудование»,
«list»:«common/home»,
«position»:2
}
]
|
Далее приведем пример самого метода отправки EeProcessor.productImpressions():
|
1
2
3
4
5
6
7
8
9
10
|
productImpressions: function (products) {
this._log({‘productImpressions’: products});
dataLayer.push({
‘ecommerce’: {
‘currencyCode’: ‘UAH’,
‘impressions’: products
}
});
}
|
2.Отслеживание кликов по товару
Метод отслеживания: click
Пользователь кликает на заинтересовавший его товар, чтобы узнать о нем подробнее.
Для отслеживания клика по ссылке важно помнить про асинхронность javascript, и что браузер не будет ждать, пока в dataLayer произойдут все нужные действия, а просто перенаправит клиента по ссылке. Чтобы этого избежать, обязательно передаем eventCallback параметр и, конечно, собственно запрещаем браузеру переходить по ссылке.
Также может появиться проблема у клиентов, которые ставят различные хитрые блокировщики рекламы и скриптов отслеживания. Так одно из таких расширений в Chrome блокирует запросы, которые взаимодействуют с узлом https://www.googletagmanager.com, что приводит к тому, что скрипт gtm может не подгрузиться на странице. В таком случае не dataLayer будет просто глобальным объектом окна и все действия, которые мы от него ожидаем, не будут выполнены. Самое критичное – отсутствие перехода по тем ссылкам, которые обрабатываются через ‘eventCallback’ параметр. Для такого варианта стоит, например, добавить проверку на наличие объекта google_tag_manager, как мы покажем в примере ниже.
Структура собираемых данных о товаре известна (см. справку по Enhanced Ecommerce). Единственное, на чем хотелось бы заострить внимание – это поле ‘list’ – оно дает возможность анализировать клики по товарам в разрезе типов страниц (передавая его в событии ‘click’ в параметр ‘actionField’). Приведем код, выполняемый при клике на товаре:
|
1
2
3
4
5
6
7
8
9
|
/* Событие productClick в списке товаров категории */
$productLinks.click(function (e) {
e.preventDefault();
// сбор объекта товара
var product = getProductInCategory($(this).parents(‘div.product-thumb’));
product.list = «category»;
var url = $(this).attr(‘href’);
EEProcessor.productClick([product], url);
});
|
Теперь рассмотрим сам метод отправки данных через dataLayer:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
productClick: function (products, url) {
this._log({‘productClick’: products});
dataLayer.push({
‘event’: ‘productClick’,
‘ecommerce’: {
‘click’: {
‘actionField’: {‘list’: products[0].list}, ‘products’: products
}
},
‘eventCallback’: function() {
document.location = url
}
});
/* Если используется блокировщик GTM скрипта не препятствуем переходу */
if (typeof google_tag_manager == «undefined») {
document.location = url;
}
},
|
3.Переход на карточку товара
Метод отслеживания: detail
Подсчет количества просмотров карточки товара. Вызываем этот метод при загрузке страницы товара.
|
1
2
3
4
|
$(function(){
/* Событие productDetails в карточке товара */
EEProcessor.productDetails([getMainProduct()]);
});
|
Метод отправки этого события (несмотря на то, что логически здесь должен быть объект, детали которого просматривает клиент, всё же должен быть массив ‘products’):
|
1
2
3
4
5
6
7
8
9
10
11
12
|
productDetails: function(products){
this._log({‘productDetails’: products});
dataLayer.push({
‘ecommerce’: {
‘detail’: {
‘actionField’: {‘list’: ‘product’},
‘products’: products
}
}
});
},
|
4.Отслеживание добавления/удаления товара в/из корзины
Метод отслеживания: add, remove
Пользователь собирается купить товар, предварительно отправив его в корзину.
Чтобы зарегистрировать добавление в корзину покупок (или удаление из нее), используйте тип действия addToCart (для удаления removeFromCart) и список productFieldObjects (products в нашем случае). Приведем пример методов добавления и удаления товаров из корзины:
|
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
|
/**
* @param {Array} products
*/
addToCart: function (products) {
this._log({‘addToCart’: products});
dataLayer.push({
‘event’: ‘addToCart’,
‘ecommerce’: {
‘currencyCode’: ‘UAH’,
‘add’: {
‘actionField’: {‘list’: products[0].list},
‘products’: products
}
}
});
},
/**
* @param {Array} products
*/
removeFromCart: function (products) {
this._log({‘removeFromCart’: products});
dataLayer.push({
‘event’: ‘removeFromCart’,
‘ecommerce’: {
‘remove’: {
‘products’: products
}
}
});
},
|
Для каждого типа блоков страницы организуем свой компоновщик массива products. Например, в блоке “Рекомендуемые товары” представлены товары с кнопкой “Купить” и находится этот блок на странице товара. В таком случае нужно иметь обработчик кнопки “Купить” как для основного товара страницы, так и для рекомендуемых. Тогда у нас будет 2 экземпляра компоновщика. Однако, здесь есть масса путей – можно на backend стороне организовать унифицированный вывод productFieldObjects для всех модулей сайта (backend-модулей), т.к. он имеет практически стандартную структуру в каждом методе отправки данных и это бы значительно сократило объем JS кода и полностью убрало зависимость от изменений верстки страниц.
Приведем пример компоновщиков на одной странице, которые собирают массив товаров из разных блоков:
|
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
|
/* Событие AddToCart в карточке товара */
$(‘#button-cart’).click(function(){
var product = getMainProduct();
EEProcessor.addToCart([product]);
});
/* Получить объект товара страницы */
getMainProduct = function(){
return {
name: $(‘h1’).text(),
id: $(‘[name=»product_id»]’).val(),
price: $(‘#price’).val(),
brand: $(‘.brand-info’).text(),
category: $(‘.category).text(),
quantity: 1,
list: ‘product/product‘
};
};
/* Событие addToCart в слайдерах страницы товара */
$(‘.related .add—to—cart, #tab-related .add-to-cart’).click(function () {
var product = getProductFromProductPageSliders($(this).parents(‘div’));
EEProcessor.addToCart([product]);
});
/* Получить объект товара из слайдеров */
getProductFromProductPageSliders = function($pItem){
return {
name: $pItem.find(‘.caption a’).text(),
id: $pItem.data(‘id’),
price: $pItem.data(‘price’),
brand: $pItem.data(‘brand’),
category: $pItem.data(‘category’)
}
};
|
Действие removeFromCart вызывается в меньшем количестве страниц – как правило, это модуль корзины в шапке сайта, сама корзина и, возможно, страницы оформления заказа.
5.Отслеживание показов промо
Метод отслеживания: promoView
Можно отследить показы внутренних промо-материалов, таких как баннеры, показывающие акционные товары или категории, предлагающие бесплатную доставку.
Для отслеживания показа промо нужно установить promoView в уровень данных электронной коммерции c массивом promotions, который описывает рекламные акции, отображаемые для пользователей на странице. Для этого мы вывели метатег в блоке каждого используемого баннера, в data-атрибуте которого добавили нужную нам информацию
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var promotions = [];
$(‘meta[data-type=»slide-info»]’).each(function(){
var promo = JSON.parse($(this).attr(‘content’));
promotions.push(promo);
});
EEProcessor.promotionImpressions(promotions);
Сам метод аналогичен остальным:
/**
* @param {Array} promotions
*/
promotionImpressions: function (promotions) {
this._log({‘promotionImpressions’: promotions});
dataLayer.push({
‘ecommerce’: {
‘promoView’: {
‘promotions’: promotions
}
}
});
},
|
6.Отслеживание кликов по промо
Для отслеживания кликов по промо нужно отправить действие promoClick в уровень данных с массивом, содержащим promoFieldObject (массив promotions в нашем случае):
|
1
2
3
4
5
6
7
8
|
/* Событие promoClick в слайдере главной страницы */
$(‘#ecslideshow0’).on(‘click’, ‘.camera_link’, function(e){
e.preventDefault();
var link = $(this).attr(‘href’);
var promo = JSON.parse($(‘[data-slide-link=»‘ + link
+ ‘»]’).attr(‘content’));
EEProcessor.promotionClicks([promo], link);
});
|
Помним, что клик ведет к переходу браузера по ссылке, а нам необходимо быть уверенными, что данные передались в аналитику. Для этого также при кликах по товарам используем параметр eventCallback:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/**
* @param {Array} promotions
* @param url
*/
promotionClicks: function (promotions, url) {
this._log({‘promotionClicks’: promotions});
dataLayer.push({
‘event’: ‘promotionClick’,
‘ecommerce’: {
‘promoClick’: {
‘promotions’: promotions
}
},
‘eventCallback’: function () {
document.location = url;
}
});
if (typeof google_tag_manager == «undefined») {
document.location = url;
}
},
|
7.Отслеживание процесса оформления покупки
- Шаги оформления покупки
Метод отслеживания: checkout
Данные: step, массив productFieldObjects Для отслеживания процесса оформления покупки, который должен включать в себя кнопку перехода в корзину, кнопку перехода к оформлению заказа и страницы оформления, на которых пользователь вводит платежные данные и информацию о доставке, нужно использовать действие checkout и поле step для определения стадии процесса заказа. Также можно использовать дополнительное поле field для передачи дополнительной информации о странице, например метод оплаты, выбранный пользователем.
Для начала приведем пример скрипта, который отправляет событие при переходе в корзину:12345678910111213141516171819202122232425/*** @param {Array} products* @param {string} url*/cartEnter: function(products, url){this._log({‘cartEnter’: products});this.checkoutSteps(1, ‘cart_page_open’, products);dataLayer.push({‘event’: ‘checkout’,‘ecommerce’: {‘checkout’: {‘products’: products}},‘eventCallback’: function() {document.location = url;}});if (typeof google_tag_manager == «undefined») {document.location = url;}},Здесь products включает в себя содержимое корзины в соответствующем формате. Необходимость параметра eventCallback уже не требует объяснений.
Переход в корзину мы также рассматриваем как шаг оформления заказа, потому здесь присутствует вызов checkoutSteps() с такими параметрами, как 1) номер шага, 2) идентификатор шага (в аналитике), 3) товары.Далее следует обработка оформления заказа. Для этих действий будет обобщенный метод в EEProcessor, который мы и назвали checkoutSteps (его параметры описаны выше):
1234567891011121314151617181920212223242526/*** @param {string} step* @param {string} optionVal* @param {Array} products* @param {string} url Опционально (если нужен переход)*/checkoutSteps: function (step, optionVal, products, url) {this._log({‘checkoutSteps’: [step, optionVal]});var data = {‘event’: ‘checkout’,‘ecommerce’: {‘checkout’: {‘actionField’: {‘step’: step, ‘option’: optionVal},‘products’: products}}};if (typeof url != «undefined») {data.eventCallback = function () {document.location = url;};if (typeof google_tag_manager == «undefined») {document.location = url;}}dataLayer.push(data);}Вышеописанный пример нужно использовать для каждого из шагов оформления покупки, для каждого из них указываем свой номер, идентификатор и URL для перехода при необходимости.
- Опции оформления покупки
Метод отслеживания: checkoutOption
Данные: step, option Опции оформления покупки важны для получения дополнительной информации о заказе, такой, как способ доставки. Для отслеживания используйте действие checkoutOption с полями step и option:1234567891011121314151617181920212223242526272829/*** @param {string} step* @param {string} optionVal* @param {string} url Опционально (если нужен переход)*/checkoutOption: function (step, optionVal, url) {this._log({‘checkoutOption’: [step, optionVal]});var data = {‘event’: ‘checkoutOption’,‘ecommerce’: {‘checkout_option’: {‘actionField’: {‘step’: step, ‘option’: optionVal}}}};if (typeof url != «undefined») {data.eventCallback = function () {document.location = url;};if (typeof google_tag_manager == «undefined») {document.location = url;}}dataLayer.push(data);},В нашем случае на странице оформления заказа присутствует вызов этого метода при выборе опций доставки и оплаты в таком виде:
12345/* Событие выбора опции метода доставки для Enhanced Ecommerce */EEProcessor.checkoutOption(4, shipping_method);/* Событие выбора опции метода оплаты для Enhanced Ecommerce */EEProcessor.checkoutOption(4, payment_method);
8.Отслеживание покупки
Для этой задачи мы использовали собственное событие transactionComplete, которое встраивается в страницу success (либо success callback функцию, если отправка заказа осуществляется через Ajax). Формируем объект транзакции на стороне сервера при подтверждении заказа клиентом и в json-кодированном представлении отправляем в браузер.
После того, как все описанные выше действия были выполнены, можно приступать к настройке расширенной электронной торговли в GTM и Google Analytics.
Настройка Google Analytics и Google Tag Manager
Настройка Google Analytics
В первую очередь необходимо активировать отчеты расширенной электронной торговли в Google Analytics. Для этого в разделе «Администратор» в настройках электронной торговли нужного представления включаем соответствующую опцию:
Далее переходим к настройке GTM (с основами работы в GTM можно ознакомиться в этой статье)
1.Просмотры товаров
С помощью этого тега у нас появится возможность отслеживать просмотры товаров в любых списках на сайте: как на странице категории, так и в блоках рекомендуемых товаров, сопутствующих товаров и т.д.
При отправке этих данных в аналитику, мы увидим следующие результаты в отчете “Эффективность списка товаров”:
После клика по нужной вам категории, вы увидите ту же таблицу, но в разрезе конкретных продуктов:
Для того, чтоб эти данные появлялись в описанных выше отчетах, нам необходимо настроить их отправку в GTM. Делаем это следующим образом:
- Создаем тег типа Universal Analytics. Тип отслеживания – “Просмотр страницы”. В дополнительных настройках активируем “Расширенные функции электронной торговли”–>”Использовать уровень данных”. Триггером устанавливаем событие “productImpression”.
2.Клики по товарам
C помощью этого тега настраиваем отслеживание кликов по товарам. В аналитику отправятся информация о товаре, по которому был клик. После отправки этих данных в отчете «Эффективность списка товаров» будут изменения в столбцах «Клики по товарам из списка» и «CTR списка товаров»:
Теперь переходим к настройке GTM:
- Создаем тег типа Universal Analytics. Тип отслеживания – “Событие”. Задаем категорию – “Ecommerce”, действие – “Product Click”. В дополнительных настройках активируем “Расширенные функции электронной торговли”–>”Использовать уровень данных”. Триггером устанавливаем событие “productClick”.
3.Просмотр карточки товара
На этом шаге активируем отслеживание переходов на карточку товара. В Google Analytics, в отчете “Анализ покупок”–>”Поведение покупателей” появится блок “Сеансы с просмотром товаров”:
Для того, чтоб эти данные появлялись в описанных выше отчетах, нам необходимо настроить их отправку в GTM. Делаем это следующим образом:
- Используем тег типа Universal Analytics. Тип отслеживания – “Просмотр страницы”. В дополнительных настройках активируем “Расширенные функции электронной торговли”–>”Использовать уровень данных”. Триггером устанавливаем событие “productDetails”.
4.Добавление товара в корзину
Отправка данных на этом шаге дает нам возможность отслеживать добавления товаров в корзину. При отправке данных будет менятся столбец “Количество добавлений товара в корзину” в отчете “Эффективность списка товаров”
К тому же в Analytics, в отчете “Анализ покупок”–>”Поведение покупателей” появится блок “Сеансы с добавлением товаров в корзину”:
Далее переходим к настройке GTM:
- Создаем тег типа Universal Analytics. Тип отслеживания – “Событие”. Задаем категорию – “Ecommerce”, действие – “Add to Cart”. В дополнительных настройках активируем “Расширенные функции электронной торговли”–>”Использовать уровень данных”. Триггером устанавливаем событие “addToCart”.
5.Удаление товара из корзины
Отправка данных на этом шаге дает нам возможность отслеживать удаление товаров из корзины. К сожалению, в стандартных отчетах количество удалений товара из корзины не отображается, потому следует создать кастомный отчет:
Далее переходим к настройке GTM:
- Создаем тег типа Universal Analytics. Тип отслеживания – “Событие”. Задаем категорию – “Ecommerce”, действие – “Remove from Cart”. В дополнительных настройках активируем “Расширенные функции электронной торговли”–>”Использовать уровень данных”. Триггером устанавливаем событие “removeFromCart”.
6.Показы промо
Настройка отслеживания просмотров промо-баннеров на сайт дает возможность узнать, как часто посетители сайта видят их. При отправке данных изменения можно увидеть в отчете “Маркетинг” – “Внутренняя кампания” в столбце “Просмотры (внутренняя кампания)”
Далее переходим к настройке GTM:
- Создаем тег типа Universal Analytics. Тип отслеживания – “Просмотр страницы”. В дополнительных настройках активируем “Расширенные функции электронной торговли”–>”Использовать уровень данных”. Триггером устанавливаем событие “promoImpression”.
7.Клики по промо
Настройка отслеживания кликов по промо-баннерам на сайте дает возможность узнать, как часто посетители сайта кликают по ним. При отправке данных изменения можно увидеть в отчете “Маркетинг” – “Внутренняя кампания” в столбце “Клики (внутренняя кампания)”, а также “CTR (внутренняя кампания)”.
Далее переходим к настройке GTM:
- Создаем тег типа Universal Analytics. Тип отслеживания – “Событие”. Задаем категорию – “Ecommerce”, действие – “Promotion Click”. В дополнительных настройках активируем “Расширенные функции электронной торговли”–>”Использовать уровень данных”. Триггером устанавливаем событие “promotionClick”.
8.Процесс оформления покупки
В этом пункте будут заданы шаги пользователя к транзакции. Для их визуализации нужно будет внести некоторые изменения в Google Analytics. Переходим в настройки электронной торговли (см. скриншот)
Затем настраиваем шаги, которые проходит пользователь в случае нашего интернет-магазина:
В результате, в отчете “Поведение при оформлении” можно будет увидеть следующую визуализацию воронки продаж:
Также в отчете “Эффективность списка товаров” появится информация о списке товаров, с которого был начат процесс оформления продукта.
Далее переходим к настройке GTM:
- Создаем тег типа Universal Analytics. Тип отслеживания – “Событие”. Задаем категорию – “Ecommerce”, действие – “Checkout”. В дополнительных настройках активируем “Расширенные функции электронной торговли”–>”Использовать уровень данных”. Триггером устанавливаем событие “checkout”.
9.Отслеживание покупки
С помощью этого тега в Google Analytics передаются данные о продажах. В отчете “Эффективность товаров” появится возможность отслеживать их количество и различные дополнительные метрики, как показано на скриншоте ниже:
Далее переходим к настройке GTM:
- Создаем тег типа Universal Analytics. Тип отслеживания – “Просмотр страницы”. В дополнительных настройках активируем “Расширенные функции электронной торговли”–>”Использовать уровень данных”. Триггером устанавливаем событие “transactionComplete”.
После этого процесс настройки расширенной электронной торговли можно считать законченным и теперь остается только правильно использовать данные, которые будут после этого получены, а в частности:
- визуализация поведения посетителей на сайте и при оформлении заказа;
- отчеты об эффективности списков товаров;
- отчеты об эффективности категорий товаров;
- определить, на какие товары переходят чаще всего и реже всего;
- определить, какие товары пользователи чаще всего добавляют и удаляют из корзины.
Использование модуля Enhanced E-commerce даст вам возможность найти проблемные места в цепочке продажи на сайте, лучше понять поведение покупателей и, в конечном итоге, увеличить количество транзакций, доход и ROMI.
Надеюсь, данная информация будет для многих полезна.
Спасибо за внимание!
Взято с odesseo.com.ua