Heatmap cho web: 4 loại click/scroll/move/attention, tool và quy trình setup 1 tuần

Heatmap cho web visualize hành vi user qua 4 loại chính: click map (nơi user click), scroll map (% reach từng vùng page), mouse move map (nơi mouse hover lâu), attention/eye-tracking map (nơi mắt nhìn thật). Tool phổ biến 2026 là Microsoft Clarity miễn phí unlimited traffic và Hotjar 39 USD/tháng với feature đa dạng hơn.

Bài này hướng dẫn quy trình setup 1 tuần, cách phân tích từng loại heatmap, kết hợp với session recording và analytics, GDPR compliance, 5 trap dễ mắc khi đọc data.

4 loại heatmap và use case

Heatmap không chỉ có 1 dạng. 4 loại cover góc khác của user behavior — combine để hiểu đầy đủ.

Thiếu 1 loại có thể miss insight quan trọng dẫn tới quyết định sai về UX.

Bảng so sánh 4 loại heatmap

Khi nào dùng loại nào

• Click map cho mọi page có CTA: landing, product detail, pricing — bất kỳ page nào có button quan trọng đều nên dùng click map làm baseline.
• Scroll map cho long-form content: blog post, FAQ, terms of service — đo độ depth user thực sự đọc tới đâu.
• Move map cho desktop heavy site: SaaS dashboard, e-commerce desktop — mouse hover proxy cho attention khi không có eye-tracking hardware.
• Attention map chỉ trong UX lab: cần Tobii eye-tracker hardware 5.000-15.000 USD, sample 15-20 user trong môi trường kiểm soát — không khả thi cho production traffic thường.

Setup heatmap với Microsoft Clarity

2 tool phổ biến nhất 2026 là Microsoft Clarity (miễn phí, unlimited traffic) và Hotjar (39 USD/tháng sau free tier 1.050 session). Cho 95% shop VN, Clarity đủ và miễn phí — recommend làm default.

Quy trình install Clarity 5 bước

1. Đăng ký tài khoản tại clarity.microsoft.com bằng Microsoft account — miễn phí, không cần credit card.
2. Add project mới với domain website, Clarity sinh ra tracking script unique chứa project ID.
3. Paste tracking script vào WordPress theme qua Appearance, Theme File Editor, header.php trước thẻ </head>. Hoặc dùng plugin “Insert Headers and Footers” để tránh edit theme.
4. Verify install: vào Clarity dashboard, hiển thị “Receiving data” sau 1-2 giờ kể từ lúc paste script — confirm tracking đã active.
5. Wait 24-48 giờ để có data đủ render heatmap đầu tiên. Best practice wait 1 tuần để cover full weekly cycle có cả weekday và weekend pattern.

Tracking script Microsoft Clarity

<!-- Microsoft Clarity tracking script -->
<!-- Paste vào header.php trước </head> -->

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
</script>

# Hoặc dùng plugin "Insert Headers and Footers" (miễn phí)
# Settings → Insert Headers and Footers
# Paste script vào ô "Scripts in Header"
# Save — script auto inject mọi page WordPress

Hotjar vs Clarity — chọn cái nào

Clarity miễn phí unlimited traffic do Microsoft sponsor — không có giới hạn session, không có ad. Hotjar có UI/UX nhỉnh hơn nhưng giới hạn free tier 1.050 session/tháng, gói paid bắt đầu 39 USD/tháng.

• Chọn Clarity nếu: shop SME VN, traffic dưới 100.000 visitor/tháng, ngân sách hạn chế, cần tool ổn định dài hạn miễn phí.
• Chọn Hotjar nếu: cần survey và poll built-in, phễu analytics riêng, feature flag integrate, team UX research dedicated có budget 50-200 USD/tháng cho tool.
• Dùng cả 2: Clarity làm primary data layer, Hotjar add-on cho survey và NPS — pattern phổ biến cho mid-size có ngân sách.

Phân tích click heatmap — 5 insight chính

Click heatmap show pattern: nơi đỏ là nhiều click, nơi xanh là ít hoặc không click. Insight chính là CTA có nhận click expected không, element nào bị mistaken click vì user nghĩ là button mà thực ra không phải.

Insight 1 — CTA primary có dominant click

CTA chính phải đỏ rực trong click map. Nếu chỉ orange hoặc yellow nghĩa là CTA không stand out đủ so với element xung quanh.

Fix: tăng contrast màu, làm size lớn hơn 20-30%, đặt vị trí đầu màn hình.

Insight 2 — Mistaken click trên element không clickable

User click vào image hoặc text họ nghĩ là button nhưng thực ra không có link. Pattern thường xuất hiện ở card layout hoặc hero image.

Fix: thêm cursor: pointer và làm clickable thật, hoặc remove visual misleading như shadow giả button.

Insight 3 — Logo click rate đo intent navigate

Hơn 5% session click logo nghĩa là user expect navigate về home. Đảm bảo logo có link href=”/” trên mọi page.

Nếu logo không có link, user frustrated và bounce rate sẽ tăng 10-15%.

Insight 4 — Filter và sort không được dùng

Setting filter trong shop có click rate dưới 1% nghĩa là user không discover được tính năng. Fix: highlight filter với badge “Mới”, add tooltip hint, hoặc simplify UI để filter visible mặc định không cần click expand.

Insight 5 — Footer link bị ignore hoàn toàn

Footer link dưới 0,1% click rate nghĩa là user không scroll tới đó. Move link quan trọng như Privacy Policy hoặc Contact lên header sticky hoặc trang riêng accessible từ menu chính.

Phân tích scroll heatmap — benchmark scroll depth

Scroll map show % user reach từng vùng page. Pattern phổ biến: 100% trên fold, giảm dần theo scroll.

Critical content phải nằm above 60% scroll line — ngưỡng đa số user thực sự reach.

Benchmark scroll depth shop e-commerce

# Scroll depth benchmark cho shop e-commerce VN

100% line (top page):                100% user (visible no scroll)
─────────────────────────────────────────────────────────
Above the fold (~600-800px):         100% user reach
─────────────────────────────────────────────────────────
First fold (1 viewport ~900px):      ~95% user reach
─────────────────────────────────────────────────────────
50% page scroll:                     ~70% user reach
─────────────────────────────────────────────────────────
75% page scroll:                     ~50% user reach
─────────────────────────────────────────────────────────
Bottom of page (100%):               ~30-40% user reach

# Action item dựa scroll pattern:
# - Critical CTA + value prop → above 50% line
# - Secondary content (đánh giá khách, FAQ) → 50-75% line
# - Footer + link phụ → 75% line (chỉ 30% user thấy)
# - Page dài hơn 3 viewport → split thành page con

# Drop-off point analysis:
# Scroll drop từ 80% xuống 30% trong 1 section ngắn
# → đó là "wall" — user lost interest tại đó
# → Investigate content gì làm họ leave

Action item theo pattern scroll

• Critical content above 50% line: CTA chính, value proposition, bằng chứng từ khách thật phải nằm trên 50% scroll line để 70%+ user thấy.
• Secondary content 50-75% line: đánh giá khách, FAQ, related product — 50% user reach tới đây.
• Footer dưới 75% line: chỉ 30-40% user reach — không đặt link quan trọng (Privacy Policy nên ở header).
• Long page hơn 3 viewport: split thành page con hoặc dùng anchor link table of contents để user jump section nhanh.

Session recording — gold standard hơn heatmap

Heatmap aggregate data, không show user cá nhân làm gì. Session recording show video session user từ đầu đến cuối — see exact behavior.

Combine với heatmap để hiểu individual journey behind aggregate pattern.

Quy trình analyze session recording

1. Filter session theo phân khúc: high-value (order trên 1 triệu), giỏ hàng bỏ dở, error page bounce, mobile vs desktop.
2. Watch 10-20 random session per phân khúc, không cherry-pick session “đẹp” — pattern thực ra từ random sample.
3. Note 3 pattern frustration thường gặp: rage click (click nhanh 5+ lần ở 1 chỗ vì frustration), back button hammer (user lost không biết đi đâu), dead click (click không produce response).
4. Document trong “user behavior nhận định” doc Notion với screenshot và timestamp cụ thể.
5. Cross-reference với heatmap aggregate để verify pattern là general, không phải edge case 1-2 user.

Privacy mask cho session recording

Session recording capture nội dung form input — risk leak dữ liệu nhạy cảm như credit card, password, số CMND. Clarity và Hotjar đều có built-in PII masking tự động.

• Auto-mask form input: mặc định mask mọi input type password và type với attribute autocomplete chứa cc-number, email-sensitive.
• Custom mask CSS selector: add class data-clarity-mask hoặc data-hj-suppress lên element cần mask thủ công như field địa chỉ chi tiết.
• Update privacy policy: ghi rõ “chúng tôi dùng heatmap analytics” và cookie consent banner cho EU traffic theo GDPR.

Kết hợp heatmap với analytics và A/B test

Heatmap show WHAT user làm nhưng không show WHY. Combine với 3 nguồn data khác để có picture đầy đủ — analytics định lượng, interview định tính, A/B test validate hypothesis.

Heatmap + Google Analytics 4

GA4 show phễu conversion rate, nhưng không show user click đâu ngoài button track. Heatmap fill gap — vd GA4 nói “checkout bỏ ở step 2 với rate 38%”, heatmap show user click vào terms link tại step 2 thay vì button next.

Heatmap + customer interview

Heatmap show rage click ở phần “Promo code” trong checkout. Interview hỏi 5 user gặp tình huống tương tự để discover họ không biết code lấy ở đâu.

Action: add link “Xem mã giảm giá đang chạy” cạnh ô input.

Heatmap + A/B test variant

Heatmap identify pain point, A/B test validate fix có work không. Vd heatmap show CTA ở footer ít click với hypothesis “Move CTA lên hero sẽ tăng conversion 15%”.

Run A/B test 2 tuần để verify với statistical significance.

Sau A/B test ra kết quả, quay lại heatmap variant winner để verify pattern click có đúng expected không. Nếu CTA hero nhận nhiều click nhưng conversion không tăng nghĩa là click thuộc dạng “curiosity” chứ không phải intent thật — cần redesign messaging trước khi rollout 100%.

5 trap dễ mắc khi đọc heatmap

Audit Web22 cho 20 site dùng Clarity và Hotjar 2024-2026 thấy 5 trap phổ biến destroy validity insight từ heatmap. Hiểu trước để tránh ra quyết định sai.

Trap 1 — Sample size quá nhỏ

Dưới 500 click trên page thì heatmap noise, không reliable. Pattern đỏ có thể từ 5-10 user click ngẫu nhiên, không reflect behavior chung.

Fix: wait 2-4 tuần collect đủ data, hoặc dùng heatmap cho page traffic cao hơn 5.000 view/tháng.

Trap 2 — Mobile và desktop blend chung

Default Clarity và Hotjar blend mobile cộng desktop heatmap sinh pattern misleading vì user hành xử rất khác trên 2 device. Fix: luôn filter device-specific trước khi analyze, treat mobile và desktop là 2 audience riêng.

Trap 3 — Bot traffic skew data

Bot click random everywhere làm heatmap dirty với pattern không reflect human behavior. Fix: enable bot filter trong tool settings (Clarity và Hotjar đều có toggle), filter user-agent suspicious như “headless” hoặc “spider”.

Trap 4 — Heatmap không correlate với conversion

Tăng click vào CTA không nghĩa là tăng conversion thực tế. User có thể click vào button rồi bỏ form ngay sau đó.

Fix: combine heatmap với phễu analytics GA4 và A/B test để verify click thực sự drive conversion.

Trap 5 — Over-rely heatmap thay user interview

Heatmap show WHAT user làm nhưng không show WHY. Team dựa hoàn toàn vào heatmap để decide UX change sẽ miss context cảm xúc và động cơ.

Fix: heatmap quantitative cộng interview qualitative, combine luôn không thay thế cho nhau.

Câu hỏi thường gặp

Bài liên quan và bước tiếp theo

Heatmap là 1 tool trong UX research toolkit. Các bài liên quan dưới đây giúp build kiến thức trọn vẹn từ persona, journey map, A/B test cho tới design system implementation.

• User persona là gì — 6 khối thông tin và quy trình build 1-2 tuần — chân dung user input cho phân tích heatmap đúng phân khúc.
• User journey mapping — 5 giai đoạn và 6 thành phần — heatmap verify điểm chạm trong map với data thực.
• A/B test thiết kế — 3 yêu cầu test valid và quy trình 6 bước — validate fix từ heatmap insight qua experiment với statistical significance.
• Xây design system trong Figma — token, component, library workflow — translate insight heatmap thành design system priority.
• Dịch vụ thiết kế UI/UX chuẩn doanh nghiệp tại Web22 — pillar service page cho đội UX Researcher Web22.

Cần đội Web22 setup heatmap analytics cộng insight extraction cộng action plan turnkey cho website của bạn? Báo giá thiết kế giao diện website — báo giá rõ ràng theo phạm vi, không phát sinh sau khi ký hợp đồng.