Настройка расширенной электронной торговли в 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: способ доставки)

     

8. Совершение транзакций (Purchases).

   

Как правило, предлагается размещать код отправки необходимых данных на каждой соответствующей странице. Однако для более экономичного использования ресурсов в данном случае было удобно использовать общий для всего сайта js объект, который аккумулирует методы отслеживания. Каждый метод принимает данные в формате, предоставленном справкой по Enhanced Ecommerce. В свою очередь эти данные уже собираются на всех нужных страницах сайта и отправляются через общий скрипт. В примерах используется jQuery для работы с DOM деревом.

Фрагменты кода, которые следует разместить на сайте

1. Измерение показов товаров

Метод отслеживания: impressions В данном примере отправляется информация о показанных на странице товарах. Выполняться этот код должен при загрузке страницы для видимых товаров, а для товаров в скрытых блоках (например, слайдерах или скрытых блоках, раскрывающихся по нажатию на контролы) — сразу по отображению их клиенту (можно повесить callback функции на соответствующие события слайдеров и пр.) Массив products собирается согласно руководству и имеет подобный вид: Далее приведем пример самого метода отправки EeProcessor.productImpressions():

2. Отслеживание кликов по товару

Метод отслеживания: click Пользователь кликает на заинтересовавший его товар, чтобы узнать о нем подробнее. Для отслеживания клика по ссылке важно помнить про асинхронность javascript, и что браузер не будет ждать, пока в dataLayer произойдут все нужные действия, а просто перенаправит клиента по ссылке. Чтобы этого избежать, обязательно передаем eventCallback параметр и, конечно, собственно запрещаем браузеру переходить по ссылке. Также может появиться проблема у клиентов, которые ставят различные хитрые блокировщики рекламы и скриптов отслеживания. Так одно из таких расширений в Chrome блокирует запросы, которые взаимодействуют с узлом https://www.googletagmanager.com, что приводит к тому, что скрипт gtm может не подгрузиться на странице. В таком случае не dataLayer будет просто глобальным объектом окна и все действия, которые мы от него ожидаем, не будут выполнены. Самое критичное — отсутствие перехода по тем ссылкам, которые обрабатываются через ‘eventCallback’ параметр. Для такого варианта стоит, например, добавить проверку на наличие объекта google_tag_manager, как мы покажем в примере ниже. Структура собираемых данных о товаре известна (см. справку по Enhanced Ecommerce). Единственное, на чем хотелось бы заострить внимание — это поле ‘list’ — оно дает возможность анализировать клики по товарам в разрезе типов страниц (передавая его в событии ‘click’ в параметр ‘actionField’). Приведем код, выполняемый при клике на товаре: Теперь рассмотрим сам метод отправки данных через dataLayer:

3. Переход на карточку товара

Метод отслеживания: detail Подсчет количества просмотров карточки товара. Вызываем этот метод при загрузке страницы товара. Метод отправки этого события (несмотря на то, что логически здесь должен быть объект, детали которого просматривает клиент, всё же должен быть массив ‘products’):

4. Отслеживание добавления/удаления товара в/из корзины

Метод отслеживания: add, remove Пользователь собирается купить товар, предварительно отправив его в корзину. Чтобы зарегистрировать добавление в корзину покупок (или удаление из нее), используйте тип действия addToCart (для удаления removeFromCart) и список productFieldObjects (products в нашем случае). Приведем пример методов добавления и удаления товаров из корзины: Для каждого типа блоков страницы организуем свой компоновщик массива products. Например, в блоке “Рекомендуемые товары” представлены товары с кнопкой “Купить” и находится этот блок на странице товара. В таком случае нужно иметь обработчик кнопки “Купить” как для основного товара страницы, так и для рекомендуемых. Тогда у нас будет 2 экземпляра компоновщика. Однако, здесь есть масса путей — можно на backend стороне организовать унифицированный вывод productFieldObjects для всех модулей сайта (backend-модулей), т.к. он имеет практически стандартную структуру в каждом методе отправки данных и это бы значительно сократило объем JS кода и полностью убрало зависимость от изменений верстки страниц. Приведем пример компоновщиков на одной странице, которые собирают массив товаров из разных блоков: Действие removeFromCart вызывается в меньшем количестве страниц — как правило, это модуль корзины в шапке сайта, сама корзина и, возможно, страницы оформления заказа.

5. Отслеживание показов промо

Метод отслеживания: promoView Можно отследить показы внутренних промо-материалов, таких как баннеры, показывающие акционные товары или категории, предлагающие бесплатную доставку. Для отслеживания показа промо нужно установить promoView в уровень данных электронной коммерции c массивом promotions, который описывает рекламные акции, отображаемые для пользователей на странице. Для этого мы вывели метатег в блоке каждого используемого баннера, в data-атрибуте которого добавили нужную нам информацию Сам метод аналогичен остальным: /** * @param {Array} promotions */ promotionImpressions: function (promotions) { this._log({‘promotionImpressions’: promotions}); dataLayer.push({ ‘ecommerce’: { ‘promoView’: { ‘promotions’: promotions } } }); },

6. Отслеживание кликов по промо

Для отслеживания кликов по промо нужно отправить действие promoClick в уровень данных с массивом, содержащим promoFieldObject (массив promotions в нашем случае): Помним, что клик ведет к переходу браузера по ссылке, а нам необходимо быть уверенными, что данные передались в аналитику. Для этого также при кликах по товарам используем параметр eventCallback:

7. Отслеживание процесса оформления покупки

1. Шаги оформления покупкиМетод отслеживания: 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; } },

   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

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

   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

   /** * @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 для перехода при необходимости.
2. Опции оформления покупкиМетод отслеживания: 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); },

   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

   /** * @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);

   1 2 3 4 5

   /* Событие выбора опции метода доставки для 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:

1. Создаем тег типа 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 и в частности Александра Вторушина. Большое ему спасибо!