Cách Cài Đặt Heatmap Trên Cửa Hàng Shopify Của Bạn (Không Cần Ứng Dụng, Chỉ Một Dòng Mã)

Tóm tắt bài viết

Thêm heatmap vào Shopify chỉ cần dán một dòng mã vào theme.liquid — không cần cài ứng dụng

Luôn nhân bản theme của bạn làm bản sao lưu trước khi chỉnh sửa. Thay đổi có hiệu lực ngay khi bạn lưu — khác với STUDIO, không có bước xuất bản lại riêng

Trang thanh toán không chạy mã theme, nên không được theo dõi. Thành công nghĩa là số lượt truy cập thực sự tăng lên trong bảng điều khiển HeatMapX — không chỉ là "không có lỗi"

Bạn đang thắc mắc liệu có thể thêm heatmap vào cửa hàng Shopify mà không cần cài ứng dụng không? Hoàn toàn được. Shopify cho phép bạn dán trực tiếp một dòng mã thẻ vào theme của mình, không cần ứng dụng nào cả. Hướng dẫn này sẽ đi qua bước sao lưu bạn nên luôn thực hiện trước, cách thêm thẻ, cách xác nhận nó đang hoạt động, và một vài điều cần lưu ý.

Bước 1: Lấy Site Key Của Bạn

Trước tiên, đăng ký tại HeatMapX (có gói miễn phí), đăng ký cửa hàng của bạn, và lấy site key. Không cần thẻ tín dụng.

Sau khi có site key, sử dụng thẻ bên dưới, thay YOUR_SITE_KEY bằng key thực tế bạn được cấp.

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

Các Bước: Thêm Thẻ Vào theme.liquid

1. (Bắt buộc) Nhân bản theme của bạn làm bản sao lưu

Trước khi chỉnh sửa mã trực tiếp, luôn nhân bản theme hiện tại của bạn trước. Trong trang quản trị Shopify, vào Online Store → Themes, tìm theme đã xuất bản của bạn, nhấp vào menu "…" (hành động), và chọn Duplicate. Điều này cho bạn một bản sao an toàn để khôi phục nếu có gì đó sai sót. Bỏ qua bước này nghĩa là bạn không có cách nào để hoàn tác một chỉnh sửa nhầm.

2. Mở trình chỉnh sửa mã

Trong trang quản trị Shopify, vào Online Store → Themes
Trên theme đã xuất bản của bạn, nhấp vào menu "…" (hành động) và chọn Edit code
Trình duyệt tệp cho theme của bạn sẽ mở ở bên trái

3. Thêm thẻ vào bên trong layout/theme.liquid

Trong danh sách tệp, mở thư mục "Layout" và nhấp vào theme.liquid
Tìm kiếm trong tệp </head> và dán thẻ ở trên ngay trước nó
Lưu tệp

4. Chỉ cần lưu là đủ — không cần xuất bản lại

Trong Shopify, chỉnh sửa mã theme có hiệu lực ngay khi bạn lưu. Khác với STUDIO, không có bước "xuất bản" hay "xuất bản lại" riêng. Sau khi bạn lưu, cửa hàng trực tuyến của bạn đã tải thẻ này rồi.

Cách Xác Nhận Nó Thực Sự Đang Hoạt Động

Sau khi thêm thẻ, hãy duyệt qua vài trang trên cửa hàng của bạn. Nhưng đây là phần quan trọng.

Một trang tải mà không có lỗi không giống với việc theo dõi thực sự đang hoạt động. Ngay cả khi console trình duyệt của bạn không hiển thị gì sai, một site key gõ sai hoặc một thẻ dán sai vị trí có thể khiến không có dữ liệu nào đến được HeatMapX.

Cách kiểm tra đáng tin cậy duy nhất là mở bảng điều khiển HeatMapX, tìm cửa hàng của bạn trong danh sách trang web, và xác nhận rằng số lượt truy cập của nó thực sự đã tăng lên. Sau khi truy cập vài trang — trang sản phẩm, trang bộ sưu tập, v.v. — nếu số lượt truy cập tăng lên, việc cài đặt của bạn đang hoạt động.

Những Điều Cần Lưu Ý

Trang thanh toán không được theo dõi

Thẻ bạn đã thêm vào theme.liquid chạy trên cửa hàng trực tuyến của bạn — trang chủ, trang sản phẩm, trang bộ sưu tập, và giỏ hàng — nhưng nó không chạy trên trang thanh toán (các trang thanh toán dưới /checkouts/). Thanh toán được lưu trữ trực tiếp bởi Shopify, tách biệt khỏi theme của bạn, và mã theme từ theme.liquid không bao giờ được tải ở đó. Nếu bạn nhận thấy không có dữ liệu cho trang thanh toán trong bảng điều khiển của mình, đó là hành vi dự kiến, không phải lỗi.

Chuyển theme nghĩa là phải thêm lại thẻ

Thẻ chỉ tồn tại trong tệp theme.liquid của theme bạn đã chỉnh sửa. Nếu sau này bạn chuyển sang một theme khác (xuất bản một theme mới), tệp theme.liquid của nó sẽ không tự động mang theo thẻ. Bất cứ khi nào bạn chuyển theme, hãy lặp lại các bước tương tự để thêm thẻ vào theme mới.

Câu Hỏi Thường Gặp

Hỏi: Điều này có làm chậm cửa hàng của tôi không? Đáp: Thẻ tải không đồng bộ và nhẹ, nên tác động đến tốc độ tải trang là tối thiểu.

Hỏi: Tôi đã thêm thẻ, nhưng số lượt truy cập trong bảng điều khiển không tăng Đáp: Nguyên nhân phổ biến nhất là site key không khớp — dán key từ một trang web khác, hoặc một ký tự bị mất khi bạn sao chép. Cũng hãy kiểm tra rằng các trang bạn đang thử nghiệm là trang cửa hàng trực tuyến (trang chủ, sản phẩm, bộ sưu tập) chứ không phải trang thanh toán, vì thanh toán không bao giờ được theo dõi.

Kết Luận

Thêm heatmap vào Shopify chỉ đơn giản là dán một dòng mã vào theme.liquid — không cần ứng dụng. HeatMapX miễn phí để bắt đầu, vì vậy hãy thử và xem người mua sắm thực sự trải nghiệm cửa hàng của bạn như thế nào.