Hotjar Heatmaps Integration for Mobile App

Hotjar Heatmaps Integration for Mobile Apps

Hotjar was historically a web analytics tool. Mobile support came later and works differently: no DOM, no cursor, tap coordinates need to be normalized to each device's screen resolution. Before starting integration, understand what you actually 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 web and the goal is a unified tool for web + mobile, integration makes sense.

Current State of Hotjar Mobile

Hotjar Mobile SDK (beta / limited access as of 2025) supports:

• Session recording (screenshot-based)
• Heatmaps by screen
• Rage tap detection (repeated taps on non-interactive areas)
• NPS and survey widgets

React Native and Flutter work through JavaScript bridge or community SDK. Native iOS and Android work through official SDK.

Alternative Approach via Hotjar Web

If your mobile app uses WebView for part of the content—Hotjar JavaScript SDK works inside WebView normally:

// iOS – load WebView with Hotjar
let webView = WKWebView()
let config = WKWebViewConfiguration()

// Allow localStorage for 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
    )
)

For hybrid apps (Ionic, Capacitor) Hotjar JS SDK connects standardly and works on all WebView screens.

Native Integration (React Native)

// React Native – @hotjar/react-native-sdk (unofficial)
import { Hotjar } from '@hotjar/react-native-sdk';

// Initialization
Hotjar.init('YOUR_SITE_ID', 6);

// Screen tag for heatmaps
Hotjar.stateChange('ProductDetail');

// User attributes
Hotjar.identify('user_123', {
    plan: 'premium',
    country: 'US'
});

Hotjar.stateChange() is key for mobile heatmaps: without it all taps are aggregated into one "entire app" heatmap.

Masking Configuration

// React Native – mask component
import { HotjarMask } from '@hotjar/react-native-sdk';

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

Heatmaps: What to Look For

On mobile heatmaps look for:

Rage taps — series of quick taps in one spot. Usually a broken element or button that doesn't respond fast enough. Hotjar highlights them red.

Dead zones — screen areas with no taps. If CTA button is in dead zone—users don't see it or don't understand it's interactive.

Scroll depth — how far users scroll the screen. If 80% leave before scrolling—content below the fold doesn't work.

Privacy Configuration

Hotjar records keyboard input by default in session recordings. 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 individual session
Hotjar.suppress(true);

What We Do

• Determine if native SDK or WebView integration is needed
• Connect SDK with masking of sensitive screens
• Set stateChange to separate heatmaps by screen
• Configure suppress for keyboard input protection
• Set up NPS survey on key screens (after successful purchase, after onboarding)

Timeline

Basic setup: 4–8 hours. Full configuration with masking and NPS: 1–2 days. Cost calculated individually.