Cách cài đặt Heatmap bằng Google Tag Manager (Không cần sửa code, chỉ mất 5 phút)

HeatMapX Engineering Team5 min read
  • how-to
  • gtm
  • google-tag-manager
  • heatmap
  • installation

Tóm tắt nhanh

  • Với GTM, bạn có thể cài đặt heatmap mà không cần đụng vào code của trang web
  • Năm bước: tạo thẻ Custom HTML → gắn trigger All Pages → publish
  • Thành công nghĩa là số liệu trên dashboard HeatMapX của bạn thay đổi — không chỉ đơn giản là "không có lỗi"

Nếu trang web của bạn đã quản lý thẻ (tag) thông qua Google Tag Manager (GTM), đây là cách sạch sẽ nhất để thêm theo dõi heatmap: mọi thứ diễn ra trong giao diện GTM, không cần thay đổi code. Hướng dẫn này sẽ đi qua từng bước.

Trước khi bắt đầu: lấy site key của bạn

Đăng ký HeatMapX (có gói miễn phí, không cần thẻ tín dụng), đăng ký trang web của bạn, và bạn sẽ nhận được site key.

Sau khi có site key, bạn sẽ dùng một thẻ có dạng như sau — thay YOUR-SITE-KEY bằng key thực tế của bạn:

<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

Quan trọng: hãy dán toàn bộ thẻ, không chỉ riêng URL. Thuộc tính data-site-key="..." cho HeatMapX biết dữ liệu thuộc về trang web nào — nếu bạn bỏ nó đi, hoặc chỉ dán URL của src, sẽ không có gì được theo dõi cả.

Thiết lập trên GTM (5 bước)

  1. Mở bảng điều khiển GTM (tagmanager.google.com) và chọn container (workspace) của trang web bạn
  2. Vào "Tags" → "New" trong menu bên trái, và chọn "Custom HTML" làm loại thẻ
  3. Dán toàn bộ thẻ ở trên vào ô HTML
  4. Trong phần trigger, chọn "All Pages (Page View)", đặt cho thẻ một cái tên dễ nhận biết (ví dụ: HeatMapX), rồi lưu lại
  5. Nhấn "Submit / Publish" ở góc trên bên phải để đẩy thay đổi lên môi trường thực

Vậy là xong — việc theo dõi giờ đã hoạt động trên mọi trang của trang web bạn.

Muốn kiểm tra trước khi publish? (Chế độ Preview)

Nhấn "Preview" trong GTM để thử nghiệm thẻ ngay trên trình duyệt của bạn trước khi đưa lên môi trường thực. Mở trang web của bạn thông qua màn hình preview (Tag Assistant) — nếu thẻ HeatMapX của bạn xuất hiện trong mục "Fired", nghĩa là nó đang hoạt động.

Nếu thẻ không kích hoạt — danh sách kiểm tra

  • Bạn đã nhấn Publish chưa? Chỉ lưu (save) thôi thì thay đổi chưa được đưa lên môi trường thực. Đây là nguyên nhân phổ biến nhất
  • Trigger có phải là All Pages không? Một trigger giới hạn theo trang cụ thể nghĩa là các trang khác sẽ không được theo dõi
  • Có banner xin phép cookie (consent mode) đang chặn không? Với một số công cụ quản lý sự đồng ý, thẻ Custom HTML sẽ bị giữ lại cho đến khi khách truy cập đồng ý. Hãy kiểm tra cài đặt "consent" của thẻ và cách công cụ CMP của bạn phân loại nó
  • data-site-key có đúng không? Dán nhầm key của trang web khác sẽ gửi dữ liệu của bạn sang sai trang web

Nhờ Claude Code hướng dẫn bạn

Nếu bạn không muốn tự mò mẫm trong giao diện GTM, bạn có thể nhờ một AI agent như Claude Code hướng dẫn mình. Sao chép prompt bên dưới, thay vào site key của bạn, rồi dán vào.

I want to deploy the HeatMapX heatmap tracking tag via Google Tag Manager.
Walk me through the GTM interface one step at a time, waiting for my reply at each step.

The tag to use (Custom HTML, All Pages trigger):
<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

Nếu bạn không dùng GTM và muốn đưa thẻ trực tiếp vào code của trang web, phiên bản này sẽ giúp Claude Code tự chỉnh sửa file cho bạn:

Install the HeatMapX heatmap tracking tag in this project.
Make sure the following tag is included right before </head> on every page, and tell me which files you changed.

<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

HeatMapX được xây dựng để việc lấy và phân tích dữ liệu cũng có thể thực hiện từ Claude Code (tích hợp CLI) — hãy xem trang "CLI & Skills" trên dashboard của bạn sau khi thiết lập xong.

Xác nhận nó hoạt động: số liệu phải thay đổi

Sau khi cài đặt, hãy duyệt qua vài trang trên trang web của bạn, rồi mở dashboard HeatMapX. Nếu "Sessions today" của trang web bạn đang tăng lên, nghĩa là việc theo dõi đã hoạt động.

Dấu hiệu thành công không phải là "không có lỗi" — mà là số liệu thay đổi trên dashboard. Nếu không có gì thay đổi, hãy thực hiện lần lượt danh sách kiểm tra ở trên.

Heatmap chạy từ Claude Code — bắt đầu miễn phí.

Dán một tag tracker, nhận phân tích và đề xuất CRO từ CLI.