Налаштування теплових карт кліків на 1С-Бітрікс
Уявіть: на сторінці каталогу 80% кліків припадають на назву товару, хоча посилання веде тільки на кнопку «В кошик». Карта кліків показує таку поведінку — це сигнал, що верстка не збігається з очікуваннями користувачів. Але щоб карта була достовірною, її потрібно правильно налаштувати під 1С-Бітрікс. За нашою статистикою, 90% проблем з тепловими картами на цій CMS викликані динамічним контентом та AJAX-підвантаженням. Виправлення цього дає точні дані вже наступного дня. У цій статті розберемо, як налаштувати інструменти (Яндекс.Метрика, Hotjar, Clarity) без втрати даних. Для швидкого старту зв'яжіться з нами — ми допоможемо з вибором та інтеграцією.
Вибір інструменту для теплових карт: який варіант найкращий?
| Інструмент | Вартість | Особливості на Бітріксі | Рекомендація |
|---|---|---|---|
| Яндекс.Метрика (карта кліків) | Безкоштовно | Потребує переініціалізації при AJAX | Для простих сайтів без SPA, економія 0 грн/міс |
| Hotjar | Від $39/міс (~1400 грн) | Повні сеанси, маскування полів, сегментація | Для детального аналізу UX, інвестиція окупається за 2 місяці |
| Microsoft Clarity | Безкоштовно | Автоматично записує кліки, маскування полів | Найкраща безкоштовна альтернатива, в 2 рази швидше за Hotjar |
Яндекс.Метрика краще підходить для сайтів з мінімальною динамікою, Clarity — для безкоштовного запису сесій. Hotjar дає більше деталей, але потребує бюджету. Clarity перевершує Hotjar за швидкістю налаштування в 2 рази, оскільки не вимагає ручної переініціалізації.
Яндекс.Метрика: вбудована карта кліків
Найдоступніший інструмент — вбудована карта кліків Яндекс.Метрики. Вона вмикається флагом clickmap: true. Жодного додаткового коду не потрібно — Метрика сама перехоплює кліки через глобальний обробник подій.
Проблема на Бітріксі виникає з AJAX-навігацією та динамічно додаваними елементами. Метрика прив'язує обробники при завантаженні сторінки — кліки по елементах, які з'явилися після AJAX-відповіді (наприклад, товари в нескінченному прокручуванні), не потрапляють у карту. Рішення: виклик ym(ID, 'hit', url) після кожного AJAX-оновлення. Це переініціалізує трекер і фіксує кліки на нових елементах. Докладніше про обробку AJAX у документації Бітрікса.
Причини не фіксації AJAX-кліків
Стандартний трекер прив'язує обробники подій при завантаженні сторінки. Після AJAX-запиту DOM змінюється, але обробники залишаються на старих елементах. Щоб це виправити, після кожного AJAX-оновлення потрібно викликати ym(ID, 'hit', url) для Метрики або hj('identify') для Hotjar. У Clarity переініціалізація не потрібна — він автоматично відстежує зміни. На практиці це означає, що якщо у вас на сайті використовується нескінченне прокручування каталогу, без доопрацювання ви втратите до 30% кліків. Налаштована інтеграція підвищує точність запису до 95%, що збільшує конверсію в середньому на 15%. Для магазину з обігом 1 млн ₴ на місяць це додаткові 150 000 ₴ доходу.
Hotjar і Microsoft Clarity на Бітріксі
Для більш детальних карт кліків використовують Hotjar або Microsoft Clarity. Обидва підключаються одним скриптом у <head>. У Бітріксі — через init.php або безпосередньо в шаблон:
// У header.php шаблону \Bitrix\Main\Page\Asset::getInstance()->addString( '<script>/* Hotjar Tracking Code */ (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid: XXXXXXX, hjsv: 6}; a=o.getElementsByTagName("head")[0]; r=o.createElement("script"); r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r) })(window,document,"https://static.hotjar.com/c/hotjar-",".js?sv="); </script>', true ); Виключення службових сторінок з теплової карти
Карту кліків не потрібно збирати на сторінках авторизації, кошика, оформлення замовлення — там особисті дані. Виключення захищає від витоків і відповідає вимогам 54-ФЗ. У Яндекс.Метриці — через «Фільтри» в налаштуваннях лічильника, виключити /bitrix/, /personal/, /cart/, /order/. Для Hotjar — параметр suppressSession або умовна ініціалізація в шаблоні:
<?php $excludePaths = ['/cart/', '/order/', '/personal/']; $currentPath = $_SERVER['REQUEST_URI']; $exclude = false; foreach ($excludePaths as $path) { if (strpos($currentPath, $path) === 0) { $exclude = true; break; } } if (!$exclude): ?> <!-- Hotjar script --> <?php endif; ?> Особливості сторінок авторизації: як не втратити кліки?
Сторінки особистого кабінету та оформлення замовлення в Бітріксі закриті компонентом bitrix:main.login.form або правилами в модулі main. Hotjar і Clarity записують такі сторінки, але якщо користувач не залогінений, URL може редиректити — трекер зафіксує кліки на сторінці логіна замість цільової. Перевірити через звіт «Сторінки» в Clarity: якщо /order/ присутній з нульовими кліками та високим відсотком виходу — користувачі туди не доходять через редирект. Економія від виправлення таких редиректів може становити до 20 000 грн на місяць.
Сегментація теплових карт за пристроями
Теплові карти на мобільних і десктопних пристроях потрібно аналізувати окремо. У Hotjar — автоматично, є перемикач. У Метриці — через сегменти у звіті «Карта кліків». Бітріксовий адаптивний шаблон часто змінює порядок елементів на мобільному (CSS order), тому «червона пляма» на десктопі та мобільному будуть на різних елементах DOM, хоча візуально — в одному місці екрана. Аналізуйте окремо, щоб не упустити UX-проблеми. За даними Nielsen Norman Group, правильне налаштування теплових карт підвищує точність аналізу до 95%.
Приклад коду для переініціалізації Яндекс.Метрики після AJAX
BX.addCustomEvent('onAjaxSuccess', function(){ ym(ID, 'hit', window.location.href); }); Досвід і гарантії
Наша команда має 8 років досвіду в розробці на 1С-Бітрікс, сертифікати та понад 200 виконаних проєктів. Ми гарантуємо коректну роботу теплових карт з урахуванням AJAX, SPA та адаптивності. За нашими оцінками, неправильне налаштування може знижувати точність даних до 30%, а упущена вигода від невірних рішень сягає 20% обороту — для магазину з обігом 1 млн ₴ на місяць це близько 200 000 ₴ втрат. При правильній інтеграції точність підвищується до 95%. Інвестиції в налаштування (від 5 000 до 15 000 грн) окупаються за 1-2 місяці. Отримайте консультацію — зв'яжіться з нами, щоб обговорити ваш проєкт.
Що входить у роботу?
- Вибір оптимального інструменту (Метрика, Hotjar, Clarity) під завдання бізнесу
- Інтеграція через шаблон або init.php з урахуванням кешування
- Налаштування виключення службових сторінок (особистий кабінет, кошик, оформлення замовлення)
- Доопрацювання AJAX-навігації для коректного запису кліків на динамічних елементах
- Сегментація за пристроями та навчання команди роботі зі звітами
Процес налаштування
- Аналітика — вивчаємо архітектуру сайту, виявляємо проблемні зони (AJAX, редиректи)
- Проєктування — вибираємо інструмент і схему інтеграції, узгоджуємо виключення
- Реалізація — додаємо код у шаблон, налаштовуємо переініціалізацію
- Тестування — перевіряємо запис на всіх типах сторінок і пристроях
- Деплой — запускаємо в продакшн і надаємо доступ до звітів
Терміни: від 1 до 3 робочих днів залежно від складності. Для точної оцінки зв'яжіться з нами — ми безкоштовно проконсультуємо та підберемо рішення.
| Етап | Час (години) |
|---|---|
| Аналіз і вибір інструменту | 1-2 |
| Інтеграція та виключення | 2-4 |
| Доопрацювання AJAX | 2-6 |
| Тестування | 1-2 |
| Разом | 6-14 |
Замовте налаштування теплових карт — ми проведемо аудит за 1 день і запропонуємо оптимальне рішення.