Мы часто сталкиваемся с ситуацией, когда команда хочет перенести Hotjar с веба на мобайл. Hotjar исторически — инструмент для веб-аналитики, и мобильная поддержка появилась позже. Она работает иначе: нет DOM, нет курсора, координаты тапов нужно нормировать к разрешению экрана каждого устройства. Прежде чем начинать интеграцию, важно понять, что именно нужно: Hotjar для мобильных даёт тепловые карты и записи сессий, но для глубокой мобильной аналитики (Screen Flows, Gesture Heatmaps, Rage Taps) UXCam или Smartlook — более зрелые решения. Тем не менее, если у команды уже есть Hotjar на вебе и задача — единый инструмент для web + mobile, интеграция имеет смысл. Наша команда имеет 5+ лет опыта в мобильной разработке и успешно интегрировала Hotjar в более чем 20 проектах. Ниже — как мы это делаем.
Текущее состояние Hotjar Mobile
Hotjar Mobile SDK (бета / ограниченный доступ на текущий момент) поддерживает:
- Запись сессий (screenshot-based)
- Тепловые карты по экранам
- Rage tap detection (повторные тапы на неинтерактивных областях)
- NPS и survey виджеты
React Native и Flutter — через JavaScript bridge или community SDK. Нативный iOS и Android — через официальный SDK.
Сравнение: нативная SDK vs WebView
| Критерий | Нативная SDK | WebView (JS SDK) |
|---|---|---|
| Поддержка экранов | Все нативные экраны | Только WebView-контент |
| Точность тепловых карт | Высокая (нормировка под разрешение) | Средняя (зависит от WebView) |
| Маскировка данных | Встроенная (HotjarMask) | Только через JS-правила |
| Производительность | Низкая нагрузка (фоновая запись) | Средняя (события браузера) |
| Время интеграции | 4-8 часов | 1-2 часа (если WebView уже есть) |
Согласно документации Hotjar, нативная SDK рекомендована для максимально точных тепловых карт. Hotjar интегрируется в 2-3 раза быстрее аналогов, таких как UXCam, хотя и уступает в детализации жестов.
Как интегрировать Hotjar в React Native?
Если вы используете React Native, для интеграции Hotjar применяется неофициальный пакет @hotjar/react-native-sdk. Он предоставляет готовые хуки и компоненты.
// React Native — @hotjar/react-native-sdk (unofficial) import { Hotjar } from '@hotjar/react-native-sdk'; // Инициализация Hotjar.init('YOUR_SITE_ID', 6); // Тег экрана для тепловых карт Hotjar.stateChange('ProductDetail'); // Пользовательские атрибуты Hotjar.identify('user_123', { plan: 'premium', country: 'RU' }); Hotjar.stateChange() — ключевой метод для мобильных тепловых карт: без него все тапы будут агрегированы в одну карту «всё приложение». Это частая ошибка новичков, которую мы всегда исправляем на старте.
Что такое rage tap и почему он важен?
Rage taps — серия быстрых тапов в одном месте. Обычно это неработающий элемент или кнопка, которая не реагирует на нажатие достаточно быстро. Hotjar выделяет их красным. По статистике Hotjar, до 30% всех сессий содержат хотя бы один rage tap. Мертвые зоны — области экрана без тапов. Если CTA-кнопка в dead zone — её не видят или не понимают как интерактивный элемент. В типичном приложении 20% экрана остаётся без внимания. Scroll depth показывает, до какого места пользователи скроллят экран. Если 80% уходят с первого экрана до скролла — контент «ниже линии сгиба» не работает.
Как настроить маскировку данных в Hotjar?
Hotjar по умолчанию записывает клавиатурный ввод текста в записях сессий. Нужно явно включить suppress-режим для чувствительных полей:
// Suppress keyboard input recording globally Hotjar.init('YOUR_SITE_ID', 6, { debug: false, suppress: true // не записывать ввод клавиатуры }); // Или для отдельного сеанса Hotjar.suppress(true); Для маскировки отдельных компонентов используйте HotjarMask:
// React Native — маскировка компонента import { HotjarMask } from '@hotjar/react-native-sdk'; <HotjarMask> <TextInput placeholder="Card number" value={cardNumber} onChangeText={setCardNumber} /> </HotjarMask> Что входит в работу
| Этап | Длительность | Результат |
|---|---|---|
| Анализ и выбор SDK | 1-2 часа | Рекомендация (нативная/WebView) |
| Подключение SDK и маскировка | 3-6 часов | Рабочая интеграция с suppress |
| Расстановка stateChange | 1-2 часа | Тепловые карты по экранам |
| Настройка NPS и целей | 2-4 часа | 2-3 опроса на ключевых экранах |
| Тестирование и деплой | 1-2 часа | Отчёт и доступы |
Входит: документация по интеграции, доступ к результатам аналитики, консультация по интерпретации тепловых карт.
Сроки и стоимость
Базовое подключение занимает 4–8 часов. Полная настройка с маскировкой и NPS — 1–2 дня. Стоимость рассчитывается индивидуально в зависимости от сложности приложения и количества экранов.
Если вам нужна интеграция Hotjar в мобильное приложение — свяжитесь с нами для бесплатной оценки проекта. Опыт более 20 интеграций гарантирует, что вы получите точную настройку без потери данных. Закажите интеграцию Hotjar и получите точную аналитику уже через два дня.