Налаштування 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. Отримайте консультацію по вашому проєкту — оцінимо обсяг робіт та терміни. Зв'яжіться з нами, щоб обговорити деталі.