Heatmaps, Session Recordings, and Analytics with Hotjar and PostHog

Click maps aggregate where users click across a page, including clicks on non-interactive elements (rage clicks on static text that users expect to be links, or click concentration on an image users are trying to zoom). Scroll maps show how far down a page users scroll — the fold line where 50% of users stop reading is the most important boundary in content hierarchy decisions. Move maps (cursor tracking) approximate visual attention on desktop — cursor movement correlates roughly with eye movement, making them a low-cost proxy for eye tracking. Attention maps combine scroll and click data to identify the zone of highest engagement. The most actionable heatmap insight for developers: rage clicks on an element signal that users expect interactivity where none exists — this is a direct pointer to a missing feature or a broken link.

Session recordings capture video-like replays of individual user sessions. They reveal hesitation, confusion, and unexpected navigation paths that no metric can capture. Privacy configuration is non-negotiable before enabling recordings. PostHog auto-masks input fields by default; verify this with a test recording before going live. Configuration:

1// PostHog session recording with privacy-safe configuration
2posthog.init(process.env['NEXT_PUBLIC_POSTHOG_KEY']!, {
3  api_host: process.env['NEXT_PUBLIC_POSTHOG_HOST']!,
4  session_recording: {
5    maskAllInputs: true,          // Mask ALL input fields (passwords, emails, etc.)
6    maskInputOptions: {
7      password: true,
8      email: true,
9      text: true,                 // Also mask free-text inputs
10    },
11    // Block recording on specific elements via CSS selector
12    blockClass: 'ph-no-capture', // Add class to elements you never want recorded
13    maskTextClass: 'ph-mask',    // Add class to text you want masked in recordings
14  },
15  // Only record a sample of sessions to manage storage costs
16  // 20% of sessions is sufficient for pattern detection
17  sample_rate: 0.2,
18});
19
20// Mark sensitive UI regions in your components:
21// <div className="ph-no-capture">Payment card number: {maskedCard}</div>
22// <textarea className="ph-mask" name="personalNotes" />

Always disclose session recording in your privacy policy and cookie consent. GDPR requires explicit consent before recording EU users — gate recording initialisation behind consent acceptance.

Page view tracking is table stakes. Custom events capture meaningful user actions that reveal product-specific behaviour patterns. Design your event taxonomy before implementing it — retrofitting is expensive. Structure: action_object format (e.g., 'clicked_upgrade_button', 'completed_onboarding_step', 'exported_report'). Include contextual properties on every event:

1// Structured custom event tracking
2interface TrackingEvent {
3  event: string;
4  properties: Record<string, string | number | boolean>;
5}
6
7function track(event: string, properties: Record<string, unknown> = {}): void {
8  posthog.capture(event, {
9    ...properties,
10    // Always include these context properties
11    page_path: window.location.pathname,
12    user_plan: getCurrentUserPlan(),   // 'free' | 'pro' | 'enterprise'
13    session_depth: getSessionEventCount(),
14  });
15}
16
17// Usage examples with rich context
18track('clicked_upgrade_cta', {
19  cta_location: 'feature_gate_modal',
20  feature_blocked: 'export_csv',
21  days_since_signup: getDaysSinceSignup(),
22});
23
24track('completed_onboarding_step', {
25  step_name: 'connect_integration',
26  step_index: 3,
27  time_on_step_seconds: elapsedSeconds,
28  skipped: false,
29});
30
31track('search_performed', {
32  query_length: query.length,
33  results_count: results.length,
34  // Never log the raw query — it may contain PII
35  had_results: results.length > 0,
36});

A funnel analysis chains events in sequence to measure conversion through a multi-step flow. For a checkout funnel, the steps might be: 'viewed_cart' → 'started_checkout' → 'entered_payment' → 'completed_purchase'. The drop-off rate between each step reveals where users abandon the flow. PostHog, Mixpanel, and Amplitude all provide visual funnel builders that require only your event names. Interpretation: a large drop-off between steps 1 and 2 suggests a problem with the call to action or initial friction. A drop-off between steps 3 and 4 (payment entry to completion) suggests trust issues, form errors, or payment method availability. Segment your funnel by user cohort: do new users drop off at a different step than returning users? Different drop-off patterns for different segments require different fixes. Always verify funnel logic with raw session recordings for the users who dropped off — the quantitative data tells you where; the recordings tell you why.

Behavioural data tells you where problems occur; qualitative research tells you why. The triangulation workflow: (1) Run your funnel analysis to identify the step with the highest drop-off rate. (2) Use session recordings to watch 10–15 sessions where users dropped off at that step — note the specific behaviours that precede abandonment. (3) Form a hypothesis: 'Users drop off at payment entry because they do not trust the form — they scroll up to check for security indicators before entering card details.' (4) Validate the hypothesis with 3–5 user interviews or usability tests focused on that specific step. (5) Implement the fix (add trust signals at the payment step), then re-run the funnel to measure impact. This cycle — measure, observe, hypothesise, validate, fix, measure — is the core of evidence-based product development. Neither the quantitative nor qualitative layer alone closes the loop.