Heatmap Cho Landing Page: Dùng Hotjar & Microsoft Clarity

Nếu bạn đang chạy landing page mà chỉ nhìn vào số liệu kiểu traffic, time on site hay conversion rate thì thật ra bạn mới thấy được “kết quả”, chứ chưa hiểu rõ “nguyên nhân”. Có một khoảng trống rất lớn giữa việc người dùng vào trang và việc họ thực sự tương tác như thế nào.

Đây là lúc heatmap trở thành công cụ cực kỳ hữu ích. Nó cho bạn thấy người dùng click vào đâu, kéo xuống tới đâu, và bỏ qua những phần nào trên landing page. Nhìn vào heatmap đúng cách, bạn sẽ hiểu được vì sao có những trang traffic cao nhưng chuyển đổi lại thấp.

Trong bài này mình sẽ đi theo hướng thực tế nhất: giải thích heatmap là gì, cách dùng Hotjar và Microsoft Clarity, và quan trọng hơn là cách đọc dữ liệu để tối ưu landing page hiệu quả chứ không phải chỉ cài cho có.

Mục lục

Heatmap là gì và tại sao landing page cần dùng?

Heatmap (bản đồ nhiệt) là công cụ trực quan hóa hành vi người dùng trên website. Thay vì đọc số liệu khô khan, bạn sẽ thấy được vùng nào được tương tác nhiều thông qua màu sắc.

Thông thường sẽ có 3 loại heatmap phổ biến:

Click heatmap: hiển thị khu vực người dùng click nhiều nhất
Scroll heatmap: cho biết người dùng kéo xuống tới đâu
Move heatmap: theo dõi chuyển động chuột (gần giống sự chú ý)

Với landing page, heatmap gần như là công cụ bắt buộc nếu bạn muốn tối ưu chuyển đổi. Vì nó giúp trả lời những câu hỏi rất thực tế như:

CTA có đang đặt đúng vị trí không?
Người dùng có đọc hết nội dung không?
Có phần nào bị bỏ qua hoàn toàn không?

Hotjar và Microsoft Clarity: nên chọn cái nào?

Hiện nay có khá nhiều tool heatmap, nhưng phổ biến nhất vẫn là Hotjar và Microsoft Clarity. Mỗi cái có điểm mạnh riêng.

Hotjar

Giao diện dễ dùng
Heatmap trực quan, rõ ràng
Có thêm survey, feedback người dùng

Nhược điểm là bản miễn phí bị giới hạn session.

Microsoft Clarity

Miễn phí hoàn toàn
Record session không giới hạn
Xem lại hành vi người dùng chi tiết

Nhược điểm là heatmap không “đẹp” bằng Hotjar, nhưng đủ dùng.

Nếu bạn mới bắt đầu, mình thường khuyên dùng Clarity trước. Sau đó nếu cần phân tích sâu hơn thì dùng thêm Hotjar.

Hướng dẫn tích hợp Microsoft Clarity vào website

Microsoft Clarity là một trong những công cụ phân tích hành vi người dùng miễn phí mạnh mẽ nhất hiện nay. Công cụ này cho phép bạn theo dõi heatmap, ghi lại phiên truy cập (session recording), phân tích tỷ lệ cuộn trang, tỷ lệ thoát và nhiều chỉ số UX quan trọng khác.

Điểm mạnh của Clarity là hoàn toàn miễn phí, dễ cài đặt và đặc biệt phù hợp với website WordPress, website doanh nghiệp, landing page hoặc website bán hàng đang muốn tối ưu tỷ lệ chuyển đổi.

Bước 1: Tạo tài khoản Microsoft Clarity

Truy cập trang chủ Microsoft Clarity và đăng nhập bằng tài khoản Microsoft. Nếu chưa có tài khoản, bạn chỉ cần đăng ký bằng email trong vài phút.

Sau khi đăng nhập thành công, hệ thống sẽ đưa bạn tới bảng điều khiển (Dashboard) để bắt đầu tạo dự án mới.

Bước 2: Tạo Project mới

Nhấn nút Create New Project, sau đó nhập:

Tên website hoặc tên dự án
Địa chỉ domain cần theo dõi
Danh mục website (nếu được yêu cầu)

Việc khai báo đúng domain giúp Clarity ghi nhận dữ liệu chính xác và tránh nhầm lẫn khi quản lý nhiều website khác nhau.

Bước 3: Lấy mã theo dõi (Tracking Code)

Sau khi tạo project thành công, Clarity sẽ cung cấp cho bạn một đoạn mã JavaScript dùng để kết nối website với hệ thống theo dõi.

Đây là đoạn script chịu trách nhiệm ghi nhận các hành vi như:

Click chuột
Di chuyển chuột
Cuộn trang
Tương tác với biểu mẫu
Phiên truy cập của người dùng

Hãy sao chép toàn bộ đoạn mã này để sử dụng ở bước tiếp theo.

Bước 4: Gắn mã Clarity vào website

Bạn cần thêm đoạn mã vừa nhận được vào phần <head> của website để Clarity có thể hoạt động chính xác.

Đối với WordPress, bạn có thể:

Chèn trực tiếp vào file header.php
Sử dụng plugin Insert Headers and Footers
Cài đặt thông qua Google Tag Manager
Sử dụng tính năng Custom Code nếu theme hỗ trợ

Ví dụ minh họa:

<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>
</head>

Lưu ý: thay "YOUR_PROJECT_ID" bằng mã project thực tế bạn nhận được trong Clarity.

Việc đặt script trước thẻ đóng </head> giúp dữ liệu được ghi nhận sớm ngay khi người dùng truy cập website.

Bước 5: Kiểm tra hoạt động

Sau khi lưu thay đổi, hãy quay lại dashboard của Clarity và đợi hệ thống xác thực mã theo dõi.

Thông thường chỉ sau vài phút đến vài giờ, dữ liệu đầu tiên sẽ bắt đầu xuất hiện. Từ thời điểm này, mọi tương tác của người dùng sẽ được Clarity ghi nhận và hiển thị dưới dạng báo cáo trực quan.

Lưu ý khi sử dụng Microsoft Clarity

Để dữ liệu được thu thập đầy đủ và chính xác, bạn nên kiểm tra một số yếu tố sau:

Script Clarity không bị chặn bởi plugin cache hoặc plugin bảo mật.
Không có lỗi JavaScript gây gián đoạn quá trình tải script.
Website hoạt động ổn định trên cả desktop và mobile.
Chính sách bảo mật (Privacy Policy) đã được cập nhật nếu website thu thập dữ liệu người dùng.

Việc kiểm tra ngay từ đầu sẽ giúp bạn tránh tình trạng cài đặt thành công nhưng không có dữ liệu để phân tích.

Hướng dẫn cài đặt Hotjar

Nếu Microsoft Clarity nổi bật nhờ miễn phí thì Hotjar lại được nhiều marketer và chuyên gia UX lựa chọn nhờ bộ công cụ phân tích hành vi rất mạnh.

Ngoài heatmap, Hotjar còn cung cấp khảo sát người dùng, biểu mẫu phản hồi (Feedback) và các tính năng hỗ trợ tối ưu trải nghiệm khách hàng.

Bước 1: Tạo tài khoản Hotjar

Truy cập website Hotjar và đăng ký tài khoản mới. Sau khi xác thực email, bạn có thể tạo project đầu tiên để bắt đầu theo dõi dữ liệu.

Hotjar cung cấp gói miễn phí cho website có lưu lượng truy cập thấp. Nếu cần phân tích chuyên sâu hoặc theo dõi nhiều phiên truy cập hơn, bạn có thể nâng cấp lên các gói trả phí.

Bước 2: Lấy Tracking Code

Sau khi tạo project, Hotjar sẽ cung cấp cho bạn một đoạn mã theo dõi riêng.

Đây là đoạn mã dùng để ghi nhận:

Heatmap
Session Recording
Click Tracking
Scroll Tracking
Khảo sát hành vi người dùng

Hãy sao chép đoạn mã này để tiếp tục cài đặt.

Bước 3: Gắn mã Hotjar vào website

Có hai phương pháp phổ biến:

Cách 1: Cài trực tiếp trên website

Bạn mở phần quản lý giao diện hoặc mã nguồn website, sau đó dán tracking code vào trước thẻ đóng </head>.

Đối với WordPress, có thể thực hiện bằng:

header.php
Plugin Insert Headers and Footers
Plugin WPCode
Tính năng Custom Code của theme

Cách 2: Cài thông qua Google Tag Manager

Nếu website đang sử dụng Google Tag Manager, đây là phương pháp được khuyến nghị vì dễ quản lý và không cần chỉnh sửa mã nguồn.

Các bước thực hiện:

Copy Site ID từ Hotjar
Tạo Tag mới trong GTM
Chọn loại tag phù hợp
Nhập Site ID
Thiết lập Trigger là All Pages
Publish thay đổi

Bước 4: Xác nhận cài đặt thành công

Sau khi hoàn tất, quay lại dashboard Hotjar và sử dụng tính năng Verify Installation.

Nếu hệ thống phát hiện tracking code hoạt động bình thường, bạn sẽ nhận được thông báo xác nhận và có thể bắt đầu thu thập dữ liệu.

Lưu ý khi sử dụng Hotjar

Kiểm tra cache website sau khi cài đặt.
Đảm bảo CDN không chặn script.
Kiểm tra lại sau mỗi lần thay đổi giao diện hoặc theme.
Cập nhật chính sách bảo mật nếu website thu thập dữ liệu người dùng.

Cách đọc Heatmap đúng cách (phần quan trọng nhất)

Nhiều người cài đặt heatmap rất nhanh nhưng lại không biết cách phân tích dữ liệu. Trên thực tế, giá trị lớn nhất của heatmap không nằm ở việc thu thập dữ liệu mà nằm ở cách bạn diễn giải dữ liệu đó để đưa ra quyết định tối ưu website.

1. Phân tích khu vực được click nhiều nhất

Click Heatmap cho biết chính xác nơi người dùng đang tương tác trên trang.

Nếu một nút CTA quan trọng nhận được nhiều lượt click, điều đó cho thấy vị trí và thiết kế đang hoạt động hiệu quả. Ngược lại, nếu người dùng liên tục click vào hình ảnh, tiêu đề hoặc một khu vực không thể tương tác, đó là dấu hiệu cho thấy giao diện đang gây hiểu nhầm.

Ví dụ: người dùng liên tục click vào ảnh sản phẩm nhưng ảnh không mở chi tiết hoặc không dẫn tới trang sản phẩm. Điều này cho thấy họ kỳ vọng ảnh có thể tương tác và bạn nên cân nhắc điều chỉnh trải nghiệm.

2. Kiểm tra độ sâu cuộn trang (Scroll Depth)

Scroll Heatmap giúp xác định người dùng thực sự đọc đến đâu trên trang.

Nếu chỉ khoảng 30% người dùng cuộn xuống cuối bài viết hoặc landing page, điều đó đồng nghĩa phần nội dung phía dưới đang được rất ít người nhìn thấy.

Thông tin quan trọng như:

Nút CTA
Bảng giá
Form đăng ký
Thông tin liên hệ

nếu được đặt quá thấp có thể làm giảm tỷ lệ chuyển đổi đáng kể.

Dựa vào dữ liệu này, bạn có thể di chuyển các nội dung quan trọng lên vị trí dễ nhìn thấy hơn.

3. So sánh hành vi giữa Desktop và Mobile

Một sai lầm phổ biến là chỉ xem dữ liệu tổng thể mà không phân tách theo thiết bị.

Người dùng trên điện thoại thường có hành vi hoàn toàn khác với người dùng máy tính:

Thời gian đọc ngắn hơn
Cuộn trang nhanh hơn
Dễ bỏ qua nội dung dài
Vị trí click khác biệt đáng kể

Vì vậy, hãy luôn xem heatmap riêng cho Desktop, Mobile và Tablet để có đánh giá chính xác hơn về trải nghiệm người dùng.

4. Xem Session Recording để hiểu hành vi thực tế

Đây là tính năng được nhiều chuyên gia UX đánh giá cao nhất, đặc biệt trên Microsoft Clarity.

Session Recording cho phép bạn xem lại toàn bộ hành trình của người dùng trên website giống như đang quan sát trực tiếp màn hình của họ.

Thông qua các bản ghi này, bạn có thể phát hiện:

Người dùng bị mắc kẹt ở bước nào.
Form nào khiến họ bỏ cuộc.
Khu vực nào gây nhầm lẫn.
Nội dung nào được đọc kỹ nhất.
Trang nào khiến họ thoát ra nhanh nhất.

Đây là nguồn dữ liệu cực kỳ giá trị để tối ưu UX/UI, cải thiện tỷ lệ chuyển đổi và nâng cao hiệu quả kinh doanh của website.

Ứng dụng thực tế: tối ưu landing page bằng heatmap

Mình chia sẻ một case thực tế để bạn dễ hình dung.

Một landing page bán khóa học có lượng truy cập ổn nhưng tỷ lệ đăng ký thấp. Khi xem heatmap thì thấy:

Người dùng không kéo xuống phần testimonial
CTA đặt quá thấp
Nhiều người click vào ảnh nhưng không có link

Sau khi chỉnh:

Đưa CTA lên cao hơn
Thêm nút vào ảnh
Rút gọn nội dung phía trên

Kết quả: tỷ lệ chuyển đổi tăng rõ rệt.

Đây là điều mà nếu chỉ nhìn Google Analytics sẽ rất khó thấy.

Những lỗi thường gặp khi dùng heatmap

Xem quá ít dữ liệu rồi kết luận
Không phân biệt mobile và desktop
Chỉ nhìn màu mà không phân tích hành vi
Không test lại sau khi chỉnh sửa

Heatmap không phải “cài là xong”, mà cần đọc và thử nghiệm liên tục.

Kết hợp heatmap với các công cụ khác

Để tối ưu tốt hơn, bạn nên kết hợp:

Google Analytics (để xem tổng quan)
Heatmap (để hiểu hành vi)
A/B testing (để kiểm chứng)

Bộ 3 này gần như là tiêu chuẩn khi tối ưu landing page.

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

Heatmap là gì?

Heatmap (bản đồ nhiệt) là công cụ trực quan hóa hành vi người dùng bằng màu sắc — họ click vào đâu, cuộn xuống tới đâu, di chuột vùng nào. Có 3 loại phổ biến: click heatmap, scroll heatmap và move heatmap. Nó giúp hiểu vì sao trang có traffic cao nhưng chuyển đổi lại thấp.

Nên dùng Hotjar hay Microsoft Clarity?

Microsoft Clarity miễn phí hoàn toàn và record session không giới hạn nên rất hợp để bắt đầu. Hotjar có giao diện đẹp, heatmap trực quan và thêm survey/feedback nhưng bản miễn phí giới hạn session. Có thể dùng Clarity trước, khi cần phân tích sâu thì bổ sung Hotjar.

Microsoft Clarity có miễn phí không?

Có, hoàn toàn miễn phí và không giới hạn số session. Bạn chỉ cần tạo project, lấy đoạn mã JavaScript tracking và gắn vào trước thẻ của website là bắt đầu thu thập dữ liệu.

Heatmap giúp tối ưu landing page như thế nào?

Heatmap cho biết CTA đã đặt đúng vị trí chưa, người dùng có đọc hết nội dung không và phần nào bị bỏ qua hoàn toàn. Từ đó bạn điều chỉnh bố cục, vị trí nút CTA và nội dung để tăng tỷ lệ chuyển đổi.

Kết luận

Heatmap không phải là công cụ “cao siêu”, nhưng lại là thứ rất nhiều người bỏ qua khi làm landing page. Trong khi đó, chỉ cần nhìn đúng dữ liệu, bạn có thể cải thiện chuyển đổi mà không cần tăng thêm traffic.

Nếu bạn đang chạy quảng cáo hoặc làm SEO mà landing page không chuyển đổi tốt, đừng vội thay nội dung hay thiết kế ngay. Hãy nhìn vào hành vi người dùng trước, vì đôi khi vấn đề không nằm ở traffic mà nằm ở cách người dùng tương tác với trang.

Hotjar hay Clarity đều là công cụ tốt. Quan trọng không phải bạn dùng tool nào, mà là bạn hiểu được dữ liệu và biết cách tối ưu từ đó.

Đánh giá

Kinh nghiệm thiết kế website

Heatmap cho Landing Page: Hướng dẫn sử dụng Hotjar và Microsoft Clarity

Heatmap là gì và tại sao landing page cần dùng?