Hướng dẫn tích hợp Popup Form vào Website trên GapOne

Popup hiển thị cơ bản

** Chú ý: Nếu nhu cầu chỉ là hiển thị popup → Không cần thực hiện gắn Tracking code Web Push, chỉ cần gắn Tracking code popup tại Trang quản lý popup

Tích hợp Website vào GapOne

 Tích hợp Website trên mục Tích hợp kênh gửi tin – Website

• Bước 1: Nhập tên miền

Trên thanh menu chọn tab Cài đặt → Tích hợp kênh gửi tin → Website → Nhập tên miền → Click nút + Thêm

• Bước 2: Lưu thông tin miền

Tại trang Thông số WebPush Notification, điền đầu đủ thông tin cần thiết → Chọn Lưu

Gắn mã tracking code vào Website

** Chú ý: Tracking code áp dụng cho tất cả các popup đã kích hoạt

• Bước 1: Sao chép mã tracking code trên GapOne

Tại trang Quản lý Popup, chọn nút Gắn mã Tracking code → Lưu và sao chép mã code tracking

• Bước 2: Truy cập trang admin website

• Bước 3: Truy cập trang chỉnh sửa code

Sau khi truy cập vào trang website admin, hãy truy cập vào trang chỉnh sửa code

• Bước 4: Dán tracking code đã sao chép trên GapOne vào website trong file footer.liquid

Tìm kiếm mục Snippets → Chọn file footer.liquid → Tại trang code, kéo xuống cuối và dán mã Tracking đã lưu trước đó → Lưu 

Popup hiển thị Custom

** Chú ý: Nếu nhu cầu chỉ là hiển thị popup → Không cần thực hiện gắn Tracking code Web Push, chỉ cần gắn Tracking code popup tại Trang quản lý popup

Tích hợp Website vào Gapone

 Tích hợp Website trên mục Tích hợp kênh gửi tin – Website

• Bước 1: Nhập tên miền

Trên thanh menu chọn tab Cài đặt → Tích hợp kênh gửi tin → Website → Nhập tên miền → Click nút + Thêm

• Bước 2: Lưu thông tin miền

Tại trang Thông số WebPush Notification, điền đầu đủ thông tin cần thiết → Chọn Lưu

Khai báo GapOne Website Objects (bỏ qua nếu bạn kết nối trên website của Haravan)

Khai báo theo link dưới đây: https://docs.gapone.vn/vi/api-docs#tag/Gapone_Object

Gắn mã tracking code vào Website

** Chú ý: Tracking code áp dụng cho tất cả các popup đã kích hoạt

• Bước 1: Sao chép mã tracking code trên GapOne

Tại trang Quản lý Popup, chọn nút Gắn mã Tracking code → Lưu và sao chép mã code tracking

• Bước 2: Truy cập trang admin website

• Bước 3: Truy cập trang chỉnh sửa code

Sau khi truy cập vào trang website admin, hãy truy cập vào trang chỉnh sửa code

• Bước 4: Dán tracking code đã sao chép trên GapOne vào website trong file footer.liquid

Tìm kiếm mục Snippets → Chọn file footer.liquid → Tại trang code, kéo xuống cuối và dán mã Tracking đã lưu trước đó → Lưu 

Cài đặt điều kiện tuỳ chỉnh

Cài đặt điều kiện tùy chỉnh: Tìm hiểu cách kích hoạt một Popup khi khách truy cập vào trang web của bạn và nhấn vào một nút (hoặc có hành động) bất kì.

Để triển khai, bạn cần tùy chỉnh một đoạn mã ngắn và dán đoạn mã đó vào HTML của trang web của bạn.

• Bước 1: Cài đặt điều kiện hiển thị:
• • Sau khi hoàn thành thiết kế mẫu form của mình, tại bước Điều kiện hiển thị, mục Điều kiện tùy chỉnh chọn Kích hoạt.

** Lưu ý: Các cài đặt về Hành vi hiển thị sẽ bị vô hiệu hoá nếu Điều kiện tuỳ chỉnh được kích hoạt.

• Bước 2: Tạo một nút
  • Sao chép mã bên dưới và dán vào HTML của bất kỳ trang nào mà bạn muốn nút xuất hiện.

<button class=”gapone_form_trigger”>Click here</button>

• • Nút này sẽ sử dụng các styles mặc định từ template trang web của bạn. Bạn có thể tùy chỉnh thêm giao diện của nút.
• Bước 3: Thêm đoạn mã JavaScript tùy chỉnh vào trang web của bạn
  • Dán đoạn mã này ngay bên dưới đoạn mã nút mà bạn đã thêm vào trang web của mình

<script type=“text/javascript”>

document.querySelector(‘.gapone_form_trigger‘).addEventListener(‘click’, function (){

GapitScript.Render(‘FORM_ID’);

});

</script>

• • Thay thế FORM_ID bằng ID form của bạn tại đoạn mã Điều kiện tùy chỉnh

• • Nếu bạn muốn tùy chỉnh điều kiện kích hoạt, hãy copy đoạn mã cài đặt điều kiện mở form ở Điều kiện tùy chỉnh vào bất kì hành động (click, hover,…) hoặc sự kiện tùy chỉnh nào của bạn mà bạn muốn.

• • Sau khi gắn đoạn mã điều kiện tùy chỉnh vào website của bạn, hãy kích hoạt form tại màn Quản lý Popup để form hoạt động