Расширенная электронная торговля (Enhanced Ecommerce) Google Analytics - это возможность отслеживать действия пользователя на сайте, начиная от просмотра, заканчивая заказом на сайте, отследить цепочку взаимодействий на уровне больших данных, сделать системные выводы и принять решения о структурных изменениях.
Стандартная электронная торговля - это информация о заказах с финансовыми данными в аналитике. Расширенная электронная торговля - это та же информация, но уже с поведением пользователей, с возможностями формирования воронки продаж. Как настроить и что можно получить, говорим об этом. Итак, поехали!
Мы будем рассматривать настройку расширенной электронной торговли для 2-х версий, так как на данный момент они обе актуальны:
Настройка расширенной электронной торговли Google Analytics Universal
1
Подключаем расширенную электронную торговлю на уровне Google Analytics:
Формируем пакет ТЗ для программистов по отправке событий в Tag Manager, который в свою очередь будет передавать события в Google Analytics.
Внутри, кода Tag Manager или в любом другом месте, к примеру в Footer, мы будем помещать контейнер данных, которые будут передаваться через Data Layer в Google Tag Manager, а затем в Analytics.
Data Layer – это стандартизированный формат для передачи данных с сайта в сторонние сервисы.
Каждая страница будет отдавать свою информацию о взаимодействии с сайтом со своими спец параметрами.
2.1 Показы товаров
Событие: impressions.
Размещение: страница каталога товара.
Описание: показ товаров в каталоге, или в результате поиска конкретного товара, или просто открытия категории.
Сработка события: в момент показа товара в видимой области.
Код в данном случае будет иметь следующий вид ниже. Думаю, даже не стоит расписывать, что означает каждая переменная, так как все предельно понятно.
dataLayer.push({
'ecommerce': {
'currencyCode': 'UAH', // Local currency is optional.
'impressions': [
{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'list': 'Search Results',
'position': 1
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'list': 'Search Results',
'position': 2
}]
},
'event': 'gtm-ee-event',
'gtm-ee-event-category': 'Enhanced Ecommerce',
'gtm-ee-event-action': 'Impressions',
'gtm-ee-event-non-interaction': 'True',
});
где:
'event': 'gtm-ee-event' - название пользовательского события, может быть произвольным
'gtm-ee-event-category': 'Enhanced Ecommerce' - категория события
'gtm-ee-event-action': 'Impressions' - действие
Этот блок отправляет данные в Tag Manager о совершении события. В данном случае, в идеале, чтобы событие срабатывало только тогда, когда товар находится в видимой области экрана.
2.2 Клики по товарам
Событие: productClick.
Размещение: страница каталога товара.
Описание: передача данных о кликах и переходах в товар.
Сработка события: в момент клика на карточку товара.
function(productObj) {
dataLayer.push({
'ecommerce': {
'click': {
'actionField': {'list': 'Search Results'}, // Optional list property.
'products': [{
'name': productObj.name,
'id': productObj.id,
'price': productObj.price,
'brand': productObj.brand,
'category': productObj.cat,
'variant': productObj.variant,
'position': productObj.position
}]
}
},
'event': 'gtm-ee-event',
'gtm-ee-event-category': 'Enhanced Ecommerce',
'gtm-ee-event-action': 'productClick',
'gtm-ee-event-non-interaction': 'True',
}
});
}
2.3 Показы информации по товарам
Событие: detail.
Размещение: карточка товара.
Описание: просмотр информации о характеристиках товара и в целом, самого товара.
Сработка события: в момент просмотра фото или характеристик товара.
dataLayer.push({
'ecommerce': {
'detail': {
'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
},
'event': 'gtm-ee-event',
'gtm-ee-event-category': 'Enhanced Ecommerce',
'gtm-ee-event-action': 'detail',
'gtm-ee-event-non-interaction': 'True',
});
2.4 Добавление товаров в корзину и удаление их из корзины
Событие: addToCart.
Размещение: страница каталога товара.
Описание: добавление товаров в корзину.
Сработка события: в момент клика на кнопку “добавить в корзину” или “купить в 1 клик”.
dataLayer.push({
'ecommerce': {
'currencyCode': 'UAH',
'add': { // 'add' actionFieldObject measures.
'products': [{ // adding a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
},
'event': 'gtm-ee-event',
'gtm-ee-event-category': 'Enhanced Ecommerce',
'gtm-ee-event-action': 'addToCart',
'gtm-ee-event-non-interaction': 'True',
});
Событие: removeFromCart.
Размещение: корзина.
Описание: удаление товаров из корзины.
Сработка события: в момент нажатия на крестик в корзине или кнопку “удалить” напротив товара.
dataLayer.push({
'ecommerce': {
'remove': { // 'remove' actionFieldObject measures.
'products': [{ // removing a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
},
'event': 'gtm-ee-event',
'gtm-ee-event-category': 'Enhanced Ecommerce',
'gtm-ee-event-action': 'removeFromCart',
'gtm-ee-event-non-interaction': 'True',
}
});
2.5 Оформление покупки
Событие: checkout.
Размещение: корзина.
Описание: отправка информации о прохождении этапов оформления заказа.
Сработка события: в момент прохождения шага оформления заказа.
Есть возможность деления на шаги, если оформление осуществляется в несколько этапов.
function onCheckout() {
dataLayer.push({
'ecommerce': {
'checkout': {
'actionField': {'step': 1, 'option': 'Visa'}, // произвольно заполняете информацию о параметрах заказа
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
},
'event': 'gtm-ee-event',
'gtm-ee-event-category': 'Enhanced Ecommerce',
'gtm-ee-event-action': 'Checkout Step 1',
'gtm-ee-event-non-interaction': 'True',
}
});
}
Если Ваш интернет-магазин предусматривает 2-х или более этапную систему оформления заказа, то на следующей странице Вы отправляете аналогичный код, только уже со Step 2 и необходимым option. Также добавляем шаги оформления заказа в настройках расширенной электронной торговли.
2.6 Покупка
Событие: purchase.
Размещение: страница благодарности за заказ, выше кода тег менеджер.
Описание: отправка информации о заказе.
Сработка события: в момент открытия страницы благодарности с информацией о заказе.
Внимание! Если у Вас была настроена стандартная электронная торговля - старый код необходимо будет удалить и прописать новый код + удалить старую обработку события на стороне тег менеджер + инициализировать переменную dataLayer выше кода скрипта. Помощь здесь.
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345', // Transaction ID. Required for purchases and refunds.
'affiliation': 'Online Store',
'revenue': '35.43', // Total transaction value (incl. tax and shipping)
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{ // List of productFieldObjects.
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': '' // Optional fields may be omitted or set to empty string.
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}]
}
},
'event': 'gtm-ee-event',
'gtm-ee-event-category': 'Enhanced Ecommerce',
'gtm-ee-event-action': 'purchase',
'gtm-ee-event-non-interaction': 'True',
});
Это основные события. Если Вам необходимо больше информации, ее можно получить в руководстве для разработчиков.
3Приемка событий на уровне Tag Manager и отправка в Google Analytics.
3.1 Создаем пользовательскую переменную пользовательского события.
3.2 Отправляем типовые события по триггеру пользовательского события в Google Analytics.
В действие прописываем значение в зависимости от события, которое мы отправляем.
Есть вариант настройки электронной торговли без Tag Manager, в данном случае события отправляются напрямую в Google Analytics через ga('require', 'ec') непосредственно доработкой самого кода аналитики, инструкция для разработчиков здесь.
3.3 Тестируем работу через Tag Assistant и отслеживаем новые отчеты в Google Analytics. Строим правильные аналитические выводы.
Расширенная электронная торговля Google Analytics 4
В июле 2023-го Universal Analytics заканчивает свою работу, после чего станет актуальной версия Google Analytics 4.
Многих интересует вопрос, как легко перенести расширенную электронную торговлю с Universal Analytics на версию GA4?
Наш ответ - только заново настроить. К сожалению, легких решений нет, так как в структуре кода есть значительные различия. Потребуется новое техническое задание и имплементация.
Настройка расширенной электронной торговли Google Analytics 4
Расширенная электронная торговля в Google Analytics 4 по своей сути ничем не отличается от версии Universal Analytics, только здесь нет необходимости отдельно включать опцию расширенной электронной торговли. Все события в версии GA4 можно сразу настроить по умолчанию, без доработок в текущем представлении.
Настройка осуществляется 2-я способами:
- через gtag (данные отправляются напрямую в Google Analytics 4);
- через Data Layer (данные отправляются в библиотеку Data Layer, из которой, через обработчик события в Tag Manager попадают в Google Analytics 4.
Мы с Вами будем рассматривать 2-й способ, так как практически все сайты работают с Tag Manager.
В Google Analytics 4 у каждого события есть уникальное название, которое рекомендуется системой. Сделать все через один event, как в версии Universal, не получится.
Итак, пройдемся по событиям.
Просмотры и показы товаров или позиций из списка
Событие: view_item_list.
Размещение: любой список товаров.
Описание: показ товаров в каталоге или в результате поиска конкретного товара, либо при открытии категории.
Сработка события: в момент показа товара в видимой области.
// Measure product views / impressions
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "view_item_list",
ecommerce: {
items: [
{
item_name: "Triblend Android T-Shirt", // Name or ID is required.
item_id: "12345",
price: 15.25,
item_brand: "Google",
item_category: "Apparel", //// Главная категория
item_category2: "Mens", //// Подкатегория
item_category3: "Shirts", //// Подподкатегория
item_category4: "Tshirts", //// Подподподкатегория
item_variant: "Gray", /// /Вариант
item_list_name: "Search Results", /////// Здесь задается место (список), где показывается товар (главная страница, категория, результат поиска, фильтр товаров)
index: 1, //// Позиция товара в списке
quantity: 1
},
{
item_name: "Donut Friday Scented T-Shirt",
item_id: "67890",
price: 33.75,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Mens",
item_category3: "Shirts",
item_category4: "Tshirts",
item_variant: "Black",
item_list_name: "Search Results",
index: 2,
}]
}
});
Клики по товару из списка позиций
Событие: select_item.
Размещение: место, откуда был совершен клик по товару.
Описание: передача данных о кликах и переходах в товар.
Сработка события: в момент клика на карточку товара.
/**
* Call this function when a user clicks on a product link.
* @param {Object} productObj An object that represents the product that is clicked.
*/
function onProductClick(productObj) {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "select_item",
ecommerce: {
items: [{
item_name: productObj.name, // Name or ID is required.
item_id: productObj.id,
item_brand: productObj.brand,
item_category: productObj.category,
item_category2: productObj.category_2,
item_category3: productObj.category_3,
item_category4: productObj.category_4,
item_variant: productObj.variant,
item_list_name: productObj.list_name, /////// Здесь задается место (список) откуда был клик по товару (категория, результат поиск, фильтр)
index: productObj.index, ///// Позиция товара в списке
price: productObj.price
}]
}
});
}
Просмотры информации о товаре или позиции
Событие: view_item.
Размещение: карточка товара.
Описание: просмотр товара.
Сработка события: в момент просмотра фото или характеристик товара.
// Measure a view of product details. This example assumes the detail view occurs on pageload,
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "view_item",
ecommerce: {
items: [{
item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
item_id: "67890",
price: 33.75,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Mens",
item_category3: "Shirts",
item_category4: "Tshirts",
item_variant: "Black",
quantity: 1
}]
}
});
Добавление товара в корзину
Событие: add_to_cart.
Размещение: карточка товара или список товаров, где есть кнопка купить.
Описание: просмотр информации о характеристиках товара и в целом, самого товара.
Сработка события: в момент клика на кнопку купить.
// Measure when a product is added to a shopping cart
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "add_to_cart",
ecommerce: {
items: [{
item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
item_id: "67890",
price: "33.75",
item_brand: "Google",
item_category: "Apparel",
item_category2: "Mens",
item_category3: "Shirts",
item_category4: "Tshirts",
item_variant: "Black",
item_list_name: "Search Results", //// Включаем этот параметр если нажимают “купить” из списка товаров
index: 1, //// Позиция в списке, включаем этот параметр если нажимают “купить” из списка товаров
}]
}
});
Удаление товара из корзины
Событие: remove_from_cart.
Размещение: корзина.
Описание: удаление товаров из корзины.
Сработка события: в момент нажатия на крестик в корзине или кнопку “удалить” напротив товара.
// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "remove_from_cart",
ecommerce: {
items: [{
item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
item_id: "67890",
price: 33.75,
item_brand: "Google",
item_category: "Apparel",
item_variant: "Black",
}]
}
});
Оформление покупки
Событие: begin_checkout.
Размещение: корзина.
Описание: отправка информации о начале оформления заказа.
Сработка события: в момент, когда пользователь посещает корзину для оформления заказа.
/**
* A function to handle a click on a checkout button.
*/
function onCheckout() {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "begin_checkout",
ecommerce: {
items: [{
item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
item_id: "67890",
price: 33.75,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Mens",
item_category3: "Shirts",
item_category4: "Tshirts",
item_variant: "Black",
quantity: 1
}]
}
});
}
Если оформление в корзине проходит в несколько этапов, то в Google Analytics 4 это делится на следующие дополнительные events:
- add_payment_info (добавление информации об оплате);
- add_shipping_info (добавление информации о доставке).
Покупка
Событие: purchase.
Размещение: страница благодарности.
Описание: отправка информации о заказе.
Сработка события: в момент, когда заказ принят.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T12345",
affiliation: "Online Store",
value: "59.89",
tax: "4.90",
shipping: "5.99",
currency: "EUR",
coupon: "SUMMER_SALE",
items: [{
item_name: "Triblend Android T-Shirt",
item_id: "12345",
price: "15.25",
item_brand: "Google",
item_category: "Apparel",
item_variant: "Gray",
quantity: 1
}, {
item_name: "Donut Friday Scented T-Shirt",
item_id: "67890",
price: 33.75,
item_brand: "Google",
item_category: "Apparel",
item_variant: "Black",
quantity: 1
}]
}
});
Что необходимо сделать в Tag Manager для расширенной электронной торговли Google Analytics 4?
- Создать теги для каждого из событий;
- Для всех событий, кроме purchase, задать параметр “items” со значением ecommerce.items
- Для purchase дополнительно прошиваются все параметры по заказу.
Как выглядят отчеты расширенной электронной торговли в GA4?
Как таковых, готовых в системе нет, поэтому их необходимо будет настроить.
- Списки пользователей.
- Статистика товаров.
- Все сеансы.
- Воронка посещений.
Каждый отчет можно модифицировать, в зависимости от потребностей.
За более подробной информацией, обращайтесь по контактам агентства. Кроме того, рекомендуем к просмотру видео о пользе расширенной электронной торговли в продвижении интернет-магазинов.