Настройка тепловых карт кликов на 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, хотя визуально — в одном месте экрана.