Ручная настройка электронной коммерции
Если ваш сайт не работает на популярных CMS, таких как WordPress, Tilda, 1С‑Битрикс или OpenCart, можно ознакомиться со сторонними решениями из каталога интеграций Метрики или подключить электронную коммерцию вручную. Это актуально для самописных сайтов, решений на фреймворках или редких платформ, для которых пока нет официальных интеграций с Яндекс Метрикой.
Если у вас уже есть разметка для Google Analytics
Если на сайте уже настроена передача данных электронной коммерции для Google Analytics, данные в Метрику начнут поступать автоматически. Для этого в настройках счётчика нужно активировать опцию «Электронная коммерция».
Метрика поддерживает автоматическую обработку событий электронной коммерции, если они передаются в одном из следующих форматов:
Обратите внимание: корректная работа возможна только в том случае, если данные передаются в стандартизированном формате, который совместим с Enhanced Ecommerce или GA4. Если передача событий реализована кастомно, потребуется ручная адаптация под структуру Метрики . О ней расскажем ниже.
Благодаря этому материалу вы научитесь:
Если же вы используете одну из популярных CMS, переходите к соответствующему лонгриду.
Как это работает
После подключения электронной коммерции данные о заказах и действиях покупателей начнут поступать в Яндекс Метрику.
Если передача событий выполнена корректно:
Это значит, что после запуска нужно немного подождать и не пугаться, если в отчёте нет данных. Чтобы убедиться, что события передаются, можно воспользоваться панелью отладки или консолью браузера (расскажем об этом подробнее далее).
В отчётах электронной коммерции можно увидеть:
Эти данные помогают анализировать поведение клиентов, улучшать предложения и принимать обоснованные решения по продвижению и ассортименту товаров или услуг.
Подключение электронной коммерции вручную
- Откройте Яндекс Метрику и выберите нужный счётчик.
- В настройках счётчика включите опцию «Электронная коммерция». После этого в код будет добавлена строка, которая укажет Метрике, откуда получать информацию.
Код счётчика Метрики с включённой электронной коммерцией. Строка ecommerce: "dataLayer" обязательна для сбора событий
Передача данных о действиях пользователей
Чтобы в Метрике стала появляться статистика по взаимодействию пользователей с товарами, нужно отправлять специальные события. Это можно сделать с помощью JavaScript — достаточно указать в коде сайта, какое действие произошло и в каком виде передавать данные.
Пример
Пользователь добавляет товар в корзину. В этот момент срабатывает скрипт и отправляет в Метрику объект с данными о товаре.
Для каждого действия — например, просмотр товара, добавление в корзину, оформление заказа — формируется объект ecommerce. Этот объект передаётся в контейнер данных dataLayer. Метрика получает события именно из этого контейнера.
Вы можете передавать как весь набор событий, так и только самые важные — например, только покупки. Это зависит от ваших задач.
Что такое контейнер данных и зачем он нужен
Контейнер данных — это обычный JavaScript-массив window.dataLayer, в который передаются события о действиях пользователей. Счётчик Метрики отслеживает содержимое этого массива и получает из него данные, которые нужны для формирования отчётов.
Имя контейнера данных и структура вкладываемых в него ecommerce-объектов соответствуют аналогичным сущностям в Google Analytics Enhanced Ecommerce. Обратите внимание: если для Google Analytics Enhanced Ecommerce вы использовали имя, отличное от datalayer, его же надо использовать и для Метрики.
Важно
Для настройки передачи данных нужны базовые навыки работы с HTML и JavaScript. Если у вас их нет, обратитесь к разработчику сайта или вебмастеру.
События передаются с помощью конструкции:
window.dataLayer.push({ “ecommerce”: { ... } });
Внутри объекта ecommerce описывается:
Пример действий:
Как начать передавать события в Метрику
Вам нужно настроить отправку событий через dataLayer.push().
Когда пользователь выполняет действие, например оформляет заказ, сайт отправляет информацию в контейнер данных.
На каждом ключевом этапе пользовательского пути — например, при просмотре товара, добавлении в корзину или оформлении заказа — необходимо вызвать dataLayer.push(...) и передать соответствующие данные. После этого они поступают в счётчик Метрики и становятся доступны в отчётах.
Вот пример такого кода:
window.dataLayer.push({
ecommerce: {
currencyCode: "RUB",
add: {
products: [
{
id: "43521",
name: "Сумка Яндекс",
price: 654.32,
brand: "Яндекс",
category: "Аксессуары / Сумки",
quantity: 1
}
]
}
}
});
Что означает каждая строка в этом коде:
Такие скрипты нужно размещать в коде сайта — в тех местах, где происходят нужные действия. Например, при загрузке страницы карточки товара или после нажатия кнопки «Купить».
Что передавать: параметры и значения
Каждое взаимодействие с товаром на сайте — просмотр карточки, добавление в корзину, покупка — отправляется как отдельное событие. Но само по себе событие — это только «триггер». Чтобы Метрика могла построить отчёт, нужно передать детальную информацию о товаре: название, ID, цену, количество, бренд и так далее.
Эти данные указываются в объекте products. Его структура может немного отличаться в зависимости от типа события. Например, add — добавление в корзину, purchase — покупка.
Какие действия можно отслеживать
Вот список действий, которые можно передавать. Они соответствуют разным этапам взаимодействия пользователя с товарами и элементами сайта.
| Действие | Описание |
|---|---|
| impressions | Просмотр списка товаров |
| click | Клик по товару в списке |
| detail | Просмотр карточки товара |
| add | Добавление товара в корзину |
| remove | Удаление товара из корзины |
| purchase | Покупка (оформление заказа) |
| promoView | Просмотр рекламного баннера |
| promoClick | Клик по рекламе |
Какие данные можно передавать вместе с действием
Каждое ecommerce-действие сопровождается дополнительными данными. В зависимости от типа действия это могут быть:
Связка данных:
Данные о товарах передаются в виде объектов в массиве products. Каждый объект описывает отдельный товар: его ID, название, цену, категорию, бренд и другие параметры.
Вот основные поля, которые можно указать:
| Поле | Описание |
|---|---|
| id | Идентификатор товара. Например, SKU.Необходимо обязательно указать или id, или name |
| name | Название товара. Например, «Футболка».Необходимо обязательно указать или name, или id |
| brand | Бренд, торговая марка, ассоциированная с товаром. Например, «Яндекс / Yandex» |
| category | Категория, к которой относится товар.Поддерживается иерархия категорий до пяти уровней вложенности. Разделителем уровней является символ /. Например, «Одежда/Мужская одежда/Футболки» |
| coupon | Промокод, ассоциированный с товаром. Например, "PARTNER_SITE_15" |
| discount | Размер скидки на товар (указывается как число) |
| list | Список, к которому относится товар.Чтобы оценивать эффективность списка на разных этапах взаимодействия пользователя с товаром, рекомендуем указывать список товара во всех событиях, которые были после просмотра списка |
| position | Позиция товара в списке. Например, 2 |
| price | Цена единицы товара |
| quantity | Количество единиц товара |
| variant | Разновидность товара. Например, «красный цвет» |
В зависимости от того, на каком этапе находится пользователь, вы будете передавать разные комбинации этих параметров. Сейчас разберёмся, как это работает на практике.
Как это выглядит в разных сценариях
Теперь пойдём по пути пользователя и посмотрим, какие события передаются в Метрику в каждый конкретный момент.
1. Просмотр списка товаров
Пользователь открыл страницу каталога или увидел блок «Популярные товары». В этот момент нужно передать событие impressions и перечислить в нём информацию о просмотренных товарах.
Пример:
window.dataLayer.push({
ecommerce: {
currencyCode: "RUB",
impressions: [
{
id: "P15432",
name: "Футболка",
price: 477.60,
list: "Поиск",
position: 1
}
]
}
});
В этом событии указываются id, name, price, list, position, чтобы потом можно было понять, где и какие товары видел пользователь.
Важно передавать в событии impressions только те товары, которые действительно были видны пользователю. Например, если на странице используется карусель, где сначала отображаются лишь первые четыре товара, событие должно срабатывать именно для этих четырёх позиций. Когда пользователь пролистает дальше и увидит следующие товары, необходимо отправить отдельное событие с информацией уже о новом наборе товаров. Это позволяет точнее отслеживать, какие товары реально попали в поле зрения пользователя.
Кроме того, нужно заранее определить все списки, при просмотре которых будет срабатывать событие. Например, каталог товаров, результаты поиска внутри сайта, блоки «Новинки», «Похожие товары», «Популярные товары».
2. Клик по товару
Пользователь нажал на товар из списка. Это событие click, которое показывает, какой товар заинтересовал пользователя.
Пример:
window.dataLayer.push({
ecommerce: {
currencyCode: "RUB",
click: {
products: [
{
id: "39084",
name: "Термостакан Яндекс",
position: 1,
list: "Поиск"
}
]
}
}
});
Обратите внимание: здесь тоже передаётся position и list, чтобы понять, где был клик и по какому товару.
3. Просмотр карточки товара
Пользователь открыл карточку товара. Это событие detail.
Пример:
window.dataLayer.push({
ecommerce: {
currencyCode: "RUB",
detail: {
products: [
{
id: "P15432",
name: "Футболка",
price: 477.60,
category: "Одежда / Футболки",
variant: "Красный",
list: "Поиск"
}
]
}
}
});
На этом этапе важно передать как можно больше информации о товаре — например, указать бренд, категорию, разновидность, список, из которого товар был открыт, и его позицию. Эти параметры помогают точнее анализировать интерес пользователя.
На самом деле подробные данные желательно передавать не только при просмотре карточки, но и при показе списка товаров (impressions). Даже если пользователь видит несколько товаров сразу, в Метрику можно отправить по каждому из них такие параметры, как id, name, price, brand, category, variant, list и position.
4. Добавление товара в корзину
Это событие add — один из самых важных этапов на пути к совершению конверсии.
Пример:
window.dataLayer.push({
ecommerce: {
currencyCode: "RUB",
add: {
products: [
{
id: "43521",
name: "Сумка",
price: 654.32,
quantity: 1
}
]
}
}
});
Для корректного сбора данных важно указывать quantity — это параметр, который указывает, сколько единиц товара выбрал пользователь. Например, если человек добавляет в корзину сразу две футболки, то quantity будет 2. Этот параметр помогает Метрике рассчитать количество товаров в заказе.
Важно учесть все сценарии добавления товара в корзину. Например, из категории, результатов поисковой выдачи внутри сайта, на странице корзины, когда пользователь увеличивает количество товаров, нажимая «+».
5. Удаление из корзины
Если пользователь передумал и удалил один или несколько товаров, можно передать событие remove.
Пример:
window.dataLayer.push({
ecommerce: {
currencyCode: "RUB",
remove: {
products: [
{
id: "15243",
name: "Набор салфеток",
quantity: 1
}
]
}
}
});
Важно учесть все сценарии удаления товара из корзины. Это может быть уменьшение количества с помощью кнопки «−» или использование кнопки «Очистить корзину».
Кроме того, важно, чтобы структура события удаления соответствовала структуре события добавления. Например, если при добавлении товара вы не передаёте параметр quantity, а при удалении передаёте, в отчётах могут появиться некорректные значения, вплоть до отрицательных. Чтобы избежать ошибок в аналитике, параметры должны быть согласованы между событиями add и remove.
6. Покупка
Событие purchase отправляется в момент оформления заказа — оно фиксирует факт покупки.
Пример:
window.dataLayer.push({
ecommerce: {
currencyCode: "RUB",
purchase: {
actionField: {
id: "TRX987",
revenue: 2888.88
},
products: [
{
id: "25341",
name: "Толстовка",
price: 1345.26,
quantity: 1
}
]
}
}
});
В actionField нужно указать идентификатор покупки (id). Этот параметр обязателен для передачи события покупки (purchase) — без него данные о заказе не будут отображаться в отчётах электронной коммерции.
Дополнительно в actionField можно передать:
Эти данные нужны, чтобы Метрика могла фиксировать факт оформления заказа. Всё, что касается самих товаров (название, цена, количество), по-прежнему указывается в массиве products.
Важно, чтобы событие purchase срабатывало только после успешного оформления заказа — например, на странице «Спасибо за покупку», когда заказ действительно завершён.
Не рекомендуется передавать данные в момент перехода на страницу — например, по событию onclick на кнопке «Оформить заказ»: в этом случае следующая страница может загрузиться до того, как счётчик успеет отправить событие, и данные потеряются.
Кроме того, важно исключить повторную отправку события при обновлении страницы, чтобы избежать дублирования данных в отчётах.
7. Просмотр или клик по внутренней рекламе
Если на сайте размещены баннеры или другие рекламные элементы, их эффективность тоже можно анализировать через Метрику. Для этого используются два события:
Эти события помогают понять, какие промоакции привлекают внимание, какие из них действительно работают и где лучше размещать рекламные материалы.
Данные о рекламе передаются в массиве promotions.
Просмотр баннеров (promoView)
window.dataLayer.push({
ecommerce: {
promoView: {
promotions: [
{
id: "BF001",
name: "Чёрная пятница",
creative: "Баннер_1",
position: "Слот1"
},
{
id: "SUMMER002",
name: "Летние распродажи",
creative: "Баннер_3",
position: "Слот2"
}
]
}
}
});
Клик по баннеру (promoClick)
window.dataLayer.push({
ecommerce: {
promoClick: {
promotions: [
{
id: "BF001",
name: "Чёрная пятница",
creative: "Баннер_1",
position: "Слот1"
}
]
}
}
});
В этом массиве данных обязательно нужно указать идентификатор промокампании (id), также можно добавить name и creative (названия кампании и баннера), creative_slot и position (слот и позиция рекламного баннера). Эти параметры помогут Метрике фиксировать эффективность рекламных акций на сайте — вы сможете понять, какие баннеры чаще видят и по каким переходят, а какие приводят к покупкам.
Обратите внимание
Выводы
Закрепите знания
Пройдите короткий тест, чтобы проверить, запомнили ли вы ключевые идеи этого материала.