Содержание [скрыть]
Настройка расширенной электронной торговли в GTM
Сегодня, анализируя e-commerce проекты, специалисты часто сталкиваются с недостатком данных по продажам, поведению пользователей при совершении (или не совершении) покупки, эффективности тех или иных категорий товаров. Какие-то из этих недостатков решаются с помощью стандартного функционала Google Analytics, а есть те, которые так и остаются белыми пятнами на карте продаж интернет-магазина. Но модуль расширенной электронной торговли решает эти проблемы. А определенные сложности с его имплементацией сполна окупает богатый функционал и возможности, которые он предоставляет. Для отслеживания детального процесса покупки, которую выполняют посетители, необходимо установить на сайт определенные фрагменты кода. Необходимо отслеживание следующих действий расширенной электронной торговли (для примера взят интернет-магазин строительной тематики):- Показы товаров (Product Impressions);
- Клики по товарам (Product Clicks);
- Переход на карточку товара (Product Detail Impressions);
- Добавление/удаление товара из корзины (Add / Remove from Cart);
- Показы промо (Promotion Impressions);
- Клики по промо (Promotion Clicks);
- Процесс оформления покупки (Checkout).
- Совершение транзакций (Purchases).
Фрагменты кода, которые следует разместить на сайте
1. Измерение показов товаров
Метод отслеживания: impressions В данном примере отправляется информация о показанных на странице товарах. Выполняться этот код должен при загрузке страницы для видимых товаров, а для товаров в скрытых блоках (например, слайдерах или скрытых блоках, раскрывающихся по нажатию на контролы) — сразу по отображению их клиенту (можно повесить callback функции на соответствующие события слайдеров и пр.)
1 2 3 4 5 6 7 8 9 |
<script> … var products = []; ... // Производим заполнение массива товаров, отображаемых на странице ... /* Отправка товаров через глобальный объект для работы с dataLayer */ EeProcessor.productImpressions(products); </script> |
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 } ] |
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); }); |
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()]); }); |
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 } } }); }, |
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') } }; |
5. Отслеживание показов промо
Метод отслеживания: promoView Можно отследить показы внутренних промо-материалов, таких как баннеры, показывающие акционные товары или категории, предлагающие бесплатную доставку. Для отслеживания показа промо нужно установить promoView в уровень данных электронной коммерции c массивом promotions, который описывает рекламные акции, отображаемые для пользователей на странице. Для этого мы вывели метатег в блоке каждого используемого баннера, в data-атрибуте которого добавили нужную нам информацию
1 2 3 4 5 6 |
var promotions = []; $('meta[data-type="slide-info"]').each(function(){ var promo = JSON.parse($(this).attr('content')); promotions.push(promo); }); EEProcessor.promotionImpressions(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); }); |
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;}},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);}
- Опции оформления покупкиМетод отслеживания: 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”.
- визуализация поведения посетителей на сайте и при оформлении заказа;
- отчеты об эффективности списков товаров;
- отчеты об эффективности категорий товаров;
- определить, на какие товары переходят чаще всего и реже всего;
- определить, какие товары пользователи чаще всего добавляют и удаляют из корзины.
как настроить покупку в 1 клик?
Приведите пожалуйста пример вашей функции _log
Добрый день! А зачем создавать теги на impressions, product detail и promoview? Ведь по документации достаточно пушить просмотры по этим объектам в dataLayer. Кажется, отчеты по этим данным должны фиксироваться и без дополнительных событий по ним.