Налаштування Google Tag Manager на 1С-Бітрікс
Уявіть: маркетолог просить додати піксель VK, через тиждень — Яндекс.Метрику, потім — ланцюжок подій для GA4. Щоразу доводиться лізти в код, правити шаблони, викочувати оновлення. Наш досвід показує: правильне встановлення Google Tag Manager на 1С-Бітрікс вирішує цю проблему раз і назавжди. Ми налаштовуємо GTM так, щоб маркетолог сам керував тегами через інтерфейс, а dataLayer автоматично передавав усі дані про покупки, кошики та перегляди.
Чому dataLayer обов'язковий для інтернет-магазину?
Без dataLayer GTM — просто порожня оболонка. Ви можете опублікувати тег GA4, але не отримаєте даних про ціну товару, категорію, ID транзакції. Для інтернет-магазину на 1С-Бітрікс dataLayer — це міст між подіями на сайті та системами аналітики. Він передає структуровані дані: item_id, item_name, price, currency, quantity. GA4, Яндекс.Метрика та інші сервіси очікують саме такий формат. Якщо dataLayer налаштовано неправильно, ви втрачаєте до 30% даних про конверсії — перевірено на десятках проєктів.
Типові помилки при інтеграції GTM в 1С-Бітрікс
Жорстке кодування ID контейнера
Часто розробники вписують GTM-XXXXXXX прямо в шаблон. При зміні контейнера (наприклад, для тестування або переходу на інший акаунт) доводиться знову редагувати файли. Ми зберігаємо ID в налаштуваннях модуля через \Bitrix\Main\Config\Option::set — це дозволяє змінювати ID через адмінку без деплою.
Відсутність тегованого кешування
1С-Бітрікс агресивно кешує сторінки. Якщо dataLayer генерується динамічно (наприклад, ціна залежить від знижки користувача), кеш може показати застарілі дані. Ми використовуємо тегований кеш і скидаємо його при зміні ціни або залишку. Без цього події view_item можуть містити невірну вартість — розбіжності з реальними замовленнями сягають до 15%.
Подія purchase тільки на сторінці замовлення
Багато хто обмежується відправкою purchase в момент оформлення. Але потрібно також передавати add_to_cart, remove_from_cart, begin_checkout. Без цих подій ви не зможете побудувати повну воронку в GA4. Ми додаємо всі ключові події, використовуючи штатні механізми Бітрікс: OnBasketChange, OnOrderSave, OnSalePayOrder.
Як ми налаштовуємо GTM: покроковий процес
- Аналіз поточного сайту: перевіряємо версію Бітрікс, кешування, встановлені модулі, тип торгового каталогу.
- Проектування dataLayer: складаємо карту подій (перегляд товару, додавання до кошика, оформлення, покупка) та погоджуємо з маркетологом.
- Розробка та інтеграція: додаємо код встановлення GTM в шаблон, пишемо result_modifier для компонентів каталогу та кошика, реалізуємо серверну генерацію dataLayer для подій після оплати.
- Тестування: перевіряємо кожну подію через Tag Assistant та консоль браузера, звіряємо дані з реальними замовленнями з 1С.
- Деплой та документація: заливаємо на бойовий сервер, віддаємо клієнту інструкцію по роботі з GTM.
Приклад реалізації: встановлення GTM та dataLayer
Встановлення GTM в шаблон Бітрікс
GTM вимагає два фрагменти коду: один у <head>, другий одразу після <body>. У шаблоні Бітрікс (/bitrix/templates/[name]/header.php):
<?php
// ID контейнера GTM з акаунту Google Tag Manager
$gtmId = \Bitrix\Main\Config\Option::get('custom', 'gtm_container_id', 'GTM-XXXXXXX');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- GTM в head (якомога раніше) -->
<?php if ($gtmId): ?>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<?= htmlspecialchars($gtmId) ?>');</script>
<?php endif; ?>
</head>
<body>
<!-- GTM noscript одразу після <body> -->
<?php if ($gtmId): ?>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?= htmlspecialchars($gtmId) ?>"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<?php endif; ?>
ID контейнера зберігати в b_option (таблиця налаштувань) через адміністративний інтерфейс — не в коді, щоб маркетолог міг змінювати без деплою.
dataLayer для сторінок товару
Для роботи розширеної електронної торгівлі (GA4 Ecommerce) потрібен dataLayer з даними товару. У шаблоні компонента bitrix:catalog.element або в result_modifier.php:
// bitrix/templates/.default/components/bitrix/catalog.element/.default/result_modifier.php
if (!empty($arResult['CATALOG_PRICE']['BASE']['PRICE'])) {
$product = [
'item_id' => $arResult['ID'],
'item_name' => $arResult['NAME'],
'price' => (float)$arResult['CATALOG_PRICE']['BASE']['PRICE'],
'currency' => $arResult['CATALOG_PRICE']['BASE']['CURRENCY'],
'item_category' => $arResult['SECTION']['NAME'] ?? '',
'item_brand' => $arResult['PROPERTIES']['BRAND']['VALUE'] ?? ''
];
$this->arResult['GTM_PRODUCT'] = $product;
}
У шаблоні компонента вивести dataLayer перед закриваючим </body>:
<?php if (!empty($arResult['GTM_PRODUCT'])): ?>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'view_item',
ecommerce: {
currency: '<?= htmlspecialchars($arResult['GTM_PRODUCT']['currency']) ?>',
value: <?= (float)$arResult['GTM_PRODUCT']['price'] ?>,
items: [<?= json_encode($arResult['GTM_PRODUCT'], JSON_UNESCAPED_UNICODE) ?>]
}
});
</script>
<?php endif; ?>
Подія purchase після оплати
Найважливіша подія — факт покупки. У компоненті bitrix:sale.order.ajax або на сторінці «Дякуємо за замовлення»:
<?php
// Отримати останнє замовлення поточного користувача
$orderId = (int)($_SESSION['SALE_ORDER_ID_REDIRECTED'] ?? 0);
if ($orderId > 0) {
$order = \Bitrix\Sale\Order::load($orderId);
if ($order) {
$items = [];
foreach ($order->getBasket() as $basketItem) {
$items[] = [
'item_id' => $basketItem->getProductId(),
'item_name' => $basketItem->getField('NAME'),
'price' => (float)$basketItem->getPrice(),
'quantity' => (int)$basketItem->getQuantity()
];
}
?>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: '<?= $order->getId() ?>',
value: <?= (float)$order->getPrice() ?>,
currency: '<?= $order->getCurrency() ?>',
items: <?= json_encode($items, JSON_UNESCAPED_UNICODE) ?>
}
});
</script>
<?php
}
}
?>
Додавання до кошика через JS
Подія add_to_cart генерується в JavaScript при кліку на кнопку «Додати до кошика». Перехопити стандартну подію Бітрікс:
// У шаблоні або в /local/templates/.default/js/analytics.js
BX.addCustomEvent('OnBasketChange', function(event) {
if (event.action === 'ADD') {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: event.currency || 'UAH',
value: event.price * event.quantity,
items: [{
item_id: String(event.productId),
item_name: event.productName || '',
price: event.price,
quantity: event.quantity
}]
}
});
}
});
Подія OnBasketChange генерується модулем sale через BX.Event при AJAX-додаванні до кошика.
Як перевірити працездатність dataLayer?
У браузері встановити розширення «Tag Assistant» від Google. Воно покаже які теги GTM спрацювали, з якими даними та чи були помилки в dataLayer. Або через консоль браузера виконайте console.table(window.dataLayer) для перегляду всіх подій.
Зберігання ID контейнера
Не жорстко кодувати GTM ID у шаблоні — використовувати b_option:
// Запис через API
\Bitrix\Main\Config\Option::set('custom', 'gtm_container_id', 'GTM-XXXXXXX');
// Читання
$gtmId = \Bitrix\Main\Config\Option::get('custom', 'gtm_container_id');
Це дозволяє змінювати ID без правки коду через адміністративний інтерфейс або через налаштування кастомного модуля.
Порівняння підходів: жорстке кодування проти налаштування через dataLayer
| Критерій | Жорстке кодування скриптів | GTM + dataLayer |
|---|---|---|
| Час внесення змін | 1-2 години (правка коду, деплой) | 5 хвилин (через інтерфейс GTM) |
| Залежність від розробника | Кожного разу | Тільки при старті |
| Помилки в даних | Часто (плутають валюту, ID) | Рідко (dataLayer формується Бітріксом) |
| Підтримка GA4 Ecommerce | Вимагає окремої реалізації | Вбудована через dataLayer |
Налаштування GTM через dataLayer у 3 рази скорочує час на додавання нових тегів і виключає помилки, пов'язані з ручним копіюванням коду.
Події dataLayer та їх тригери
| Подія | Тригер | Дані |
|---|---|---|
view_item |
Перегляд сторінки товару | item_id, name, price, category |
add_to_cart |
AJAX-додавання до кошика | item_id, name, price, quantity |
remove_from_cart |
AJAX-видалення з кошика | item_id, name, price, quantity |
begin_checkout |
Перехід до оформлення | items, value |
purchase |
Успішна оплата | transaction_id, value, items |
Що входить в результат
- Встановлення GTM в шаблон зі зберіганням ID в налаштуваннях.
- Інтеграція dataLayer для подій:
view_item,add_to_cart,remove_from_cart,begin_checkout,purchase. - Налаштування тегованого кешування для динамічних даних.
- Перевірка через Tag Assistant та консоль.
- Документація по додаванню нових тегів в GTM.
- Гарантія коректної передачі даних протягом 30 днів.
Чому варто довірити налаштування професіоналам?
Ми спеціалізуємося на 1С-Бітрікс та GTM понад 5 років, реалізували інтеграцію для 50+ інтернет-магазинів. Наші інженери сертифіковані по Бітрікс та Google Analytics. Ми враховуємо особливості кешування, торгових пропозицій, знижок та обміну з 1С через CommerceML. Отримайте консультацію по вашому проєкту — оцінимо обсяг робіт та терміни. Зв'яжіться з нами, щоб обговорити деталі.