Bạn cần trợ giúp gì?
<Trang chủ
Print

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

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

Tich-hop-popup-form-vao-website-01

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

Tich-hop-popup-form-vao-website-02

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

Tich-hop-popup-form-vao-website-03

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

Tich-hop-popup-form-vao-website-04

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

 Tich-hop-popup-form-vao-website-05

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 

Tich-hop-popup-form-vao-website-06

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

Tich-hop-popup-form-vao-website-01

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

Tich-hop-popup-form-vao-website-02

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

Tich-hop-popup-form-vao-website-03

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

Tich-hop-popup-form-vao-website-04

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

 Tich-hop-popup-form-vao-website-05

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 

Tich-hop-popup-form-vao-website-06

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.

 Tich-hop-popup-form-vao-website-09

  • 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

 Tich-hop-popup-form-vao-website-08

  • 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.

Tich-hop-popup-form-vao-website-07

  • 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
Previous Giới thiệu về điều kiện tùy chỉnh của form Popup trên hệ thống GAPONE
Next Hướng dẫn tạo mới form popup trên hệ thống GAPONE
Mục lục