Інтеграція Hotjar для теплових карт мобільного застосунку

Інтеграція Hotjar для тепловихкарт мобільного додатку

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

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

Поточний стан Hotjar Mobile

Hotjar Mobile SDK (бета / обмежений доступ на момент 2025) підтримує:

• Запис сесій (на основі скріншотів)
• Тепловихкарти по екранах
• Виявлення rage tap (повторні тапи на неінтерактивних областях)
• NPS та widgets опитувань

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: 'UA'
});

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 дні. Вартість розраховується індивідуально.