Trình duyệt phổ biến

Hướng dẫn tích hợp web push cho các loại trình duyệt thông thường như firefox, chrome, egde, coccoc,...

1. Nếu bạn chưa có tài khoản, hãy đăng ký tại pushdy.com

1. Truy cập Dashboard 2. Tạo 1 ứng dụng nếu bạn chưa có

2. Thiết lập Pushdy cho website của bạn

1. Truy cập vào trang Cài đặt. 2. Chọn mục Các trình duyệt phổ biến để bắt đầu thiết lập.

3. Cấu hình cho Web site của bạn

• Đường dẫn trang web: tên miền trang Web. Nếu bạn chưa có HTTPS cho website của bạn, bạn có thể tạo Free SSL sử dụng Let's Encrypt.

Nếu bạn muốn sử dụng thêm tính năng Web Push, bạn hãy chọn "Sử dụng Webpush" và nhập thêm 1 số thông tin như bên dưới nhé:

Thông tin cơ bản

• Đường dẫn ảnh icon: đường link tới icon của bạn để hiển thị trên cửa sổ xin quyền Push Notification.

• Điều kiện đăng ký: các tuỳ chọn này cho phép bạn tuỳ chỉnh các page cho phép ẩn/hiện cửa sổ xin quyền Push Notification cũng như điều kiện và cách thức hiển thị cửa sổ này.

Tùy chỉnh hiển thị

Tại đây, bạn có thể thay đổi mầu sắc, nội dung cho hộp thoại xin quyền và tiêu đề cho các nút bấm của cửa sổ xin quyền Push Notification sao cho phù hợp với trang Web của bạn. Bạn cũng có thể chỉnh cách mà thông báo đẩy hiển thị trên màn hình của máy tính.

Tùy chỉnh nâng cao

Nếu trang web của bạn được phát triển theo SPA (Single Page Application), bạn hãy cung cấp đường dẫn tới Service Worker của bạn.

4. Nhấp chuột vào nút Gửi để lưu lại các cấu hình và lấy mã nguồn để gắn vào web của bạn theo hướng dẫn ở phần bên dưới.

3. Đặt mã nguồn trên trang web của bạn

Sau khi bạn click vào nút Gửi ở bước 2.4 (như hướng dẫn phần trước), bạn sẽ thấy hộp thoại hiện ra như sau:

Bước 1: Thêm đoạn mã nguồn kích hoạt dịch vụ Pushdy SDK vào trang web của bạn

Có 2 cách để thực hiện bước 2, bạn hãy chọn 1 cách phù hợp với trang web của mình.

Cách 1: Gắn mã qua Google Tag Manager (GTM): Ưu điểm của cách này là bạn không cần phải sửa mã nguồn trên trang web của bạn. Và sau này, các đoạn mã để tracking hành vi người dùng cũng sẽ được thực hiện trên GTM thay vì bạn phải thao tác vào các file mã nguồn website của bạn, tránh rủi ro về các lỗi phát sinh do sửa mã nguồn website.

Cách làm: Nếu website của bạn chưa tích hợp GTM thì bạn hãy làm theo các bước hướng dẫn tại đây để tích hợp GTM vào website của bạn trước.

Bước 2.1.1: Đăng nhập trang Google Tag Manager và vào vùng chứa website của bạn:

Bước 2.1.2: Vào menu Thẻ và tạo một thẻ mới:

Bước 2.1.3: Chọn loại thẻ như hình bên dưới:

Bước 2.1.4: Sao chép đoạn mã khởi tạo Pushdy trong hộp hướng dẫn tích hợp Web (Bước 1) như hình bên dưới:

Sau đó dán vào hộp HTML trên trình quản lý GTM như hình dưới:

Bước 2.1.5: Click vào hộp Kích hoạt để chọn trình kích hoạt là "All Pages" như hình dưới:

Bước 2.1.6: Lưu thẻ "Pushdy SDK":

Bước 2.1.7: Xuất bản thẻ như các hình mô tả bên dưới:

Như vậy là bạn đã tích hợp thành công Pushdy SDK vào website của bạn theo cách sử dụng Google Tag Manager.

Cách 2: Gắn mã trực tiếp vào trang web: Ưu điểm của cách này là thực hiện nhanh, tuy nhiên sẽ cần phải thao tác với mã nguồn của trang web và có nguy cơ gây lỗi trang web nếu quá trình gắn mã có sai sót.

Cách làm: Bước 2.2.1: Sao chép đoạn mã khởi tạo Pushdy trong hộp hướng dẫn tích hợp Web (Bước 1) như hình bên dưới:

Bước 2.2.2: Dán đoạn mã Javascript đã sao chép vào ngay trước thẻ </head> trên trang web của bạn. Hãy đảm bảo mọi trang đều được gắn đoạn code này.

Như vậy là bạn đã tích hợp thành công Pushdy SDK vào website theo cách thêm mã trực tiếp vào mã nguồn trang web của bạn.

Bước 2: Tải lên hosting của bạn tệp Pushdy SDK

Download tệp Pushdy SDK với tên là sw.js và upload lên hosting của bạn tại thư mục gốc (root directory). Nếu bạn không sử dụng tính năng Web Push thì bạn không cần thực hiện bước này.