Налаштування Google Tag Manager на 1С-Bitrix
GTM — це прошарок між сайтом та аналітикою. Замість того щоб кожен раз просити розробника додавати пікселі та коди відстеження, маркетолог налаштовує тригери та теги в інтерфейсі GTM сам. Але щоб це працювало, розробнику потрібно один раз правильно встановити GTM та налаштувати dataLayer з подіями електронної торгівлі.
Встановлення GTM у шаблон Bitrix
GTM потребує двох фрагментів коду: один у <head>, другий одразу після <body>. У шаблоні Bitrix (/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; ?>
Подія покупки після оплати
Найважливіша подія — факт покупки. У компоненті 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 при кліку на кнопку «Додати в кошик». Перехопіть стандартну подію Bitrix:
// У шаблоні або у /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 || 'RUB',
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-додаванні в кошик.
Перевірка роботи
Встановіть розширення Google «Tag Assistant» у браузер. Воно покаже, які теги GTM спрацювали, з якими даними та чи були помилки у dataLayer.
Або через консоль браузера:
// Переглянути всі події у dataLayer
console.table(window.dataLayer);
// Стежити за новими подіями
const origPush = window.dataLayer.push.bind(window.dataLayer);
window.dataLayer.push = function(data) {
console.log('dataLayer push:', data);
return origPush(data);
};
Зберігання 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 без редагування коду через адміністративний інтерфейс або настройки кастомного модуля.