Настройка тепловых карт кликів на 1С-Бітрікс
Теплова карта показує не те, куди кликають, а те, де користувачі очікують інтерактивності — там, де її немає. Типова картина на бітриксовому магазині: червоне плямо на назві товара в каталозі, хоча назва не посилання, а посилання — кнопка «У кошик» рядом. Це означає, що вёрстка суперечить користувацькому наміру. Теплова карта це фіксує, але лише якщо вона правильно настроєна.
Яндекс.Метрика: вбудована карта кликів
Найдоступніший інструмент — вбудована карта кликів Яндекс.Метрики. Вона включається у настройках лічильника флагом clickmap: true. Ніякого додаткового коду не потрібна — Метрика сама перехоплює клики через глобальний обробник подій.
Проблема на Бітриксі виникає з AJAX-навігацією та динамічно добавляємими елементами. Метрика прив'язує обробники при завантаженні сторінки — клики за елементами, які з'явилися після AJAX-ответа (наприклад, товари в нескінченній прокрутці), не попадають у карту. Рішення аналогічно Вебвізору: виклик ym(ID, 'hit', url) після кожного AJAX-оновлення переінітіалізує трекер.
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
);
Виключення служебних сторінок з запису
Карту кликів не потрібна збирати на сторінках авторизації, кошика, оформлення замовлення — там особисті дані, а інструменти типу Clarity можуть маскувати поля, але не завжди правильно. Розумніше виключити URL явно.
У Яндекс.Метриці — через «Фільтри» у настройках лічильника, виключити /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/ присутня з нульовими кліками та високим відсотком виходу — користувачі туди не доходять через редирект.
Сегментація за пристроями
Теплові карти на мобільних та десктопних пристроях мають аналізуватися окремо. У Hotjar — автоматично, є перемикач. У Метриці — через сегменти у звіті «Карта кликів». Бітриксовий адаптивний шаблон часто змінює порядок елементів на мобільному (CSS order), тому «червоне плямо» на десктопі та мобільному будуть на різних елементах DOM, хоча візуально — у одному місці екрана.