Mục lục nội dung
Tạo thông báo đẩy (Push Notification) cho website là một trong những tính năng mới phát triển khoảng 2 năm trở lại đây.
Thông báo đẩy cho website trở thành một xu hướng Remarketing mới cho các website, blog,…để tăng tương tác của người dùng web. Chúng ta hãy cùng tìm hiểu một tý trước khi thực hiện nhé.
Tính năng thông báo đẩy (Push Notification) là gì ?
Là một tính năng thông báo hiển thị ở góc dưới cùng bên phải của trình duyệt hiển thị các thông báo mới về một chương trình khuyến mãi, một bài viết mới,… cho website và đặc biệt hơn nó còn hiển thị thông báo trên cả nền tảng thiết bị di động.
Với tính năng này sẽ giúp người dùng không bỏ lỡ những chương trình khuyến mãi hay theo dõi những bài viết hay được cập nhật thường xuyên từ các website hay blog mà họ thường xuyên theo dõi.
Những công cụ tạo thông báo đẩy miễn phí cho website
Về công cụ thì ở đây có khá nhiều nhà cung cấp công cụ tạo thông báo đẩy miễn phí cho website hay blog nhưng nổi bật hơn cả vẫn là OneSignal và PushCrew.
Các bạn có thể thao khảo công cụ OneSignal tại địa chỉ website https://onesignal.com/
Đối với công cụ OneSignal thì mình đã có một bài viết hướng dẫn rồi bạn có thể xem lại link bên dưới.
Bài viết: Cách tạo thông báo khi có bài viết mới cho blog
Và thao khảo PushCrew tại địa chỉ website https://pushcrew.com/
Hiện tại thì PushCrew đã hỗ trợ tạo thông báo cho các trình duyệt và hệ điều hành sau:
+ Trình duyệt Chrome
+ Trình duyệt Safari
+ Trình duyệt FireFox
+ Trình duyệt Opera
+ Điện thoại đi động sử dụng hệ điều hành Adroid
Hơi tiếc là chưa hỗ trợ cho điện thoại di động sử dụng hệ điều hành IOS nhé. Chắc có lẽ sẽ cập nhật sau.
Trong bài viết này thì dĩ nhiên mình sẽ hướng dẫn cách tạo thông báo đẩy cho website với công cụ còn lại là PushCrew. Bắt đầu nhé !
Hướng dẫn tạo thông báo đẩy (Push Notification) cho website với PushCrew
Bước 1: Đăng ký tài khoản tại website PushCrew
Các bạn truy cập vào link https://pushcrew.com/ và click vào TRY FOR FREE hoặc SIGN UP FOR FREE TRIAL
Tiếp theo các bạn điền thông tin theo mẫu để đăng ký tài khoản gồm:
+ Work Email: Nhập email của bạn
+ Password: Nhập mật khẩu của bạn (Điều kiện mật khẩu: ít nhất 8 ký tự trở lên; bao gồm vừa ký tự viết hoa, ký tự viết thường, số và ký tự đặc biệt)
+ Full Name: Nhập tên đầy đủ của bạn.
+ Phone No.: Chọn đầu số Việt Nam (+84) và nhập số điện thoại của bạn bỏ số ) đầu tiên.
+ Chọn phương thức website của bạn: http:// hoặc https:// (Có chứng chỉ bảo mật) ở đây mình chọn https:// vì web mình đã cài nhé. Lưu ý chọn đúng theo phương thức website của bạn nhé.
check vào ô “I’d like to stay in touch through digital communication from PushCrew” sau đó click vào CREATE FREE ACCOUNT nhé !
Đăng ký thành công bạn sẽ nhận được 1 email thông báo và popup thông báo như hình và bạn sẽ được chuyển đến giao diện quản lý sau 3s.
Bước 2: Cập nhật thông tin tài khoản PushCrew
+ Name of your company (Company Name / Blog Name): Nhập tên công ty hoặc tên Blog của bạn
+ How do you plan to use PushCrew?: Kế hoặc của bạn khi sử dụng PushCrew là gì ? Chọn 3 tùy chọn gồm:
(1) E-commerce / I want to sell more on my website: Thương mại điện tử / Tôi muốn bán nhiều hơn trên website của mình
(2) Publisher / I want more visitors on my website: Nhà xuất bản / Tôi muốn có nhiều khách truy cập website của tôi
(3) Other: Mục đích khác
+ Subdomain: Tên miền con. Nếu web bạn không hỗ trợ https:// thì bạn nhập subdomain của mình vào và PushCrew sẽ thông báo theo dạng subdomain.pushcrew.com. Còn nếu web bạn có hỗ trợ https:// thì có thể sử dụng tên miền của mình.
Ở đây mình sẽ chọn mục số (2) vì mình là một Publisher và là một Blogger nhé thì quá rõ ràng mục đích rồi 
Sẽ có 1 thông báo gửi về nhắc nhở nếu bước đăng ký bạn chọn https:// – Đáng lẽ ở bước 2 không cần nhập subdomain mà vẫn bắt nhập 
Đừng lo nếu web bạn không có https:// thì PushCrew sẽ tự tạo tên miền con đã nhập ở bước 2 để thông báo nhé. Ví dụ của mình là: https://trinhcongtri.pushcrew.com/
Bước 3: Tiến hành cài đặt thông báo đẩy PushCrew (Push Notification) lên website.
Ở đây Push có hỗ trợ rất nhiều nền tảng website nhưng trong phạm vi bài viết mình chỉ hướng dẫn 2 nền tảng website phổ biến hiện nay là php framework và CMS WordPress
Đầu tiên các bạn copy đoạn mã ở giao diện DashBoard trong mục "Step 1: Install PushCrew Smart Code" như hình:
Trường hợp 1 – Website code PHP
Các bạn sử dụng phần mềm Filezilla truy cập vào hosting chứa website thông qua tài khoản FTP của hosting theo đường dẫn /public_html (/private_html – nếu có https://)
Một số trường hợp dùng song song thì có cả 2 thư mục /public_html và /private_html nên vào cái nào cũng vậy nhé, giống như shortcut trên windows ấy. Các bạn xem hình bên dưới:
Hoặc /domains/trinhcongtri.com/public_html (/domains/trinhcongtri.com/private_html – nếu có https://) (Trường hợp hosting bạn chạy nhiều website trên 1 hosting theo tên miền riêng).
Tiếp theo các bạn tìm và mở file index.php sau đó dán đoạn code trên vào trước thẻ đóng </head> và Lưu lại.
Nếu website bạn đã có https:// thì tại Tab Smart code phía dưới đoạn
Tiếp theo, tại giao diện DashBoard của PushCrew các bạn cuộn chuột xuống mục Step 2: Customize Opt-in và click vào Customize Opt-in để chuyển sang Tab Cài đặt.
Tại tab Otp-in: Đây là tab hiển thị thông tin cài đặt hiển thị thông báo đẩy có thể cài đặt sau. Các bạn chuyển sang chọn tab Smart Code như hình:
Chuyển tài khoản (tên miền website) sang HTTPS
Tại tab Smart Code > Mục HTTPS Implementation > Click Convert như hình:
Tiếp theo, bạn có thể thay đổi hình ảnh logo của mình và click Next
Tiếp theo, các bạn lưu ý ở bước này làm cho đúng nhé
(1) Click vào HTTPS-Files.zip để tải thư mục file nén về máy tính
Sau nó giải nén thư mục vừa tải về xong trong đó có 3 file như hình:
(2) Tải 3 file vừa giải nén trên lên thư mục gốc tên miền website của bạn là /public_html hoặc /private_html
(3) Tại giao diện Convert to HTTPS click chọn Done
Nếu làm đúng các bước trên bạn sẽ nhận được thông báo chuyển sang HTTPS thành công !
Vậy là bạn đã tạo thông báo đẩy thành công cho website của mình rồi đấy. Hãy vào tên miền của bạn để hưởng thành quả nào !
Trường hợp 2 – Website WordPress
Blog mình đang sử dụng WordPress nên sẽ hướng dẫn các bạn luôn và ở đây mình cũng làm theo 2 cách thủ công và dùng plugin.
#1: Sử dụng Plugin
Cái này thì quá dễ làm rồi chỉ cần làm theo trình tự sau là ok nhé:
+ Đăng nhập vào trang quản trị WordPress > Chọn Plugin > Chọn Cài mới
+ Gõ vào ô tìm kiếm Plugin chữ ‘PushCrew’ và tiến hành Cài đặt và Kích hoạt Plugin
+ Tiếp theo chọn mục Cài đặt WordPress và chọn PushCrew
+ Bạn sẽ được chuyển đến giao diện cài đặt của PushCrew và ở đây bạn cần Your PushCrew Account ID
+ Để lấy Your PushCrew Account ID bạn chỉ cần quay là giao diện Dashboard của PushCrew trên trình duyệt web > Chọn tab Account > Chọn Copy Account ID
+ Dán Account ID vào ô Your PushCrew Account ID và click Lưu thay đổi
+ Hoàn tất, bạn đã tạo thông báo đẩy hoàn tất cho website của bạn rồi đó. Rất dễ phải không nào. Vào tên miền của mình để kiểm tra thành quả.
#2: Sửa và upload code thủ công
Cách làm tương tự như code php nhưng đường dẫn sẽ dài hơn so với code php nhé:
Truy cập vào hosting với FileZilla như trên theo đường dẫn: /public_html/wp-content/themes/trinhcongtri-child
trinhcongtri-child là tên theme WordPress của mình nhé. Đó là child theme WordPress. Còn tùy theme của bạn đang sử dụng mà chọn đúng tên theme nhé.Tiếp theo các bạn tìm và mở file header.php lên và dán đoạn code js ở trên vào trước thẻ đóng </head> và Lưu lại.
Đối với những bạn không rành về code nên ngại sửa code trực tiếp sợ phát sinh lỗi thì có thể làm theo cách sau:
+ Đăng nhập vào Trang quản trị WordPress > Chọn Giao diện > Chọn Sửa
+ Nhìn sang bên phải – tầm giữa màn hình các bạn Chọn Theme WordPress mình đang sử dụng > Tìm và chọn file header.php
header.php nhé. Mình sử dụng Child Theme WordPress nên nó ít file tìm nhanh, còn bình thường cuộn thanh trượt xuống để kiếm nhé.+ Nhìn sang bên trái nội dung file header.php tương tự các bạn thêm đoạn code đã copy bên PushCrew dán vào trước thẻ đóng </head> và Click Cập nhật tệp tin
Sau đó các bạn làm tương tự bước tiếp theo ở mục Website code PHP ở trên từ mục chuyển sang HTTPS để tải file về, giải nén và upload lên thư mục gốc của website trên hosting là /public_html hoặc /private_html là xong rồi đấy.
Một số cài đặt Cơ Bản thông báo đẩy với PushCrew
Để thay đổi một số cài đặt cơ bản đối với tính năng thông báo đẩy với PushCrew các bạn truy cập vào PushCrew.
Tại giao diện DashBoard > Chọn bánh xe Cài đặt ở góc phải màn hình.
Cài đặt tài khoản (Account)
Bạn có thể thay đổi múi giờ (Time Zone) đúng với múi giờ Việt Nam là (GMT+07:00) Asia/Saigon
Nếu bạn muốn có 1 link hủy đăng ký đối với những người đã đăng ký nhận thông báo ở góc phải dưới cùng màn hình thì check vào ô Add a one-click unsubscribe link for your subscribers và bấm Save (Lưu)
Cài đặt các thông tin thông báo đẩy
Các bạn chuyển sang tab Opt-In để cài đặt
Bước 1: One-Step Opt-in (HTTPS only) One click to subscribe for notifications
Hộp thoại Display Opt-in Box có các tùy chọn bạn có thể cài đặt theo ý mình:
+ Immediately after the visitor lands on website: chọn tùy chọn này ngay khi khách truy cập vào website sẽ hiển thị form đăng ký nhận thông báo.
+ After ...... seconds: chọn tùy chọn này khách truy cập vào website sau bao nhiêu giây sẽ hiển thị form đăng ký nhận thông báo.
+ Allow subscribers to opt-out from data tracking: chọn tùy chọn này cho phép người đăng ký nhận thông báo từ chối theo dõi dữ liệu theo quy định của của GDPR.
+ Enable Opt-in for Mobile: chọn tùy chọn này cho phép thông báo đẩy trên thiết bị di động.
+ Add a bottom bar to tell people to subscribe for notifications: chọn tùy chọn này sẻ hiển thị một thanh thông báo mép dưới màn hình nhắc nhở mọi người đăng ký nhận thông báo.
Bước 2: Two-Step Opt-in Build context before asking to subscribe
Tab Appearance (Thông tin xuất hiện)
Đây là bước cài đặt các thông tin xuất hiện của form thông báo đẩy như Logo, Title, Subtitle, Disallow Button Text và Allow Button Text, Title thông báo trên mobile và một vài cài đặt tương tự ở bước 1.
Bạn tự nhập thông tin và nội dung theo ý mình rồi click Save (Lưu) là Xong.
Tab Advanced (Cài đặt nâng cao)
CHILD WINDOW SETTINGS (Cài đặt cửa sổ con)
+ Thay đổi thông tin Opt-in Text (Text thông báo xuất hiện) và Offer Text (Text để xuất giới thiệu)
CHICKLET SETTINGS (Cài đặt nút đăng ký phụ bên phải màn hình)
+ Chicklet position on Web: Chọn vị trí xuất hiện của nút đăng ký phụ trên Web.
+ Chicklet position on Mobile: Chọn vị trí xuất hiện của nút đăng ký phụ trên Mobile.
+ Chicklet Text: Tên hiển thị trên nút đăng ký phụ.
+ Background Color: Màu nền nút đăng ký phụ.
+ Text Color: Màu chữ nút đăng ký phụ.
Các bạn tùy chỉnh theo ý mình và click Save (Lưu) để hoàn tất.
Và còn một số cài đặt khác nữa các bạn từ khám phá thêm, tất cả đều cho xem trước khi lưu nên tự do khám phá nhé !
Chúc các bạn thành công !
Có khó khăn gì trong quá trình thực hiện các bạn để lại bình luận bên dưới mình hỗ trợ thêm. Cảm ơn
Copy vui lòng ghi rõ nguồn bài viết được viết bởi https://trinhcongtri.com
 cho website với PushCrew dễ dàng và chi tiết ✅ Tạo thông báo đẩy cho WordPress bằng plugin đơn giản,){kind=link}