Интеграция Hotjar для тепловых карт мобильного приложения

Интеграция Hotjar для тепловых карт мобильного приложения

Hotjar исторически — инструмент для веб-аналитики. Мобильная поддержка появилась позже и работает иначе: нет DOM, нет cursor, координаты тапов нужно нормировать к разрешению экрана каждого устройства. Прежде чем начинать интеграцию, важно понять, что именно нужно: Hotjar для мобильных даёт тепловые карты и записи сессий, но для глубокой мобильной аналитики (Screen Flows, Gesture Heatmaps, Rage Taps) UXCam или Smartlook — более зрелые решения.

Тем не менее, если у команды уже есть Hotjar на вебе и задача — единый инструмент для web + mobile, интеграция имеет смысл.

Текущее состояние Hotjar Mobile

Hotjar Mobile SDK (бета / ограниченный доступ на момент 2025) поддерживает:

• Запись сессий (screenshot-based)
• Тепловые карты по экранам
• Rage tap detection (повторные тапы на неинтерактивных областях)
• NPS и survey виджеты

React Native и Flutter — через JavaScript bridge или community SDK. Нативный iOS и Android — через официальный SDK.

Альтернативный подход через Hotjar Web

Если мобильное приложение использует WebView для части контента — Hotjar JavaScript SDK работает внутри WebView как обычно:

// iOS — загрузка WebView с Hotjar
let webView = WKWebView()
let config = WKWebViewConfiguration()

// Разрешаем localStorage для Hotjar
config.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")

webView.configuration.userContentController.addUserScript(
    WKUserScript(
        source: """
            (function(h,o,t,j,a,r){
                h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
                h._hjSettings={hjid:YOUR_SITE_ID,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=');
        """,
        injectionTime: .atDocumentStart,
        forMainFrameOnly: true
    )
)

Для гибридных приложений (Ionic, Capacitor) Hotjar JS SDK подключается стандартно и работает на всех WebView-экранах.

Нативная интеграция (React Native)

// 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() — ключевой метод для мобильных тепловых карт: без него все тапы будут агрегированы в одну карту «всё приложение».

Настройка маскировки

// React Native — маскировка компонента
import { HotjarMask } from '@hotjar/react-native-sdk';

<HotjarMask>
    <TextInput
        placeholder="Card number"
        value={cardNumber}
        onChangeText={setCardNumber}
    />
</HotjarMask>

Тепловые карты: что смотреть

На мобильных тепловых картах ищем:

Rage taps — серия быстрых тапов в одном месте. Обычно это неработающий элемент или кнопка, которая не реагирует на нажатие достаточно быстро. Hotjar выделяет их красным.

Мертвые зоны — области экрана без тапов. Если CTA-кнопка в dead zone — её не видят или не понимают как интерактивный элемент.

Scroll depth — до какого места пользователи скроллят экран. Если 80% уходят с первого экрана до скролла — контент «ниже линии сгиба» не работает.

Конфигурация приватности

Hotjar по умолчанию записывает клавиатурный ввод текста в записях сессий. Нужно явно включить suppress-режим для чувствительных полей:

// Suppress keyboard input recording globally
Hotjar.init('YOUR_SITE_ID', 6, {
    debug: false,
    suppress: true  // не записывать ввод клавиатуры
});

// Или для отдельного сеанса
Hotjar.suppress(true);

Что делаем

• Определяем, нужна ли нативная SDK или WebView-интеграция
• Подключаем SDK с маскировкой чувствительных экранов
• Расставляем stateChange для разделения тепловых карт по экранам
• Конфигурируем suppress для защиты клавиатурного ввода
• Настраиваем NPS-опрос на ключевых экранах (после успешной покупки, после онбординга)

Сроки

Базовое подключение: 4–8 часов. Полная настройка с маскировкой и NPS: 1–2 дня. Стоимость рассчитывается индивидуально.