1. Tổng quan
Bài viết hướng dẫn cách thiết lập form pop-up trên aiMarketing để form chỉ xuất hiện khi người dùng nhấn vào nút CTA trên trang. Tính năng này giúp tối ưu trải nghiệm người dùng, tăng tỷ lệ chuyển đổi và kiểm soát tốt hơn việc thu thập thông tin khách hàng.
Nội dung bài viết gồm:
Hướng dẫn thiết lập form pop-up theo hành động click nút CTA.
2. Hướng dẫn thực hiện
2.1. Hướng dẫn lấy ID/ Class của button trên trang web
Bước 1: Mở công cụ dành cho nhà phát triển (Developer Tools)
- Trên Windows/Linux:
Nhấn phím F12 hoặc tổ hợp phím Ctrl + Shift + I - Trên macOS:
Nhấn tổ hợp Cmd + Option + I
Cửa sổ Developer Tools sẽ hiện ra, thường nằm bên phải hoặc dưới cùng của trình duyệt.
Bước 2: Chọn công cụ chọn phần tử (Inspect Element)
Ở góc trên bên trái cửa sổ Developer Tools, nhấn vào biểu tượng mũi tên trong ô vuông hoặc biểu tượng Select Element (Inspect).
Sau đó di chuột ra trang web, con trỏ chuột sẽ đổi sang mũi tên.
Bước 3: Xác định nút (Button) cần lấy ID hoặc Class
Di chuột đến nút mà bạn muốn lấy ID hoặc Class, nhấn click vào nút đó.
Trong Developer Tools, phần HTML của nút đó sẽ được tô sáng trong phần Elements (Phần tử).
Bước 4: Tìm kiếm thông tin ID hoặc Class
- Trong đoạn mã HTML được tô sáng, tìm thuộc tính:
- id=”giá_trị_id” — đây là giá trị ID của nút.
- class=”giá_trị_class” — đây là giá trị Class (có thể có nhiều class cách nhau bằng dấu cách).
Ví dụ: Trong ảnh trên, ID của button “VIEW MENU” = it35a
2.2. Hướng dẫn thiết lập hiển thị form pop-up khi click vào nút CTA
Bước 1: Sao chép URL trang web để thiết lập điều kiện hiển thị
- Truy cập trang web bạn muốn gắn form pop-up.
- Sao chép đường dẫn (URL) chính xác của trang.
- Trong phần Thiết lập hiển thị trên aiMarketing, tại mục Website URL, Dán URL trang web bạn đã sao chép vào.
- Bạn có thể thêm điều kiện (nếu cần) để giới hạn trang cụ thể cho form pop-up.
Bước 2: Thiết lập thời điểm hiển thị form pop-up
- Trong mục Thời điểm form pop-up xuất hiện trên trang, tích chọn mục Click vào nút CTA trên trang.
- Đây sẽ là điều kiện để form pop-up chỉ hiển thị khi người dùng bấm vào nút CTA mà bạn sẽ xác định.
Bước 3: Gắn mã ID hoặc Class của nút CTA
- Tại phần ID hoặc Class của CTA/Button, chọn kiểu định danh tùy theo nút trên trang:
- Chọn ID nếu bạn lấy mã định danh dạng ID.
- Chọn Class nếu bạn lấy định danh dạng lớp (class).
- Nhập chính xác mã ID hoặc Class bạn đã lấy được theo hướng dẫn lấy ID/Class ở trên.
- Nếu muốn gắn nhiều nút CTA khác nhau cho cùng một pop-up, nhấn nút + Thêm CTA/Button để nhập thêm mã ID/Class các nút khác.
Bước 4: Lưu và kiểm tra
- Sau khi hoàn tất các thiết lập, lưu và xuất bản form pop-up.
- Truy cập trang web và thực hiện click vào nút CTA đã cấu hình để kiểm tra form pop-up hiển thị đúng như mong muốn.
