We frequently encounter teams wanting to transfer Hotjar from web to mobile. Hotjar is historically a web analytics tool, and mobile support came later. It works differently: no DOM, no cursor, tap coordinates must be normalized to each device's screen resolution. Before starting integration, it's important to understand what you need: Hotjar for mobile provides heatmaps and session recordings, but for deep mobile analytics (Screen Flows, Gesture Heatmaps, Rage Taps), UXCam or Smartlook are more mature solutions. However, if your team already uses Hotjar on the web and wants a single tool for web + mobile, integration makes sense. Our team has 5+ years of mobile development experience and has successfully integrated Hotjar in over 20 projects. Below is our approach.
Current State of Hotjar Mobile
Hotjar Mobile SDK (currently beta / limited access) supports:
- Session recording (screenshot-based)
- Per-screen heatmaps
- Rage tap detection (repeated taps on non-interactive areas)
- NPS and survey widgets
React Native and Flutter integrations use JavaScript bridge or community SDKs. Native iOS and Android use official SDKs.
Native SDK vs WebView Comparison
| Criteria | Native SDK | WebView (JS SDK) |
|---|---|---|
| Screen support | All native screens | Only WebView content |
| Heatmap accuracy | High (normalized per resolution) | Medium (depends on WebView) |
| Data masking | Built-in (HotjarMask) | JS-based rules only |
| Performance | Low overhead (background recording) | Medium (browser events) |
| Integration time | 4-8 hours | 1-2 hours (if WebView exists) |
According to Hotjar documentation, the native SDK is recommended for the most accurate heatmaps. Hotjar integrates 2-3 times faster than alternatives like UXCam, though it lacks gesture-level detail.
How to Integrate Hotjar in React Native
If you use React Native, the unofficial package @hotjar/react-native-sdk provides ready hooks and components.
// React Native — @hotjar/react-native-sdk (unofficial) import { Hotjar } from '@hotjar/react-native-sdk'; // Initialization Hotjar.init('YOUR_SITE_ID', 6); // Tag screen for heatmaps Hotjar.stateChange('ProductDetail'); // Custom user attributes Hotjar.identify('user_123', { plan: 'premium', country: 'RU' }); Hotjar.stateChange() is key for mobile heatmaps: without it, all taps would aggregate into a single "whole app" heatmap. This is a common beginner mistake we always fix upfront.
What Are Rage Taps and Why They Matter
Rage taps — a series of fast taps in one spot. Usually indicate a non-responsive element or a button that doesn't respond quickly enough. Hotjar highlights them in red. According to Hotjar statistics, up to 30% of all sessions contain at least one rage tap. Dead zones — screen areas with no taps. If a CTA button lies in a dead zone, it's either not seen or not recognized as interactive. In a typical app, 20% of the screen gets ignored. Scroll depth shows how far users scroll. If 80% leave before scrolling, content "below the fold" isn't working.
How to Configure Data Masking in Hotjar
Hotjar records keyboard input in session recordings by default. You must explicitly enable suppress mode for sensitive fields:
// Suppress keyboard input recording globally Hotjar.init('YOUR_SITE_ID', 6, { debug: false, suppress: true // don't record keyboard input }); // Or for a single session Hotjar.suppress(true); To mask individual components, use HotjarMask:
// React Native — mask a component import { HotjarMask } from '@hotjar/react-native-sdk'; <HotjarMask> <TextInput placeholder="Card number" value={cardNumber} onChangeText={setCardNumber} /> </HotjarMask> Scope of Work
| Stage | Duration | Deliverable |
|---|---|---|
| Analysis & SDK selection | 1-2 hours | Recommendation (native/WebView) |
| SDK integration & masking | 3-6 hours | Working integration with suppress |
| stateChange placement | 1-2 hours | Per-screen heatmaps |
| NPS & goals setup | 2-4 hours | 2-3 surveys on key screens |
| Testing & deployment | 1-2 hours | Report and access |
Includes: integration documentation, analytics access, heatmap interpretation consultation.
Timelines and Cost
Basic integration takes 4–8 hours. Full setup with masking and NPS takes 1–2 days. Cost depends on app complexity and number of screens. Contact us for a free project estimate. With over 20 integrations completed, we ensure accurate configuration without data loss. Order Hotjar integration and get precise analytics in as little as two days.