Налаштування розширеної електронної торгівлі в GTM

Сьогодні, аналізуючи e-commerce проекти, фахівці часто стикаються з нестачею даних із продажу, поведінці користувачів при скоєнні (або не скоєнні) покупки, ефективності тих чи інших категорій товарів. Якісь із цих недоліків вирішуються за допомогою стандартного функціоналу Google Analytics, а є ті, що так і залишаються білими плямами на карті продажу інтернет-магазину.

Але модуль розширеної електронної торгівлі вирішує ці проблеми. А певні складнощі з його імплементацією сповна окупає багатий функціонал та можливості, які він надає.

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

Необхідне відстеження наступних дій розширеної електронної торгівлі (наприклад взято інтернет-магазин будівельної тематики):

1. Покази товарів (Product Impressions);
2. Кліки з товарів (Product Clicks);
3. Перехід на картку товару (Product Detail Impressions);
4. Додавання/видалення товару з кошика (Add/Remove from Cart);
5. Покази промо (Promotion Impressions);
6. Кліки з промо (Promotion Clicks);
7. Процес оформлення покупки (Checkout).

• Кошик

• Оформлення замовлення (етап 1: контактні дані)

• Оформлення замовлення (етап 2: спосіб доставки)

• Проведення транзакцій (Purchases).

Як правило, пропонується розміщувати код надсилання необхідних даних на кожній відповідній сторінці. Однак для більш економічного використання ресурсів у даному випадку було зручно використовувати загальний для всього сайту js об’єкт, який акумулює методи відстеження. Кожен метод приймає дані у форматі, наданому довідкою Enhanced Ecommerce. У свою чергу, ці дані вже збираються на всіх потрібних сторінках сайту і відправляються через загальний скрипт.

У прикладах використовується jQuery для роботи з деревом DOM.

Фрагменти коду, які потрібно розмістити на сайті

1. Вимірювання показів товарів

Метод відстеження impressions

У цьому прикладі надсилається інформація про показані на сторінці товари. Виконуватися цей код повинен при завантаженні сторінки для видимих ​​товарів, а для товарів у прихованих блоках (наприклад, слайдерах або прихованих блоках, що розкриваються після натискання на контроли) – відразу після відображення їх клієнту (можна повісити функції callback на відповідні події слайдерів тощо).

Масив products збирається згідно з інструкцією і має такий вигляд:

[
{
"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():

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’). Наведемо код, що виконується при натисканні на товарі:

/* Подія 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:

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

Підрахунок кількості переглядів картки товару. Викликаємо цей метод під час завантаження сторінки товару.

$(function(){
/* Подія productDetails у картці товару */
EEProcessor.productDetails([getMainProduct()]);
});

Метод відправки цієї події (незважаючи на те, що логічно тут повинен бути об’єкт, деталі якого переглядає клієнт, все ж таки має бути масив ‘products’):

productDetails: function(products){
this._log({'productDetails': products});

dataLayer.push({
'ecommerce': {
'detail': {
'actionField': {'list': 'product'},
'products': products
}
}
});
},

4. Відстеження додавання/видалення товару в/з кошика

Метод відстеження: add, remove

Користувач збирається купити товар, попередньо відправивши його до кошика.
Щоб зареєструвати додавання в кошик покупок (або видалення з нього), використовуйте тип дії addToCart (для видалення removeFromCart) та список productFieldObjects (products у нашому випадку). Наведемо приклад методів додавання та видалення товарів з кошика:

/**

@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 коду і повністю прибрало залежність від змін верстки сторінок.

Наведемо приклад компонувальників на одній сторінці, які збирають масив товарів із різних блоків:

/* Подія 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 у рівень даних електронної комерції з масивом promotions, що описує рекламні акції, які відображаються для користувачів на сторінці. Для цього ми вивели метатег у блоці кожного банеру, в data-атрибуті якого додали потрібну нам інформацію.

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 у нашому випадку):

/* Подія 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:

/**

@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 для передачі додаткової інформації про сторінку, наприклад, метод оплати, вибраний користувачем.

Для початку наведемо приклад скрипта, який відправляє подію під час переходу до кошика:

/**

@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 (його параметри описані вище):

/**

@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:

/**

@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);
},

У нашому випадку на сторінці оформлення замовлення є виклик цього методу при виборі опцій доставки та оплати в такому вигляді:

/* Подія вибору опції методу доставки для 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. Кліки по товарах

За допомогою цього тегу налаштовуємо відстеження кліків за товарами. В аналітику вирушать інформація про товар, яким був клік. Після надсилання цих даних у звіті «Ефективність списку товарів» будуть зміни у стовпцях «Кліки за товарами зі списку» та «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.

Сподіваюся, ця інформація буде для багатьох корисною.

Дякую за увагу!

P.S. Ця стаття та реалізація всіх описаних вище кроків на реальному проекті проводились за допомогою відділу розробки OdesSeo та зокрема Олександра Вторушіна. Велике йому спасибі!