Hotjar Pocket Book

Posted on by uplatzblog

Hotjar Pocket Book — Uplatz

50 Expanded Cards • Heatmaps • Recordings • Surveys • Funnels • Forms • Feedback • Integrations • Interview Q&A

1) What is Hotjar?

Hotjar is a behavior analytics & user feedback suite: visualize interactions (heatmaps), watch sessions (recordings), collect feedback (widgets & surveys), and diagnose UX issues.

Use cases: find friction, validate design hypotheses, prioritize UX fixes, inform CRO.

2) Installation Basics

Add the Hotjar tracking code to your site (or deploy via GTM). Verify install on key templates.

<!-- Hotjar Tracking Code -->
<script>(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:YOUR_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=');</script>

3) Single Page App (SPA) Setup

Trigger manual state changes on route updates so Hotjar maps screens correctly.

// After router navigation complete:
window.hj && window.hj('stateChange', window.location.pathname);

4) Privacy, Consent & Masking

Respect GDPR/CCPA: mask form fields & sensitive content; fire only after consent.

// With a Consent Manager:
if (hasConsent('analytics')) loadHotjar(); else blockHotjar();

5) Heatmaps — Types

Click, Move, and Scroll heatmaps reveal engagement depth and dead zones. Create heatmaps per URL pattern (e.g., product pages).

Pattern: https://site.com/product/* → Segment by device (Desktop/Tablet/Mobile)

6) Recordings — Filters

Watch real user journeys. Filter by device, UTM, country, landing page, frustration (rage/ujump), console errors.

Filter: Device=Mobile AND Landing=/pricing AND Referrer=Google Ads → Watch top drop-offs

7) Feedback Widgets

Embed a lightweight “How was this page?” widget. Place on key pages (pricing, signup, docs).

Question examples: "Was anything confusing?" | "What stopped you from signing up?"

8) Surveys (On-site & Link)

Collect voice-of-customer. Trigger on exit intent, after purchase, or time-on-page. Use branching logic.

Flow: "What brought you here?" → If "Compare plans" → Ask "Which features matter most?"

9) Funnels

Define steps (Landing → Product → Cart → Payment → Thank you). Identify biggest drop-off and watch recordings for that step.

Insight: 42% drop Cart→Payment (Mobile) → Hypothesis: payment form too long.

10) Forms

Track form completion, abandon, error fields, and time per field. Prioritize fixes where most users drop.

Example: "Phone (optional)" consumes 18s avg & 35% errors → make optional truly optional.

11) Rage Clicks

Multiple rapid clicks on the same element → frustration. Fix broken affordances, disabled CTAs without feedback.

Pattern: Rage on "Apply coupon" icon → Add hover tooltip + active state + error toasts.

12) U-turns (Back & Forth)

Users quickly return to the previous page. Indicates mismatched expectations or poor IA.

Example: Pricing → FAQ → Pricing (loop) → Add in-page FAQ anchors on Pricing.

13) Dead Clicks

Clicks on non-interactive elements (decorative icons, headings). Make them clickable or reduce click affordance.

Fix: Wrap feature headings in anchor tags to full details modal.

14) Scroll Depth & Fold Analysis

See where users stop scrolling. Keep core value prop & primary CTA above the fold (75–80% visibility).

Change: Move testimonials above fold; add sticky CTA on mobile.

15) Console Errors in Recordings

Filter recordings by JS errors to find broken flows invisible to GA.

Error: "Cannot read property 'submit' of undefined" → Form not mounted on SPA route.

16) Device & Country Segments

Segment by device & locale. Mobile UX is usually the biggest conversion lever.

Filter: Country=FR → Cookie banner overlaps CTA → adjust z-index & translation length.

17) Source/Medium Filters

Analyze paid vs organic sessions; tailor landing page messaging per channel intent.

UTM=facebook_cold → Add primer section: "What we do in 3 bullets".

18) Feature Discovery Gaps

Recordings show users missing critical controls (e.g., filters, sorting). Add highlights and microcopy.

UX: Pulse the "Filter" chip when results > 50; label "Sort by price".

19) IA & Navigation

Heatmaps reveal nav items never used; consolidate and rename to user language.

"Resources" → "Help Center"; merge duplicated entries into one mega-menu.

20) Trust & Social Proof

Surveys surface “too expensive / unsure it works” → add guarantees, case studies, and “As seen in” logos near CTA.

Prompt (survey): "What almost stopped you from signing up?" (open text)

21) NPS Surveys

Run NPS quarterly; segment by plan & persona. Follow up detractors for root cause.

NPS = %Promoters (9–10) − %Detractors (0–6)
Follow-up: "What’s the one thing we could do to improve?"

22) CSAT & CES

CSAT after support, CES after onboarding tasks. Add free-text for actionable insights.

CES Q: "How easy was it to complete X?" (1=Very hard … 7=Very easy)

23) Exit-Intent Surveys

Trigger when mouse leaves viewport or after 60–90s inactivity. Ask what’s missing.

Q: "What stopped you today?" Options: Price | Missing Feature | Not ready | Other

24) Post-Purchase Surveys

Ask new customers “What nearly stopped you?” and “Where did you first hear about us?” to calibrate messaging & attribution.

Q1: Motivation | Q2: Channel (free text) | Q3: Feature expectations

25) Feature Validation Polls

Place on dashboard for selected users. Validate desirability before building.

Prompt: "Would you use bulk import? How often? What must it do?"

26) In-Product Onboarding Polls

Ask new users what they’re trying to achieve and tailor checklists accordingly.

Options: "Explore" | "Migrate data" | "Collaborate" → Show different tour steps

27) Churn/Cancel Surveys

Capture reasons at cancel moment; connect to recordings to witness last-mile friction.

Reasons: Too pricey | Missing feature | Bugs | Switching | No value

28) Recruiting for Research

Add a “Join research” checkbox to feedback widget; collect contact & permission.

Copy: "Help us improve — 20-min call? Gift card included."

29) Tagging Themes

Tag survey responses (Pricing, UX bug, Missing feat). Use counts to prioritize roadmap.

Weekly report: Top 3 themes + representative quotes + proposed actions

30) Feedback → Ticket Workflow

Pipe urgent feedback to Slack/Jira with context (URL, device, screenshot). Close loop with the user after fix.

Rule: If "Bug" & severity=High → Create Jira + post to #ux-incidents

31) Google Tag Manager (GTM)

Deploy Hotjar via GTM; set trigger “All Pages” or consented pages only.

GTM: Tag (Custom HTML) → Hotjar snippet; Trigger → All Pages (Consent=Yes)

32) GA4 + Hotjar

Use GA4 for quant, Hotjar for qual. Investigate GA4 anomalies with Hotjar filters.

GA4: Spike in bounce on /pricing → Hotjar: Recordings (Device=Mobile) show sticky chat blocking CTA.

33) Identify Users (Caution)

Avoid sending PII. Use hashed IDs. Never send emails or names unless policy allows and properly consented.

// Example: window.hj('identify', 'user-123-hash', { plan: 'pro', role: 'admin' })

34) Custom Events & Tags

Tag sessions when key events happen (e.g., “coupon_error”). Filter recordings later.

window.hj && hj('event', 'coupon_error'); // then filter by tag in Recordings

35) Sampling & Capture Rate

Control how many sessions are recorded. Increase during experiments, lower afterward to save quota.

Strategy: 100% for 1–2 days post-release → revert to 10–20% baseline.

36) Performance Considerations

Hotjar is lightweight, but avoid stacking multiple analytics. Defer loading until after LCP where possible.

Tip: Load after critical CSS/JS; ensure no duplicate tags on SPA transitions.

37) Data Retention & Access

Set retention windows; restrict access by role; mask fields by default; audit exports.

Policy: Only UX/CX team can view recordings; exports require ticket + approval.

38) Linking to Tickets & Specs

Attach Hotjar links (recording + timestamp) to Jira/Notion. Keep evidence trail.

Template: Problem → Evidence (URL + time) → Hypothesis → Fix → Result

39) Hypothesis → Experiment

Convert insights into testable hypotheses; run A/B tests in your optimizer (Optimizely, GA4 Experiments, VWO), measure impact, then re-check Hotjar.

H: "Shorter form increases signups 10% on mobile"

40) Prioritization Frameworks

Use ICE/RICE to pick highest leverage fixes. Combine Hotjar qualitative with GA quantitative lift.

RICE = Reach × Impact × Confidence ÷ Effort → Sort backlog weekly

41) Launch Playbook (New Feature)

Pre: create heatmap & form tracking; Post: watch errors & rage clicks; Survey: “Is this what you expected?”

Checklist: Heatmap | Recordings | Survey | Tag events | Report after 72h

42) Pricing Page Playbook

Goals: understand hesitation. Add exit survey; analyze scroll map; test simplified tables; add FAQs near CTA.

Survey Q: "What’s unclear about our pricing?" (open text)

43) Checkout Playbook

Track field errors, recordings with console errors, and payment failures. Add progress indicator and trust seals.

Fix: Show accepted cards + PayPal + Apple/Google Pay on mobile.

44) Onboarding Playbook (SaaS)

Survey intent on first login; watch first-session recordings; add checklist; nudge with tooltips.

Survey: "What are you here to do first?" → personalize empty state.

45) Content/Blog Playbook

Scroll maps show where readers drop. Add TL;DR, jump links, inline CTAs after key insights.

Metric: % readers reaching CTA block; aim > 55%.

46) Accessibility Checks via Recordings

Spot keyboard-only navigation issues, small targets, poor contrast. Add skip links and enlarge tap targets.

Note: Focus outlines visible? Keyboard trap in modal? Fix before launch.

47) B2B Lead Gen Playbook

Form analytics to reduce required fields; exit survey on form page; route hot feedback to SDR Slack.

Rule: If "I just want pricing" → auto-send pricing PDF + book demo link.

48) E-commerce PDP Playbook

Heatmap: image vs details clicks; add size guides near add-to-cart; recordings show zoom interactions.

Experiment: "Sticky add-to-cart" on mobile; observe scroll depth change.

49) Interview Q&A — 10 Essentials

Q1: When to use heatmaps vs recordings? A: Heatmaps for patterns; recordings for causes.

Q2: What’s a rage click? A: Rapid repeated clicks on an element; fix affordance.

Q3: How to handle PII? A: Mask by default; never send emails; consent first.

Q4: SPA considerations? A: Use hj('stateChange') on route changes.

Q5: Best sample rate? A: 10–20% baseline; 100% post-release briefly.

Q6: Survey timing? A: Exit intent or 60–90s on page; post-transaction for CSAT.

Q7: GA4 + Hotjar together? A: Quantify in GA4, diagnose with Hotjar.

Q8: Prioritization? A: RICE/ICE + user quotes + impact on conversion.

Q9: Mobile pitfalls? A: Sticky overlays; small CTAs; long forms.

Q10: Ethical usage? A: Inform users, respect consent, minimize data.

50) Interview Q&A — 10 Advanced

Q11: Triaging 500+ recordings? A: Filter by errors, rage clicks, drop-off URL, device.

Q12: “High scroll, low clicks” on pricing? A: Add in-page FAQ, table simplification, secondary CTA.

Q13: Proof a UX fix worked? A: Before/after funnel rates + Hotjar heuristics + GA4 conversion lift.

Q14: Prevent bias in surveys? A: Neutral wording, randomization, open text follow-ups.

Q15: Handling SPA misattribution? A: Fire stateChange and ensure unique page names.

Q16: When not to record? A: Auth pages with PII; or record masked + with consent.

Q17: Using tags strategically? A: Tag key errors/events (coupon_fail, 3DS_error) to find root cause fast.

Q18: Quantifying qualitative? A: Theme tagging + weekly counts + attach revenue impact from GA4.

Q19: Localization issues? A: Longer strings break layouts; recordings by locale reveal overlap.

Q20: Scaling governance? A: DRI per area, evidence templates, retention policy, review rituals.

Evidence Template:
Problem → HB/Rec URL → Timestamp → Hypothesis → Fix → Metric → Result