Просмотры списков товаров (view_item_list)
Пользователь открывает страницу категории, каталога, подборки или лендинга с товарами. Бэкенд ничего не передает в dataLayer, а аналитике всё равно нужно знать:
- какие товары были показаны;
- в каком списке (категории, подборке, кампании);
- и с какими параметрами.
Enhanced e-commerce использует два ключевых события:
- view_item_list — просмотр списка товаров.
- select_item — клик по карточке из списка.
Оба события полностью могут быть размечены на фронте без участия сервера.
Фронтенд-пример разметки (DOM)
На каждой карточке товара добавляем data-* атрибуты. Это стандартная, безопасная и GTM-дружелюбная практика:
<div class="product-card"
data-id="4581"
data-name="Кофемашина Philips 5400"
data-category="home-appliances"
data-price="699.00"
data-list="category_page">
...
</div>
Если карточки выводятся динамически (через JS), важно, чтобы атрибуты были доступны к моменту PageView, либо нужно использовать триггер DOM Ready.
GTM: настройка переменных и триггеров
Переменные (Variables)
Создаем переменные типа DOM Element → Element Attribute:
Триггеры
- view_item_list → триггер
Page View – DOM Ready, условие: страница содержит.product-card. - select_item → триггер
Click – All Elements, условие: клик по.product-card.
Отправка в dataLayer (пример Custom HTML тега)
<script>
(function() {
const cards = document.querySelectorAll('.product-card');
if (!cards.length) return;
const items = [];
cards.forEach(card => {
items.push({
item_id: card.dataset.id,
item_name: card.dataset.name,
item_category: card.dataset.category,
price: Number(card.dataset.price),
item_list_name: card.dataset.list
});
});
window.dataLayer.push({
event: 'view_item_list',
ecommerce: {
item_list_name: cards[0].dataset.list,
items: items
}
});
})();
</script>
<script>
//select_item -- клик по карточке
document.addEventListener('click', function(e) {
const card = e.target.closest('.product-card');
if (!card) return;
dataLayer.push({
event: 'select_item',
ecommerce: {
items: [{
item_id: card.dataset.id,
item_name: card.dataset.name,
item_category: card.dataset.category,
price: Number(card.dataset.price),
item_list_name: card.dataset.list
}]
}
});
});
</script>
В GTM это можно разместить как Custom HTML тег либо как встроенный listener.
Аналитики смогут видеть:
- топ-списки, которые приводят покупателей;
- CTR карточек в списках;
- эффективность категорий;
- связки с последующими событиями.
Клики по баннерам и промоакциям (promotion_view, promotion_click)
На странице есть баннеры, промоблоки, спецпредложения или внутренние рекламные модули. Сервер не передает события в dataLayer, но необходимо фиксировать:
- какие баннеры видит пользователь (
promotion_view); - по каким баннерам он кликает (
promotion_click).
Эти события относятся к Enhanced e-commerce и могут быть полностью размечены на фронте через DOM и GTM.
Фронтенд-пример разметки (DOM)
Каждому баннеру добавляются data-атрибуты с параметрами акции:
<div class="promo-banner"
data-promo-id="spring_sale"
data-promo-name="Весенняя распродажа"
data-position="homepage_top">
<a href="/catalog/sale">...</a>
</div>
Рекомендую добавлять атрибуты прямо в HTML, даже если баннеры грузятся динамически.
GTM: настройка переменных и триггера
Переменные
Создаются DOM-переменные для получения атрибутов:
Триггеры
- Для просмотра баннера (promotion_view): Page View – DOM Ready с условием: наличие
.promo-bannerна странице. - Для клика (promotion_click): Click – All Elements с условием: клик по
.promo-bannerили внутренним элементам (.promo-banner *).
Отправка события в dataLayer (пример кода)
promotion_view — фиксируем факт показа баннера:
<script>
(function() {
const banners = document.querySelectorAll('.promo-banner');
if (!banners.length) return;
const items = [];
banners.forEach(banner => {
items.push({
promotion_id: banner.dataset.promoId,
promotion_name: banner.dataset.promoName,
creative_slot: banner.dataset.position
});
});
dataLayer.push({
event: 'promotion_view',
ecommerce: {
promoView: {
promotions: items
}
}
});
})();
</script>
promotion_click — фиксируем клики по баннеру:
<script>
document.addEventListener('click', function(e) {
const banner = e.target.closest('.promo-banner');
if (!banner) return;
dataLayer.push({
event: 'promotion_click',
ecommerce: {
promoClick: {
promotions: [{
promotion_id: banner.dataset.promoId,
promotion_name: banner.dataset.promoName,
creative_slot: banner.dataset.position
}]
}
}
});
});
</script>
Этот код можно разместить как Custom HTML тег в GTM.
Что это даст аналитикам:
- Возможность измерять эффективность каждого баннера: показы и клики.
- Расчет CTR баннеров на разных позициях страницы.
- Понимание, какие промоакции реально приводят к взаимодействию.
- Возможность связывать баннеры с последующими конверсионными событиями: select_item → add_to_cart → purchase.
- Оптимизацию размещения баннеров на основе данных, а не на интуиции.
Добавление в избранное (add_to_wishlist)
На сайте есть кнопка-«сердечко» или «Добавить в избранное», но сервер не отправляет событие в dataLayer. Необходимо фиксировать, какие товары пользователи добавляют в wishlist, чтобы анализировать популярность товаров и сравнивать ее с реальными покупками.
Фронтенд-пример разметки (DOM)
Каждая кнопка добавления в избранное должна содержать информацию о товаре через data-* атрибуты:
<button class="wishlist-btn"
data-id="12345"
data-name="Спортивные кроссовки"
data-price="4990"
data-category="shoes">
♥
</button>
Если кнопка лежит внутри карточки товара, допускается считывание атрибутов у родителя:
<div class="product-card"
data-id="12345"
data-name="Спортивные кроссовки"
data-price="4990"
data-category="shoes">
<button class="wishlist-btn">♥</button>
</div>
GTM: настройка переменных и триггера
Переменные
Если нужные атрибуты находятся у родительского элемента, можно использовать: Auto-Event Variable → Element → “Closest Selector” → .product-card.
Триггер
Тип: Click – All Elements.
Условие: Click Element matches CSS selector .wishlist-btn
Отправка события в dataLayer (Custom HTML тег)
<script>
dataLayer.push({
event: 'add_to_wishlist',
ecommerce: {
items: [{
item_id: '{{varProductId}}',
item_name: '{{varProductName}}',
price: Number('{{varProductPrice}}'),
item_category: '{{varProductCategory}}'
}]
}
});
</script>
Вставляется в Custom HTML тег, который срабатывает при клике по .wishlist-btn.
Что это даст аналитикам:
- Понимание, какие товары чаще попадают в wishlist, но не покупаются.
- Возможность выявить товары с высоким интересом, но низкой конверсией.
- Сегментацию событий: пользователи, активно добавляющие избранное, часто являются «теплой» аудиторией.
- Возможность построить воронку «Просмотр → Избранное → Корзина → Покупка».
- Основу для персонализированных рекомендаций и ремаркетинга, ориентированного на желания пользователя.
Шаги оформления заказа (checkout_step_1, checkout_step_2, checkout_step_3)
Пользователь проходит оформление заказа: вводит контактные данные, выбирает способ доставки, затем — способ оплаты. Сервер не передает информацию о шагах checkout, но необходимо зафиксировать каждое действие, чтобы понимать, где отваливаются пользователи.
Шаги могут выглядеть так:
- Step 1 — ввод контактных данных.
- Step 2 — выбор способа доставки.
- Step 3 — выбор метода оплаты.
Фронтенд-пример разметки
Разработчик помечает шаги через data-атрибуты:
<div class="checkout-step" data-step="1">
<input type="text" name="email" placeholder="Email">
<button class="checkout-next-btn" data-step="1">Далее</button>
</div>
<div class="checkout-step" data-step="2">
<label>
<input type="radio" name="delivery" value="courier"> Курьер
</label>
<button class="checkout-next-btn" data-step="2">Далее</button>
</div>
<div class="checkout-step" data-step="3">
<label>
<input type="radio" name="payment" value="card"> Онлайн-оплата картой
</label>
<button class="checkout-next-btn" data-step="3">Подтвердить заказ</button>
</div>
Важно: на кнопке или блоке есть data-step, которое GTM может считать.
GTM: настройка переменных и триггера
Переменные
Дополнительно можно сделать переменные для email/телефона, но не отправлять персональные данные в GA4, ограничимся шагами и выбором.
Триггер
Тип: Click – All Elements
Условие: Click Element matches CSS selector .checkout-next-btn
Отправка события checkout_step в dataLayer
Пример Custom HTML тега:
<script>
dataLayer.push({
event: 'checkout_step',
ecommerce: {
checkout_step: Number('{{varCheckoutStep}}'),
checkout_options: {
delivery_method: '{{varDeliveryMethod}}',
payment_method: '{{varPaymentMethod}}'
}
}
});
</script>
Тег срабатывает при клике на .checkout-next-btn.
Что это даст аналитикам:
- Точную воронку прохождения checkout по шагам.
- Понимание, на каком этапе пользователи чаще всего уходят.
- Анализ конверсии каждого шага: контакты → доставка → оплата → покупка.
- Возможность сравнить эффективность вариантов доставки и оплаты.
- Основу для A/B-тестов оформления заказа.
- Возможность корректировать UX checkout, если один шаг заметно «ломает» воронку.
Отмена заказа и возврат (refund)
Пользователь переходит в личный кабинет и нажимает кнопку «Отменить заказ» или отправляет заявку на возврат. Бэкенд может не отправлять событие о возврате в dataLayer, поэтому фиксацию отмены заказа приходится делать на фронте.
Обычно в интерфейсе есть кнопка:
- «Отменить заказ».
- «Оформить возврат».
Главное, чтобы на элементе были указаны данные заказа через атрибуты.
Фронтенд-пример разметки
<div class="order-item"
data-order-id="ORD-98431"
data-order-products='[{"id":"101","name":"Кроссовки","price":4990,"quantity":1}]'>
<button class="order-cancel-btn"
data-order-id="ORD-98431">
Отменить заказ
</button>
</div>
Комментарии:
data-order-id— уникальный ID заказа.data-order-products— JSON со списком товаров, который можно считать через GTM.- Кнопка
.order-cancel-btnинициирует refund.
GTM: настройка переменных и триггера
Переменные
Пример Custom JS Variable:
function() {
try {
var raw = {{varRefundProducts}};
return JSON.parse(raw);
} catch(e) {
return [];
}
}
Триггер
Тип: Click – All Elements
Условие: Click Element matches CSS selector .order-cancel-btn
Отправка события refund через Custom HTML тег
<script>
dataLayer.push({
event: 'refund',
ecommerce: {
transaction_id: '{{varOrderId}}',
items: {{varRefundProductsParsed}}
}
});
</script>
Комментарии:
transaction_id— обязательное поле для GA4.
items— список товаров, участвующих в возврате или отмененном заказе.
- Если товаров несколько — передаем полный массив объектов.
Что это даст аналитикам:
- Отслеживание отмен заказов без участия бэкенда.
- Понимание, какие товары чаще возвращают или отменяют.
- Возможность построить метрику Refund Rate по товарам, категориям, брендам.
- Выявление проблемных SKU: высокая доля возвратов может говорить о браке, неверных размерах или плохих фото.
- Корректировку расчетов прибыли: возвраты и отмены можно вычитать из итоговых продаж.
- Возможность анализировать влияние шагов checkout на вероятность возврата.
