Особенности фронтенд-разметки через GTM
Google Tag Manager работает как «прослойка» между сайтом и системами аналитики. Все события фиксируются через триггеры (например, клик по кнопке «Добавить в корзину»), переменные var (которые считывают значения из DOM: атрибуты, id, текст элементов) и механизм dataLayer, куда складываются данные для последующей отправки в системы аналитики.
Главное ограничение такого подхода в том, что GTM не имеет прямого доступа к серверной информации: он «видит» только то, что отображено на фронте. Именно поэтому для корректной работы приходится использовать DOM: атрибуты data-*, уникальные идентификаторы и CSS-классы. Именно через них GTM «понимает», какой товар просматривает или добавляет в корзину пользователь. Конечно, можно использовать и другие атрибуты и даже читать содержимое тегов, но это уже совсем костыли, и давайте рассматривать гипотетическую ситуацию, когда фронту удалось договориться на передачу всех необходимых данных хотя бы в data-атрибуты. В этой парадигме и продолжим статью.
Чтобы аналитика была удобной и не ломалась при каждом редизайне, важно заранее договориться о единых стандартах именования атрибутов и классов. Например:
- для карточек товаров использовать атрибуты
data-id,data-name,data-price; - для кнопок добавления в корзину —
data-action="add-to-cart"; - для кнопки удаления —
data-action="remove-from-cart".
Важно: я это делаю для простоты понимания в статье, такая унификация ускоряет интеграцию, тем не менее у вас может быть совершенно по-другому. Именно поэтому адаптируйте примеры из статьи под ваши data-атрибуты.
Просмотр карточки товара (view_item)
Пользователь открывает страницу товара. В идеале бэкенд сразу отправляет событие с ID, названием и ценой товара, но в нашем случае сервер этого не делает. Значит, нужно собирать данные с фронта.
Фронт-пример
Для удобства разработчики добавляют в HTML карточки товара атрибуты:
<div class="product-card"
data-id="12345"
data-name="Смартфон Samsung Galaxy A34"
data-price="19990">
</div>
Таким образом вся информация о товаре доступна прямо в DOM.
GTM: создание переменных
В GTM создаем переменные типа DOM Element → Data Attribute:
productId→ data-id;productName→ data-name;productPrice→ data-price.
Эти переменные будут автоматически подставлять значения из атрибутов на странице.
Отправка в dataLayer через тег
Дальше в GTM создаем Custom HTML Tag, который при загрузке страницы товара пушит данные в dataLayer:
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "view_item",
ecommerce: {
items: [{
item_id: "{{productId}}", // DOM var: data-id
item_name: "{{productName}}", // DOM var: data-name
price: "{{productPrice}}", // DOM var: data-price
currency: "RUB"
}]
}
});
</script>
Здесь {{productId}}, {{productName}}, {{productPrice}} — это переменные GTM, которые мы заранее создали.
Триггер: Page View → только на страницах товара (например, по URL /product/).
После внедрения события аналитики смогут:
- видеть, какие товары чаще всего просматриваются;
- анализировать соотношение просмотров и покупок (например, товары с высоким интересом, но низкой конверсией);
- выявлять «товары-приманки», которые хорошо привлекают внимание, но плохо продаются;
- понимать эффективность SEO и рекламных кампаний — какие позиции из внешнего трафика реально доходят до просмотра карточки.
Таким образом, метрика view_item становится фундаментом всей аналитики e-commerce, так как именно с нее начинается путь покупателя.
Добавление товара в корзину (add_to_cart)
На сайте есть кнопка «Добавить в корзину». Но бэкенд не передает событие в dataLayer. Значит, мы должны отловить событие на фронте через GTM.
Фронт-пример
HTML кнопки может выглядеть так:
<button class="add-to-cart"
data-id="12345"
data-name="Смартфон Samsung Galaxy A34"
data-price="19990"
data-quantity="1">
Добавить в корзину
</button>
GTM: настройка переменных и триггера
Создаем переменные DOM → Data Attribute:
productId→ data-id;productName→ data-name;productPrice→ data-price;productQuantity→ data-quantity.
Создаем триггер типа Click — All Elements с фильтром:
Click Classesсодержитadd-to-cart.
Отправка события в dataLayer
Теперь создаем Custom HTML Tag с кодом:
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "add_to_cart",
ecommerce: {
items: [{
item_id: "{{productId}}", // data-id
item_name: "{{productName}}", // data-name
price: "{{productPrice}}", // data-price
quantity: "{{productQuantity}}" // data-quantity
}]
}
});
</script>
Важно: тег должен срабатывать только при клике по кнопке «Добавить в корзину» (наш триггер Click).
Событие add_to_cart показывает интерес к товару, даже если покупка не состоялась. Это позволяет:
- понимать, какие товары чаще добавляют, но не покупают (кандидаты в «зависшие корзины»);
- анализировать эффективность акций — какие товары люди охотно кладут в корзину при скидке;
- считать долю отвалившихся пользователей: сколько добавили товар, но не дошли до оплаты;
- сравнивать источники трафика — где выше конверсия «просмотр → добавление в корзину».
В результате аналитики видят не только продажи, но и намерения покупателей, что важно для корректной оптимизации маркетинга.
Удаление товара из корзины (remove_from_cart)
Пользователь удаляет товар из корзины, но серверное событие не отправляется.
Фронт-пример
На кнопке или иконке «Удалить» висит класс .remove-from-cart, в элементе — нужные data-* атрибуты:
<button class="remove-from-cart"
data-id="123"
data-name="Nike Air Zoom"
data-price="7990">Удалить
</button>
GTM: настройка переменных и триггера
- Триггер: Click Element с условием
Click Classesсодержитremove-from-cart. - Переменные: DOM → Data Attribute (
data-id,data-name,data-price).
Отправка события в dataLayer
Теперь создаем Custom HTML Tag с кодом:
<script>
document.addEventListener('click', function(e) {
if (e.target.closest('.remove-from-cart')) {
var el = e.target.closest('.remove-from-cart');
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'remove_from_cart',
ecommerce: {
items: [{
item_id: el.getAttribute('data-id'),
item_name: el.getAttribute('data-name'),
price: el.getAttribute('data-price')
}]
}
});
}
});
</script>
Что это даст аналитикам:
- Метрику «churn в корзине» (drop-off перед оплатой).
- Сравнение товаров: какие добавляют, но почти всегда удаляют.
- Инсайты для оптимизации ассортимента и UX корзины.
- Частоту удаления товаров из корзины.
- Какие товары чаще всего убирают перед покупкой.
- Возможность анализировать барьеры к конверсии (например, слишком высокая цена, неподходящий размер).
Начало оформления заказа (begin_checkout)
Пользователь нажимает кнопку «Оформить заказ» на странице корзины. Серверное событие не настроено, а фиксировать момент перехода к оформлению критически важно.
Фронт-пример
Кнопка оформления заказа имеет класс и data-* атрибуты с нужной информацией:
<button class="begin-checkout"
data-cart-id="456"
data-total="15980"
data-items="2">Оформить заказ
</button>
GTM: настройка переменных и триггера
- Триггер: Click Element с условием
Click Classesсодержитbegin-checkout. - Переменные: DOM → Data Attribute (
data-cart-id,data-total,data-items).
Отправка события в dataLayer
Теперь создаем Custom HTML Tag с кодом:
<script>
document.addEventListener('click', function(e) {
if (e.target.closest('.begin-checkout')) {
var el = e.target.closest('.begin-checkout');
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'begin_checkout',
ecommerce: {
currency: "RUB",
value: el.getAttribute('data-total'),
items: [{
cart_id: el.getAttribute('data-cart-id'),
quantity: el.getAttribute('data-items')
}]
}
});
}
});
</script>
Что это даст аналитикам:
- Метрику перехода от «добавления в корзину» к «началу оформления заказа».
- Сравнение пользователей, которые добавили товар, но не дошли до checkout.
- Оценку воронки: сколько людей теряется между корзиной и оплатой.
- Возможность оптимизировать путь клиента (например, упростить корзину или убрать отвлекающие элементы).
Покупка (purchase)
Пользователь успешно завершает заказ (например, попадает на страницу «Спасибо за покупку»). Сервер не передает событие покупки, но мы можем считать данные из DOM на странице подтверждения заказа.
Фронт-пример
На странице «Спасибо за заказ» может быть блок с деталями:
<div id="order-confirmation"
data-order-id="789"
data-total="15980"
data-currency="RUB">
<div class="order-item" data-id="123" data-name="Ноутбук" data-price="12990" data-qty="1"></div>
<div class="order-item" data-id="456" data-name="Мышь" data-price="2990" data-qty="1"></div>
</div>
GTM: настройка переменных и триггера
- Триггер: Page View → условие
Page Pathсодержит/thank-youилиDOM Readyна странице подтверждения. - Переменные: DOM → Data Attribute (
data-order-id,data-total,data-currency, а также циклом читаемorder-item).
Отправка события в dataLayer
Теперь создаем Custom HTML Tag с кодом:
<script>
document.addEventListener('DOMContentLoaded', function() {
var order = document.getElementById('order-confirmation');
if (order) {
var items = [];
order.querySelectorAll('.order-item').forEach(function(item) {
items.push({
item_id: item.getAttribute('data-id'),
item_name: item.getAttribute('data-name'),
price: item.getAttribute('data-price'),
quantity: item.getAttribute('data-qty')
});
});
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: order.getAttribute('data-order-id'),
currency: order.getAttribute('data-currency'),
value: order.getAttribute('data-total'),
items: items
}
});
}
});
</script>
Что это даст аналитикам:
- Видеть фактические покупки даже без серверной интеграции.
- Сравнивать число начатых заказов и завершенных.
- Оценивать средний чек и структуру заказов.
- Анализировать, какие товары реально доходят до покупки.
- Построить полноценную воронку Standard Ecommerce:
view_item→add_to_cart→begin_checkout→purchase.
Советы и лайфхаки фронтенд-разметки через GTM
Используйте data-* атрибуты вместо классов — стили верстальщики меняют часто, а атрибуты можно стандартизировать и оставить только для аналитики.
Добавляйте уникальные идентификаторы к товарам и кнопкам (например, data-id="12345") — это гарантирует корректное сопоставление действий пользователей с конкретными SKU.
Комбинируйте Click Triggers + DOM Variables — один триггер на клик и несколько переменных для извлечения атрибутов дают максимально точную фиксацию событий.
Используйте утилитный скрипт для пуша в dataLayer — например, pushEcomEvent(eventName, itemObj), чтобы все события были в едином формате и поддержка аналитики занимала минуты, а не часы.
Выводы
Даже без серверной интеграции можно отстроить полный цикл стандартных событий e-commerce — от просмотра товара до покупки. Фронтенд-разметка через GTM позволяет: получать стабильные данные о поведении пользователей, видеть реальные действия с товарами и корзиной, строить воронки и находить «узкие места» в процессе покупки. Эта база легко расширяется до Enhanced Ecommerce и интеграции с BI-системами, где уже можно строить прогнозы, считать ROI и оптимизировать маркетинг на новом уровне. Но не так легко она расширяется, если у нас нет возможности обратиться к backend-разработчикам. Именно разработку событий Enhanced Ecommerce со стороны только фронта рассмотрим в следующей, финальной статье цикла.
