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

Ми часто стикаємося з ситуацією, коли команда хоче перенести 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

Згідно з документацією 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>

Що входить в роботу

Входить: документація по інтеграції, доступ до результатів аналітики, консультація по інтерпретації теплових карт.

Терміни та вартість

Базове підключення займає 4–8 годин. Повне налаштування з маскуванням та NPS — 1–2 дні. Вартість розраховується індивідуально залежно від складності додатка та кількості екранів.

Якщо вам потрібна інтеграція Hotjar в мобільний додаток — зв'яжіться з нами для безкоштовної оцінки проекту. Досвід більш ніж 20 інтеграцій гарантує, що ви отримаєте точне налаштування без втрати даних. Замовте інтеграцію Hotjar та отримайте точну аналітику вже через два дні.

Аналітика мобільних застосунків: Firebase, Amplitude, AppsFlyer та атрибуція

Наша команда регулярно стикається з проектами, де аналітика вже «налаштована», але реальних інсайтів немає. Типовий приклад — стартап з 50k DAU: трекінг десятків подій без жодної відповіді на питання «чому користувачі не доходять до оплати». За два тижні ми побудували базову воронку і з'ясували, що 70% аудиторії відвалюється на екрані верифікації номера телефону. Після локалізації бага retention зріс на 12%. Висновок: аналітика повинна починатися з конкретних питань, а не з трекінгу всього підряд.

Чому таксономія подій — основа аналітики мобільних застосунків?

Firebase Analytics, Amplitude, Mixpanel — технічно схожі. Різниця в тому, що ви в них кладете. Типова помилка: події screen_view, button_tap_1, button_tap_2 без контексту. Через місяць ніхто не пам'ятає, що таке button_tap_2.

Правильна таксономія: об'єкт + дія + контекст. product_viewed, checkout_started, payment_completed з параметрами product_id, category, price, source. Це дозволяє будувати воронки, когортний аналіз та retention без додаткового трекінгу.

Ми фіксуємо naming convention у tracking plan — документі (Google Sheet або Amplitude Data Catalog), де описано кожну подію, її параметри та умови спрацьовування. Tracking plan синхронізується з командою аналітиків до початку розробки, а не після. Такий підхід гарантує, що через місяць дані залишаться інтерпретованими, а не перетворяться на звалище. Досвід впровадження на 50+ проектах підтверджує: при відсутності tracking plan вартість підтримки аналітики зростає у 2-3 рази за рахунок переробок.

Що обрати для аналітики мобільних застосунків: Firebase, Amplitude чи Mixpanel?

Таблиця нижче показує ключові відмінності трьох популярних платформ. Вибір залежить від бюджету, трафіку та завдань.

Firebase Analytics — безкоштовно, глибока інтеграція з Google Ads, BigQuery-експорт для сирих даних. Обмеження: затримка даних до 24 годин, обмежені воронки. Для стартапів з Google Ads трафіком — перший вибір.

Amplitude — продуктова аналітика з акцентом на когорти та шляхи користувача. Journeys (колишній Pathfinder) показує реальні шляхи між подіями — не передбачувані воронки, а фактичні маршрути. Session Replay — запис сесій для UX-аналізу. Безкоштовний тир до 10 млн events/місяць достатній для більшості продуктів на старті.

Mixpanel — ближче до Amplitude, сильніший у сегментації в реальному часі. Insights, Funnels, Retention — базові інструменти, які закривають 90% аналітичних завдань продакта.

Більш формальні визначення цих платформ можна знайти у Wikipedia (Firebase) та Wikipedia (Amplitude).

Як вирішити проблему мультиканальної атрибуції з AppsFlyer?

Знати звідки прийшов користувач — окреме завдання. Firebase Attribution працює лише всередині Google-екосистеми. Для мультиканальної атрибуції (Facebook Ads, TikTok, Apple Search Ads, programmatic) потрібен MMP — Mobile Measurement Partner.

AppsFlyer — лідер ринку. OneLink — universal deep link, який працює на iOS та Android і коректно атрибутує встановлення з будь-якого каналу. Protect360 — вбудований захист від fraud (фейкові встановлення, click injection на Android). Adjust та Branch — конкуренти з подібним функціоналом. Branch сильний у deep linking; Adjust популярний у gaming.

Згідно з Apple, з iOS 14.5 застосунки повинні отримувати дозвіл користувача через ATT перед збором IDFA для відстеження. AppsFlyer використовує probabilistic matching (IP + user agent + timing) для цих користувачів — точність нижча, але краще ніж нічого. SKAdNetwork та Privacy Preserving Attribution надають агреговані дані від Apple із затримкою 24-72 години.

Як налаштувати crash-аналітику, щоб не пропускати баги?

Firebase Crashlytics — стандарт для crash reporting. Автоматично групує креші за стектрейсом, показує affected users %, velocity alerts при зростанні crash rate більш ніж на 10% за годину.

Важливо: символікація. На iOS .dSYM файли повинні автоматично завантажуватися при кожній збірці — через Fastlane upload_symbols_to_crashlytics або Xcode Cloud built-in. Без символів креш у Crashlytics виглядає як набір адрес пам'яті. Це трапляється частіше, ніж здається при переході на новий CI — в одному проекті з аудиторією 500k користувачів ми виявили, що 40% крешів залишалися несимволізованими через пропущений етап у CI/CD. Після автоматизації час реакції на баги скоротився з 3 годин до 15 хвилин.

Для React Native та Flutter — @sentry/react-native та sentry_flutter дають додатковий контекст: breadcrumbs, мережеві запити перед крешем, стан Redux/Provider.

Нижче — порівняння популярних інструментів crash-аналітики для вибору під свої завдання.

Налаштування оточення

Три оточення з окремими Firebase проектами: dev, staging, production. Змішувати аналітику з тестових сесій і production — поширена помилка, яка спотворює всі метрики. На iOS через GoogleService-Info.plist для кожної схеми, на Android через google-services.json у папці кожного flavor.

Терміни: базова аналітика з Firebase + Crashlytics — 3-5 днів. Повноцінний tracking plan + Amplitude/Mixpanel з воронками та когортами — 2-3 тижні. Атрибуція через AppsFlyer з deep linking та fraud protection — 1-2 тижні. Вартість розраховується індивідуально залежно від складності інтеграцій.

Що входить у нашу роботу

В рамках впровадження аналітики ми надаємо:

• Розробку та узгодження tracking plan з командами продукту та маркетингу.
• Інтеграцію SDK (Firebase, Amplitude, Mixpanel, AppsFlyer) з урахуванням вашого стеку (Swift/Kotlin/Flutter/React Native).
• Налаштування воронок, когорт, дашбордів та алертів.
• Автоматизацію символікації та завантаження .dSYM через Fastlane.
• Документацію щодо подій та параметрів.
• Навчання команди роботі з аналітичною платформою.
• Два тижні пост-релізної підтримки та коригування трекінгу.

Наш досвід — 7 років впровадження аналітики та понад 80 успішних проектів у сфері мобільної розробки. Ми гарантуємо коректність даних і прозорість кожного етапу.

Зв'яжіться з нами, щоб отримати консультацію з налаштування аналітики вашого застосунку. Замовте аудит поточної аналітики — і ми покажемо, які метрики ви втрачаєте.