Настройка тепловых карт кликов на 1С-Битрикс
Представьте: на странице каталога 80% кликов приходятся на название товара, хотя ссылка ведёт только на кнопку «В корзину». Тепловая карта кликов показывает такое поведение — это сигнал, что вёрстка не совпадает с ожиданиями пользователей. Но чтобы карта была достоверной, её нужно правильно настроить под 1С-Битрикс. По нашей статистике, 90% проблем с тепловыми картами на этой CMS вызваны AJAX-контентом и динамической подгрузкой. Исправление этого даёт точные данные уже на следующий день. В этой статье разберём, как настроить инструменты (Яндекс.Метрика, Hotjar, Clarity) без потери данных. Для быстрого старта свяжитесь с нами — мы поможем с выбором и интеграцией.
Выбор инструмента для тепловых карт
| Инструмент | Стоимость | Особенности на Битриксе | Рекомендация |
|---|---|---|---|
| Яндекс.Метрика (карта кликов) | Бесплатно | Требует переинициализации при AJAX | Для простых сайтов без SPA |
| Hotjar | От $39/мес | Полные сеансы, маскировка полей, сегментация | Для детального анализа UX |
| Microsoft Clarity | Бесплатно | Автоматически записывает клики, маскировка полей | Лучшая бесплатная альтернатива |
Яндекс.Метрика лучше подходит для сайтов с минимальной динамикой, Clarity — для бесплатной записи сессий. Hotjar даёт больше деталей, но требует бюджета.
Яндекс.Метрика: встроенная карта кликов
Самый доступный инструмент — встроенная карта кликов Яндекс.Метрики. Она включается флагом clickmap: true. Никакого дополнительного кода не нужно — Метрика сама перехватывает клики через глобальный обработчик событий.
Проблема на Битриксе возникает с AJAX-навигацией и динамически добавляемыми элементами. Метрика привязывает обработчики при загрузке страницы — клики по элементам, которые появились после AJAX-ответа (например, товары в бесконечной прокрутке), не попадают в карту. Решение: вызов ym(ID, 'hit', url) после каждого AJAX-обновления. Это переинициализирует трекер и фиксирует клики на новых элементах. Подробнее об обработке AJAX в Битриксе.
Почему AJAX-клики не фиксируются в стандартной карте?
Стандартный трекер привязывает обработчики событий при загрузке страницы. После AJAX-запроса DOM изменяется, но обработчики остаются на старых элементах. Чтобы это исправить, после каждого AJAX-обновления нужно вызывать ym(ID, 'hit', url) для Метрики или hj('identify') для Hotjar. В Clarity переинициализация не требуется — он автоматически отслеживает изменения. На практике это означает, что если у вас на сайте используется бесконечная прокрутка каталога, без доработки вы потеряете до 30% кликов. Настроенная интеграция повышает точность записи до 95%.
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/ присутствует с нулевыми кликами и высоким процентом выхода — пользователи туда не доходят из-за редиректа.
Как сегментировать тепловые карты по устройствам?
Тепловые карты на мобильных и десктопных устройствах должны анализироваться отдельно. В Hotjar — автоматически, есть переключатель. В Метрике — через сегменты в отчёте «Карта кликов». Битриксовый адаптивный шаблон часто меняет порядок элементов на мобильном (CSS order), поэтому «красное пятно» на десктопе и мобильном будут на разных элементах DOM, хотя визуально — в одном месте экрана. Анализируйте отдельно, чтобы не упустить UX-проблемы.
Пример кода для переинициализации Яндекс.Метрики после AJAX
BX.addCustomEvent('onAjaxSuccess', function(){ ym(ID, 'hit', window.location.href); }); Опыт и гарантии
Наша команда имеет 8 лет опыта в разработке на 1С-Битрикс, сертификаты и более 200 выполненных проектов. Мы гарантируем корректную работу тепловых карт с учётом AJAX, SPA и адаптивности. По нашим оценкам, неправильная настройка может снижать точность данных до 30%, а упущенная выгода от неверных решений достигает 20% оборота — для магазина с оборотом $9k–13k в месяц это около $1.8k–2.6k потерь. При правильной интеграции точность повышается до 95%. Инвестиции в настройку окупаются за 1-2 месяца. Получите консультацию — свяжитесь с нами, чтобы обсудить ваш проект.
Что входит в работу?
- Выбор оптимального инструмента (Метрика, Hotjar, Clarity) под задачи бизнеса
- Интеграция через шаблон или init.php с учётом кэширования
- Настройка исключения служебных страниц (личный кабинет, корзина, оформление заказа)
- Доработка AJAX-навигации для корректной записи кликов на динамических элементах
- Сегментация по устройствам и обучение команды работе с отчётами
Процесс настройки
- Аналитика — изучаем архитектуру сайта, выявляем проблемные зоны (AJAX, редиректы)
- Проектирование — выбираем инструмент и схему интеграции, согласовываем исключения
- Реализация — добавляем код в шаблон, настраиваем переинициализацию
- Тестирование — проверяем запись на всех типах страниц и устройствах
- Деплой — запускаем в продакшн и предоставляем доступ к отчётам
Сроки: от 1 до 3 рабочих дней в зависимости от сложности. Для точной оценки свяжитесь с нами — мы бесплатно проконсультируем и подберём решение.
| Этап | Время (часы) |
|---|---|
| Анализ и выбор инструмента | 1-2 |
| Интеграция и исключения | 2-4 |
| Доработка AJAX | 2-6 |
| Тестирование | 1-2 |
| Итого | 6-14 |
Закажите настройку тепловых карт — мы проведём аудит за 1 день и предложим оптимальное решение.