Giao diện
Tracking - Launcher
Tính năng này để làm gì
Launcher là nút nổi ở góc dưới website. Khách bấm vào là mở Panel: lời mời tham gia, điểm, ưu đãi và đăng nhập bằng Zalo. Bạn tự chỉnh chữ, icon, màu, vị trí và ẩn nút theo thiết bị hoặc theo trang, không phải sửa website.
Đường dẫn: → → → mở project → tab
Bạn cũng vào được từ tab Tổng quan của project: thẻ Nút nổi Launcher → Cấu hình, hoặc bước Bật nút nổi Launcher trong mục Các bước cài đặt → Cấu hình Launcher. Thẻ Nút nổi Launcher cho biết trạng thái Đang bật hay Chưa bật.
Phải bấm Lưu ít nhất một lần
Form hiện sẵn giá trị mặc định, nhưng website chưa có nút cho tới khi bạn bấm Lưu lần đầu. Panel cũng vậy: nếu Panel chưa được lưu lần nào thì khách bấm nút sẽ không mở gì.
Bật Launcher
- Mở tab Launcher Mở project, chọn tab Launcher.
- Chỉnh nút Nhập chữ trên nút, chọn icon, kiểu dáng, màu và vị trí. Các trường được giải thích ở bảng bên dưới.
- Xem trước Cột bên phải có nút chuyển Desktop / Mobile, cập nhật ngay khi bạn sửa. Hình xem trước chỉ để minh hoạ, không đúng tỉ lệ thật và không mô phỏng phần ẩn theo trang.
- Lưu Bấm Lưu. Thấy thông báo Đã lưu cấu hình Launcher. là xong, không có bước Publish riêng.
- Kiểm tra trên website Khoảng 1 phút sau, mở website trong một tab ẩn danh để thấy nút mới.
- Nội dung nút - chữ trên nút, nhập riêng cho Desktop và Mobile.
- Icon - chọn icon có sẵn hoặc Tải icon riêng.
- Xem trước - chuyển Desktop / Mobile, cập nhật ngay khi bạn sửa.
- Lưu - áp dụng cho website, không có bước Publish riêng.
Bao lâu khách thấy thay đổi
Lưu là áp dụng ngay, không cần sửa mã nhúng. Nhưng khách đang mở website có thể mất tới khoảng 6 phút mới thấy bản mới, vì máy chủ giữ cấu hình 1 phút và trình duyệt của khách giữ 5 phút. Website chỉ kiểm tra cấu hình mới khi khách tải lại trang.
Chuyển tab là mất thay đổi chưa lưu
Đang sửa mà chuyển sang tab khác thì các thay đổi chưa lưu sẽ mất, không có cảnh báo. Hãy bấm Lưu trước khi chuyển tab.
Các trường cấu hình
| Thẻ | Bạn chỉnh gì | Mặc định | Giới hạn |
|---|---|---|---|
| Nội dung nút | Chữ trên nút, nhập riêng cho Desktop và Mobile | Rewards | Tối đa 30 ký tự |
| Icon | Chọn một trong 5 icon có sẵn (Vương miện, Túi quà tặng, Nhãn giá, Ngôi sao, Hộp quà), hoặc Tải icon riêng từ kho media | Vương miện | Chọn Tải icon riêng mà chưa chọn ảnh thì nút dùng icon có sẵn |
| Hình dạng nút | Kiểu dáng: Vuông, Vát góc, Bo góc, Bo tròn | Bo tròn | |
| Vị trí hiển thị | Đặt riêng cho Desktop và Mobile: Bên trái hoặc Bên phải, Khoảng cách cạnh bên, Khoảng cách cạnh dưới (px) | Desktop: bên phải, 20px, 20px. Mobile: bên phải, 16px, 16px | 0 đến 500px |
| Màu sắc | Màu nền nút và Màu chữ / icon | Nền tím #6C5CE7, chữ trắng #FFFFFF | Màu chữ / icon áp cho cả icon có sẵn; icon tự tải giữ màu gốc |
| Bố cục nội dung | Desktop: Icon kèm chữ, Chỉ chữ hoặc Chỉ icon. Mobile: Chỉ chữ hoặc Chỉ icon | Desktop: Icon kèm chữ. Mobile: Chỉ chữ | Chọn Chỉ chữ mà để trống chữ sẽ ra nút rỗng |
| Hiển thị theo thiết bị | Phạm vi hiển thị: Desktop và mobile, Chỉ desktop, Ẩn hoàn toàn | Desktop và mobile | Không có lựa chọn "chỉ mobile" |
| Hiển thị theo trang | Ẩn trên trang chủ và danh sách Ẩn Launcher trên các URL chứa | Không ẩn trang nào | Tối đa 50 điều kiện, mỗi điều kiện 1 đến 300 ký tự |
| Thứ tự hiển thị (z-index) | Dùng z-index tuỳ chỉnh và Thêm quy tắc !important | Tắt | Chỉ dùng khi nút bị một thành phần khác của website che mất |
Ẩn hoặc tắt nút theo thiết bị
Launcher phân biệt điện thoại và máy tính theo bề rộng màn hình, không theo loại máy: màn rộng từ 768px trở xuống là mobile. Vì vậy cửa sổ máy tính kéo hẹp lại sẽ hiện kiểu mobile, còn máy tính bảng xoay ngang rộng hơn 768px hiện kiểu desktop. Khi khách xoay máy hoặc đổi cỡ cửa sổ, nút tự đổi theo.
Không có công tắc bật/tắt riêng. Muốn tắt Launcher, chọn Ẩn hoàn toàn ở thẻ Hiển thị theo thiết bị rồi bấm Lưu.
Ẩn nút trên một số trang
- Ẩn trên trang chủ: chỉ ẩn khi đường dẫn đúng là
/, kể cả khi có tham số như/?utm_source=zalo. Các trang như/index.htmlhay/vi/không được tính là trang chủ. - Ẩn Launcher trên các URL chứa: bấm Thêm điều kiện và nhập một đoạn đường dẫn. Nút bị ẩn ở mọi trang có đường dẫn chứa đoạn đó. Hệ thống so với phần sau tên miền, gồm đường dẫn và tham số (ví dụ
/checkout?step=2), không gồm tên miền và phần sau dấu#. Có phân biệt chữ hoa, chữ thường.
| Điều kiện | Ẩn ở | Vẫn hiện ở |
|---|---|---|
/checkout | /checkout, /checkout/success, /en/checkout, cả /checkout-guide | /cart, /san-pham/ao-thun |
/cart | /cart, cả /cart-items | /checkout |
?ref=abc | /san-pham?ref=abc | /san-pham |
Những lỗi hay gặp khi nhập điều kiện
- Điều kiện chỉ có dấu
/sẽ ẩn nút trên mọi trang, vì đường dẫn nào cũng chứa/. - Dán cả địa chỉ như
https://shop.vn/checkoutsẽ không bao giờ khớp. Chỉ nhập phần sau tên miền:/checkout. - Không có ký tự đại diện: dấu
*được hiểu đúng là ký tự*. - Nên dùng đường dẫn không dấu. Đường dẫn có dấu tiếng Việt bị trình duyệt mã hoá (dạng
%C3%A1) nên điều kiện gõ có dấu khó khớp. - Website dùng đường dẫn dạng
#/trangkhông lọc được theo trang, vì phần sau#không được so. - Không để dòng điều kiện trống và không thêm khoảng trắng thừa ở đầu, cuối.
Khách thấy gì trên website
- Nút nằm cố định ở góc dưới, mặc định bên phải. Giao diện của website không làm vỡ được nút.
- Bấm nút mở Panel ngay phía trên nút, cùng phía với nút. Khi Panel đang mở, nút chỉ còn dấu ×.
- Khách đóng Panel bằng dấu × trên Panel, bấm lại nút hoặc nhấn phím Esc. Bấm ra ngoài Panel thì Panel không đóng.
- Nút không hiện số điểm hay số ưu đãi. Khách đã đăng nhập vẫn thấy nút như cũ, chỉ nội dung Panel thay đổi.
- Với website dạng SPA, nút tự kiểm tra lại điều kiện ẩn mỗi lần khách chuyển trang.
Lỗi thường gặp
| Hiện tượng | Nguyên nhân thường gặp | Cách xử lý |
|---|---|---|
| Website chưa có nút | Chưa bấm Lưu lần nào, đang chọn Ẩn hoàn toàn, domain chưa được khai trong project, hoặc mã nhúng chưa chạy | Bấm Lưu ở tab Launcher; kiểm tra Các bước cài đặt ở tab Tổng quan |
| Vừa sửa mà website chưa đổi | Máy chủ và trình duyệt còn giữ cấu hình cũ, tới khoảng 6 phút | Mở website trong tab ẩn danh sau khoảng 1 phút |
| Bấm nút không mở gì | Panel chưa được lưu lần nào | Vào tab Panel, chỉnh nội dung rồi bấm Lưu |
| Nút ẩn trên mọi trang | Có điều kiện chỉ là / | Xoá điều kiện đó |
| Nút bị một thành phần của website che | Thành phần đó nằm lớp trên | Bật Dùng z-index tuỳ chỉnh, nếu vẫn bị che thì bật thêm Thêm quy tắc !important |
| Lưu báo lỗi | Khoảng cách lớn hơn 500px, có dòng điều kiện trống, hoặc quá 50 điều kiện | Sửa lại trường bị báo rồi Lưu |
| Nút không có chữ | Chọn Chỉ chữ nhưng để trống Nội dung nút | Nhập chữ, hoặc đổi sang Chỉ icon |