Heatmap là gì? Heatmap, hay bản đồ nhiệt, là công cụ trực quan hóa dùng màu sắc để cho thấy mức độ tương tác của người dùng trên một trang web, thường là nơi họ bấm chuột, cuộn xuống hoặc dừng lại lâu nhất.
Vùng màu đỏ biểu thị khu vực nhiều tương tác, vùng màu xanh biểu thị khu vực ít được chú ý. Nhờ đó, người làm website có thể nhìn thấy hành vi của hàng nghìn lượt truy cập chỉ trong một hình ảnh thay vì đọc từng bảng số.
Phần dưới giải thích biểu đồ heatmap hoạt động ra sao, có những loại nào, cách đọc màu và giới hạn cần biết trước khi dựa vào nó để sửa trang.
Heatmap là gì và vì sao còn gọi là bản đồ nhiệt?
Heatmap là kỹ thuật biểu diễn dữ liệu hai chiều bằng màu sắc, trong đó giá trị lớn hay nhỏ được thể hiện qua sắc độ hoặc cường độ màu. Tên gọi bản đồ nhiệt xuất phát từ cách tô màu nóng và lạnh giống bản đồ nhiệt độ.
Thuật ngữ này có vẻ mới, nhưng cách tô màu ma trận số liệu đã tồn tại hơn một thế kỷ. Theo mục Heat map của Wikipedia, ví dụ sớm nhất được ghi nhận là năm 1873, khi Toussaint Loua dùng ma trận tô màu vẽ tay để thể hiện số liệu xã hội.
Trong lĩnh vực website, heatmap có thêm một cách dùng riêng: màu không biểu diễn giá trị của từng điểm mà biểu diễn mật độ các điểm dữ liệu, ví dụ số lần bấm trong cùng một vùng của trang.
Biểu đồ heatmap là gì khi dùng cho website?
Biểu đồ heatmap trên website là ảnh chụp trang được phủ lớp màu thể hiện hành vi tổng hợp của nhiều người truy cập. Công cụ ghi lại thao tác của người dùng, gộp lại theo từng vị trí trên trang rồi tô màu theo mức độ tập trung.
Theo tài liệu Microsoft Clarity về heatmap, công cụ này theo dõi lượt bấm và lượt cuộn trên máy tính, điện thoại và máy tính bảng rồi tự tạo bản đồ nhiệt từ dữ liệu đã thu thập. Màu đỏ là khu vực tương tác nhiều nhất, màu xanh là khu vực tương tác ít nhất.
Điểm khác biệt quan trọng so với bảng số liệu là heatmap trả lời câu hỏi theo vị trí: người dùng bấm vào đâu, đọc đến đâu, bỏ qua phần nào. Những câu hỏi này rất khó trả lời nếu chỉ có tổng số lượt xem trang.
Có những loại heatmap nào?
Các công cụ phổ biến chia heatmap theo loại tương tác được đo. Microsoft Clarity hiện hỗ trợ năm loại, và nhiều công cụ khác có cách chia tương tự.
| Loại | Cho biết điều gì | Dùng để kiểm tra |
|---|---|---|
| Click map | Vị trí người dùng bấm hoặc chạm | Nút kêu gọi hành động có được chú ý không |
| Scroll map | Mức độ người dùng cuộn xuống trang | Nội dung quan trọng có nằm ở vùng bị bỏ qua không |
| Area map | Mức tương tác theo từng khu vực, từng phần tử | Phần tử nào thu hút nhiều lượt bấm nhất |
| Conversion map | Những lượt bấm dẫn đến chuyển đổi | Vị trí bấm tạo ra kết quả kinh doanh |
| Attention map | Vùng nhận được sự chú ý của người xem | Bố cục có dẫn mắt đúng chỗ không |
Trong thực tế, click map và scroll map là hai loại được dùng nhiều nhất vì dễ đọc và dễ hành động. Hai loại còn lại thường dùng sau khi trang đã có lượng dữ liệu đủ lớn.
Heatmap hoạt động như thế nào?
Heatmap hoạt động nhờ một đoạn mã theo dõi được cài vào website, ghi lại thao tác của người truy cập rồi tổng hợp thành hình ảnh. Mã này chỉ thu thập dữ liệu trên những trang đã được cài.
- Cài mã theo dõi của công cụ heatmap vào website, thường qua phần head hoặc plugin.
- Người dùng truy cập, bấm, cuộn và dừng lại như bình thường; công cụ ghi nhận từng thao tác theo vị trí.
- Công cụ gộp dữ liệu của nhiều lượt truy cập theo bộ lọc đã chọn, ví dụ theo thiết bị hoặc nguồn truy cập.
- Kết quả được phủ lên ảnh chụp trang, với màu nóng ở nơi tương tác dày và màu lạnh ở nơi thưa.
Theo tài liệu của Microsoft Clarity, bản đồ nhiệt được tạo trong vài giây và không yêu cầu mức lưu lượng tối thiểu. Tuy vậy, dữ liệu ít vẫn cho hình ảnh thiếu ổn định, nên không nên kết luận khi chỉ có vài chục lượt xem.
Cách đọc màu trên bản đồ nhiệt đúng là gì?
Cách đọc đúng là xem màu như mức độ tập trung tương đối của hành vi trên cùng một trang, không phải điểm tốt hay xấu. Một vùng đỏ chỉ cho biết nhiều người tương tác ở đó, chưa cho biết sự tương tác đó có tạo ra kết quả hay không.
- Màu đỏ, cam: vùng nhiều lượt bấm hoặc nhiều người dừng lại.
- Màu vàng, xanh lá: vùng tương tác vừa phải.
- Màu xanh dương: vùng ít được chú ý hoặc ít người cuộn tới.
Hai cách hiểu sai hay gặp là coi vùng đỏ trên một đoạn văn bản thường là tốt, và coi vùng xanh ở cuối trang là nội dung kém. Người dùng có thể bấm vào ảnh hoặc chữ không có liên kết vì nhầm đó là nút, và đó là dấu hiệu cần sửa thiết kế chứ không phải thành công.
Nên so sánh heatmap theo từng nhóm thiết bị riêng. Cùng một trang, bố cục trên điện thoại khác máy tính nên vùng đỏ thường nằm ở vị trí khác.
Heatmap giúp tối ưu website ở những điểm nào?
Heatmap giúp phát hiện sớm các vấn đề về bố cục, nội dung và nút bấm mà chỉ số tổng thể không chỉ ra được. Từ đó người làm website sửa đúng chỗ thay vì đoán.
- Phát hiện nút kêu gọi hành động bị bỏ qua hoặc đặt ở vùng ít người cuộn tới.
- Tìm phần tử không có liên kết nhưng bị bấm nhiều, cho thấy người dùng đang mong đợi một hành động.
- Xác định điểm người dùng thôi cuộn để đưa thông tin quan trọng lên cao hơn.
- So sánh hai phiên bản trang để xem thay đổi nào cải thiện tương tác.
- Kiểm tra bố cục trên điện thoại, nơi lỗi hiển thị thường khó phát hiện bằng mắt thường.
Bố cục, vị trí nút bấm và mức độ dễ đọc của trang là một phần của SEO onpage, nên dữ liệu heatmap có thể hỗ trợ cả việc cải thiện trải nghiệm lẫn kết quả tìm kiếm.
Heatmap đặc biệt có ích khi kết hợp với số liệu chuyển đổi. Bài viết về conversion rate và cách tăng tỷ lệ chuyển đổi giải thích cách đo kết quả, còn heatmap giúp tìm lý do phía sau con số đó.
Tốc độ tải trang cũng ảnh hưởng đến dữ liệu bản đồ nhiệt, vì người dùng rời đi trước khi cuộn thì scroll map sẽ lệch sang phần đầu trang. Hướng dẫn tối ưu tốc độ website giúp loại bỏ nguyên nhân này trước khi đọc kết quả.
Heatmap có những hạn chế nào cần biết?
Hạn chế lớn nhất là heatmap chỉ cho thấy hành vi tổng hợp, không giải thích được lý do. Hai người cùng bấm một vị trí có thể có hai ý định hoàn toàn khác nhau.
- Chỉ hiển thị ở những trang đã cài mã theo dõi.
- Dữ liệu được lưu có thời hạn; Microsoft Clarity cho biết dữ liệu heatmap được giữ tối đa 9 tháng.
- Mỗi bản đồ nhiệt bị giới hạn số lượt xem trang; với Clarity là tối đa 100.000 lượt cho mỗi heatmap.
- Các phần tử động như menu mở khi rê chuột thường không được chụp đầy đủ.
- Mẫu dữ liệu nhỏ hoặc có lẫn traffic ảo sẽ cho hình ảnh sai lệch.
Để bù cho hạn chế này, nên xem thêm bản ghi phiên truy cập và dữ liệu phân tích. Bài hướng dẫn cài GA4 và đọc báo cáo cho biết cách đối chiếu hành vi theo nguồn truy cập, thiết bị và sự kiện.
Cách bắt đầu dùng heatmap cho website là gì?
Cách bắt đầu là chọn một trang quan trọng, đặt câu hỏi cụ thể rồi dùng heatmap để trả lời, thay vì bật cho cả website cùng lúc. Một câu hỏi rõ ràng giúp đọc kết quả nhanh và tránh sửa lan man.
- Chọn trang có nhiều truy cập hoặc ảnh hưởng đến doanh thu, như trang chủ, trang dịch vụ, trang đăng ký.
- Viết ra một câu hỏi, ví dụ nút đăng ký có được bấm không, hoặc người dùng có cuộn tới phần bảng giá không.
- Chọn công cụ miễn phí hoặc trả phí rồi cài mã theo dõi, ví dụ Microsoft Clarity hoặc Hotjar.
- Chờ có đủ lượt truy cập, tách dữ liệu theo máy tính và điện thoại.
- Đọc click map và scroll map, ghi lại phát hiện, sửa một thay đổi nhỏ rồi so sánh lại.
Nên thay đổi từng điểm một để biết thay đổi nào có tác dụng. Sửa nhiều chỗ cùng lúc sẽ khiến việc so sánh hai bản đồ nhiệt trở nên khó kết luận.
Heatmap khác Google Analytics ở điểm nào?
Heatmap cho biết hành vi theo vị trí trên trang, còn Google Analytics cho biết hành vi theo số liệu tổng hợp như lượt truy cập, nguồn và chuyển đổi. Hai công cụ bổ sung cho nhau thay vì thay thế nhau.
| Tiêu chí | Heatmap | Google Analytics |
|---|---|---|
| Câu hỏi trả lời | Người dùng bấm, cuộn ở đâu trên trang | Bao nhiêu người đến, từ đâu, làm gì |
| Dạng dữ liệu | Hình ảnh phủ màu trên trang | Bảng số và biểu đồ theo thời gian |
| Phạm vi | Từng trang hoặc nhóm trang | Toàn bộ website |
| Điểm mạnh | Chỉ ra vấn đề bố cục, nút bấm | Đo quy mô và xu hướng |
Quy trình hợp lý là bắt đầu từ Google Analytics để tìm trang có vấn đề, ví dụ nhiều người vào nhưng ít chuyển đổi. Sau đó dùng heatmap trên chính trang đó để tìm nguyên nhân hiển thị.
Câu hỏi thường gặp về heatmap
❓ Heatmap là gì?
➡️ Heatmap, hay bản đồ nhiệt, là cách trực quan hóa dữ liệu bằng màu sắc. Với website, heatmap cho thấy người dùng bấm, cuộn và dừng lại ở đâu trên trang, trong đó màu đỏ là nơi tương tác nhiều và màu xanh là nơi tương tác ít.
❓ Biểu đồ heatmap là gì?
➡️ Biểu đồ heatmap là hình ảnh phủ lớp màu lên trang web hoặc bảng dữ liệu để thể hiện mật độ hoặc độ lớn của giá trị. Trên website, nó tổng hợp hành vi của nhiều lượt truy cập thành một bức ảnh dễ đọc, thay vì phải xem từng bảng số.
❓ Heatmap tiếng Việt gọi là gì?
➡️ Heatmap thường được gọi là bản đồ nhiệt trong tiếng Việt. Tên gọi này xuất phát từ cách dùng màu nóng và lạnh để biểu diễn mức độ. Nhiều người làm marketing vẫn dùng nguyên từ heatmap vì ngắn gọn và quen thuộc với tên công cụ.
❓ Màu đỏ trên heatmap có nghĩa là gì?
➡️ Màu đỏ trên heatmap cho biết khu vực có nhiều tương tác nhất, như nhiều lượt bấm hoặc nhiều người dừng lại. Màu đỏ chỉ phản ánh mức độ tập trung chứ không khẳng định khu vực đó hiệu quả, nên cần đối chiếu thêm với kết quả chuyển đổi.
❓ Có những loại heatmap nào?
➡️ Các loại phổ biến gồm click map, scroll map, area map, conversion map và attention map. Click map đo vị trí bấm, scroll map đo mức cuộn xuống, các loại còn lại đo khu vực tương tác, lượt bấm dẫn đến chuyển đổi và vùng được chú ý.
❓ Click map dùng để làm gì?
➡️ Click map cho biết người dùng bấm hoặc chạm vào đâu trên trang. Nó giúp phát hiện nút kêu gọi hành động bị bỏ qua và những phần tử không có liên kết nhưng bị bấm nhiều, cho thấy người dùng đang mong đợi một hành động tại đó.
❓ Scroll map dùng để làm gì?
➡️ Scroll map cho biết người dùng cuộn xuống trang đến đâu trước khi rời đi. Từ đó có thể đưa thông tin quan trọng lên vùng nhiều người đọc, và tránh đặt nút kêu gọi hành động hay bảng giá ở nơi ít người cuộn tới.
❓ Heatmap hoạt động như thế nào?
➡️ Heatmap hoạt động nhờ đoạn mã theo dõi cài vào website, ghi lại thao tác bấm và cuộn của người truy cập. Công cụ gộp dữ liệu theo vị trí và bộ lọc, rồi phủ màu lên ảnh chụp trang để người dùng nhìn thấy khu vực tương tác nhiều hay ít.
❓ Cần bao nhiêu lượt truy cập để có heatmap đáng tin?
➡️ Một số công cụ như Microsoft Clarity không đặt mức tối thiểu để tạo heatmap, nhưng dữ liệu ít cho hình ảnh thiếu ổn định. Nên chờ đủ số lượt truy cập để mô hình bấm và cuộn lặp lại rõ ràng rồi mới kết luận và thay đổi trang.
❓ Có công cụ heatmap miễn phí không?
➡️ Có, Microsoft Clarity cung cấp heatmap và bản ghi phiên truy cập miễn phí theo thông tin trên trang chủ của họ. Các công cụ khác như Hotjar có điều kiện và mức giá riêng, thay đổi theo thời điểm nên cần xem trên trang nhà cung cấp.
❓ Heatmap có làm chậm website không?
➡️ Heatmap cần cài thêm mã theo dõi nên có thể ảnh hưởng nhẹ đến tốc độ tải, tùy công cụ và cách cài. Nên kiểm tra tốc độ trước và sau khi cài, và chỉ tải mã theo dõi ở những trang thật sự cần phân tích.
❓ Heatmap có thay thế được Google Analytics không?
➡️ Không, hai công cụ bổ sung cho nhau. Heatmap cho biết hành vi theo vị trí trên trang, còn Google Analytics đo quy mô, nguồn truy cập và chuyển đổi. Nên dùng Google Analytics tìm trang có vấn đề, rồi dùng heatmap tìm nguyên nhân ngay trên trang đó.
❓ Heatmap có xem được trên điện thoại không?
➡️ Có, các công cụ heatmap thường ghi nhận hành vi trên máy tính, điện thoại và máy tính bảng. Nên xem riêng từng thiết bị vì bố cục khác nhau, vùng bấm nhiều trên điện thoại thường không trùng vị trí với máy tính.
❓ Heatmap có hạn chế gì?
➡️ Heatmap chỉ cho thấy hành vi tổng hợp, không giải thích lý do, và chỉ hiển thị ở trang đã cài mã. Dữ liệu có giới hạn thời gian lưu và số lượt xem, các phần tử động như menu mở khi rê chuột có thể không được chụp đầy đủ.
❓ Heatmap có dùng ngoài website được không?
➡️ Được, heatmap là kỹ thuật trực quan hóa dữ liệu nói chung, dùng cả trong phân tích dữ liệu, sinh học, tội phạm học và nhiều lĩnh vực khác. Trong marketing, thuật ngữ này thường chỉ bản đồ nhiệt về hành vi người dùng trên website hoặc ứng dụng.
Tóm lại, heatmap là gì có thể trả lời ngắn gọn: đó là bản đồ nhiệt thể hiện nơi người dùng tương tác nhiều và ít trên trang. Biểu đồ heatmap chỉ thực sự có giá trị khi dữ liệu đủ lớn, được tách theo thiết bị và đọc cùng các số liệu khác để biết đâu là vấn đề thật cần sửa.
