Ми часто стикаємося з ситуацією, коли команда хоче перенести 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: 'UA' }); 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 та отримайте точну аналітику вже через два дні.