Trang chủ Công cụ Cách tạo thông báo đẩy (Push Notification) cho WordPress với OneSignal

Cách tạo thông báo đẩy (Push Notification) cho WordPress với OneSignal

bởi Thạch Phạm
90 bình luận 8158 views

Thông báo đẩy (Push Notification) hiện nay đang được rất nhiều website áp dụng để gửi thông báo quan trọng cho các khách hàng truy cập vào website ngay trên tại trình duyệt, điều này trở nên phổ biến khi FireFox và Google Chrome bắt đầu hỗ trợ kiểu thông báo này, vì vốn thông báo đẩy được hình thành trên các hệ điều hành điện thoại trước.

Nhìn chung việc sử dụng thông báo đẩy có lợi và tối ưu hơn là các hình thức gửi thông tin khác như Email hay tin nhắn, bởi vì nó đập ngay vào mắt người dùng khi họ mở trình duyệt hoặc mở thiết bị di động. Nếu bạn thực hiện kinh doanh trên website thì nó là một cách rất tối ưu để mời gọi khách hàng quay trở lại website.

pn-chrome

Ví dụ Push Notification trên Google Chrome

Có rất nhiều công cụ và dịch vụ khác nhau để tạo các thông báo đẩy này cho website, nhưng nếu bạn sử dụng WordPress và muốn hoàn toàn miễn phí thì hãy sử dụng dịch vụ OneSignal.

Đặc điểm của OneSignal

Dịch vụ OneSignal không chỉ hoàn toàn miễn phí, mà nó còn hỗ trợ khá nền tảng mà bạn có thể cài đặt trên cùng 1 website, bao gồm:

  • Apple iOS
  • Google Android
  • Windows Phone 8.0
  • Windows Phone 8.1
  • Amazon Fire
  • Mac OS X
  • Google Chrome Extension
  • Google Chrome & FireFox
  • Safari

Bên cạnh đó, nó cũng hỗ trợ rất nhiều chức năng hay như:

  • Tự soạn thông báo đẩy theo ý thích.
  • Tùy chọn tự gửi thông báo đẩy khi đăng bài mới trên WordPress.
  • Hẹn giờ gửi thông báo.
  • Tạo segment lọc người dùng đăng ký.
  • Hỗ trợ template thông báo.
  • Hỗ trợ A/B Testing.
  • Có plugin cho WordPress.

Vì vậy đó là lý do mà mình chọn OneSignal và cũng khuyến khích các bạn dùng nó.

Hướng dẫn cài đặt OneSignal

Đầu tiên bạn truy cập vô địa chỉ onesignal.com và chọn Sign Up Free.

Đăng ký tài khoản OneSignal

Đăng ký tài khoản OneSignal

Đăng ký xong bạn hãy đăng nhập vô hệ thống và chọn Add a new app.

onesignal-02

Rồi đặt tên app bất kỳ.

onesignal-03

Sau khi tạo xong, các bạn chọn Website Push ở phần chọn nền tảng.

onesignal-04

Sau đó chọn Google Chrome & Firefox, yên tâm là các tùy chọn khác chúng ta sẽ bật lên sau.

onesignal-05

Bước này các bạn sẽ cần nhập một số thông tin sau:

onesignal-09

  • Site URL: Địa chỉ website của bạn.
  • Google Server API Key: Cái này bạn xem ở dưới để biết cách lấy Google Server API Key.
  • Default Notification Icon URL: Đường dẫn icon hiển thị trên thông báo, bạn có thể bỏ link logo vào.
  • Choose Subdomain: Đặt tên subdomain cho app của bạn ở OneSignal.
  • Google Project Number: Hay còn gọi là Sender ID, xem ở dưới để biết cách lấy Google Project Number.
Cách lấy Google Server API Key và Google Project Number

Hãy truy cập vào đường dẫn này. Sau đó tạo một Google App mới.

onesignal-06

Sau đó chọn Enable Cloud Messaging.

onesignal-07

Ok, và bây giờ bạn đã có các thông tin mà bạn cần như Google Server API KeySender ID (trong thiết lập OneSignal nó gọi là Google Project ID). Nhớ copy các thông tin này lại chút nữa chúng ta cần dùng đến.

onesignal-08

Bây giờ có thể tắt và thoát ra ngoài được rồi.

Tiếp tục chọn WordPress nếu bạn dùng website WordPress.

onesignal-10

Tiếp tục tới bước này, bạn hãy vào website WordPress của bạn và cài plugin OneSignal – Free Web Push Notifications để nhúng nó vào website. Khi cài đặt, bạn hãy điền Rest API Key và App ID của OneSignal cùng với Google Project ID (Sender ID) vào.

onesignal-11

Cài plugin xong vào WP-Admin -> OneSignal Push mà điền các thông tin này vào.

onesignal-12

Các thiết lập OneSignal bên trong website WordPress của bạn phải được thiết lập đầy đủ nha, kể cả mấy dòng chữ vì nếu không điền hết nó không kích hoạt được. Đặc biệt ngay phần Popup Settings, bạn phải bấm Preview Popup thì mới hoàn thành thiết lập được.

Sau khi thiết lập xong, bạn ra trang chủ và tự mình đăng ký nhận thông báo để xác nhận. Lưu ý nếu website có cài cache thì xóa cache đi nhé.

onesignal-14

Chọn Tiếp Tục và chọn Allow.

onesignal-15

Bây giờ quay lại trang OneSignal và ấn nút Check Subscribed Users, sau đó chọn Next.

onesignal-16

Kế tiếp là ấn nút Send Test Notification. Nếu bạn nhận được thông báo đẩy thử nghiệm, hãy click vào nó.

onesignal-17

Sau khi click vào thông báo thử nghiệm, nó sẽ dẫn ra một trang báo bạn đã thiết lập thành công.

onesignal-18

Quay lại trang OneSignal và ấn nút Check Notification Status để hoàn tất.

Cách gửi thông báo đẩy khi có bài viết mới

Khi bạn soạn bài, hãy nhìn bên tay phải của trang soạn thảo bài viết sẽ thấy phần tùy chọn gửi thông báo khi đăng bài mới, click vào để gửi thông báo khi bạn đăng lên.

onesignal-19

Tương tự với việc cập nhật bài viết cũ nhé.

Cách gửi thông báo tùy chọn

Để gửi thông báo tùy chọn bạn cần phải đăng nhập vào OneSignal và chọn New Message.

onesignal-20

Ở đây bạn có thể soạn tiêu đề và nội dung thông báo. Nếu bạn muốn chèn link khi người dùng click vào thông báo thì nhập ở phần Options nhé.

onesignal-21

Soạn thông báo

Cách kích hoạt những nền tảng khác

Mặc định khi đăng ký thì bạn chỉ chọn một nền tảng gửi thông báo thôi. Nhưng OneSignal còn hỗ trợ rất nhiều nền tảng khác nếu họ truy cập vào website bạn, ví dụ nếu người dùng Android vào website bạn thì bạn có thể bật tính năng thông báo đẩy của Android.

Để kích hoạt, bạn vào phần App Settings trong trang chủ OneSignal và ấn nút Configure của từng nền tảng bạn muốn kích hoạt.

onesignal-22

Để xem hướng dẫn chi tiết của từng nền tảng kèm hình ảnh, bạn hãy truy cập vào trang OneSignal Documentation nhé.

Ok, bây giờ website của bạn đã có hỗ trợ thông báo đẩy rồi đó. Nhớ là hãy sử dụng có ý thức, đừng lạm dụng để spam làm ảnh hưởng đến những website khác có dùng thông báo đẩy nhé.

Một số dịch vụ thông báo đẩy khác

Nếu bạn muốn có nhiều lựa chọn ngoài OneSignal thì dưới đây là một số dịch vụ nổi bật bạn nên biết:

90 bình luận
0 0 vote
Article Rating
guest
90 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments
gymdayroi

Làm sao để đẩy được trên MObile vậy anh.

Lequoctuan

Hay quá chính sát

Lequoctuan

Thấy cũng hay nên tảng cao

gymdayroi.com

Cảm ơn bác. Đúng cái em đang cần ạ. Có cách nào để đẩy được trên iphone không bác.

Có cách nào để nó chỉ hiển thị 1 bước đăng ký ở trên góc bên trái không Thạch, hiển thị luôn cái khung “chặn – đồng ý” đó Thạch mà ko cần phải đăng ký qua bước đầu
Thank !!

hongphucbl@gmail.com

Mình làm y chang như các bước mà vẫn bị lỗi này: We haven’t detected any subscribed users yet for this platform. Try some of the tips below, or contact us for support. Open the Developer Tools Console (Right Click on page -> Inspect -> click the Console tab) Check for OneSignal error messages on the Developers Tools Console Verify that the OneSignal App ID is correct in your app or site. (ra trang web hiển thị click subscribe ngòn lành, vào check thì ko có user nào cả @@) . Bác góp ý em với

Học Luật

Điền mọi thông tin rồi mà nó báo “OneSignal Push: Your setup is not complete. Please follow the Setup guide to set up web push notifications. Both the App ID and REST API Key fields are required.”

vtkong

Cám ơn bạn thạch nhiều, để tớ thử test xem

Le Son

Anh có thể hướng dẫn cách hiện trên safari của iphone không ạ?
Em làm nhưng chỉ hiện trên chrome thôi ạ!

Thế Anh

Cái này hay nè. Chưa test trên fifox và cốc cốc nữa.

xuân bảo

website của mình có 3 kí tự ckn.vn , mà onesigner yêu cầu web có 4 kí tự trở lên, không biết có cách nào khắc phục hoặc sử dụng plugin nào khác thay thế đc không ? nhờ Thạch Phạm giải đáp giùm

Học Luật

Thêm www vô bạn ơi

Thế Anh

Website bác bán hàng thì không cần làm thông báo đâu. Nghiên cứu thử giao diện camerathaiha.net nhé.
Nếu ưng em để giá rẻ cho. Liên hệ em qua mail anhpt.vnn@gmail.com

Nguyen

Làm sao xuất file thông tin người dùng nhận thông báo nhỉ ?

Eco Bags Việt Nam

Cảm ơn Thạch rất nhiều, mình đã làm được. Bạn đã hướng dẫn rất kỹ.

tranbinh

Sao của mình ở safari hiện ở chrome không hiện nhỉ

Dương

Sao không ai giúp mình vụ này thế nhỉ

Dương

Của mình sau khi nhấn vào icon thông báo nó cứ nhảy popup tới trang subdomain
không thể nào tìm ra chỗ tắt. xin a chỉ giáo
thanks

Đồng

Thạch Phạm viết thêm hướng dẫn cài đặt thông bào đẩy trên IOS đi 🙂

tính

anh ơi cho em hỏi sao e cứ click vào chuông là nó hiện lên cửa sổ mới vậy anh

anh tuan

Khong lam duoc! khong thay cho chon wordpress o dau ca!

Vũ Minh Chiến

Anh Thạch cho em hỏi làm xóa Xóa dòng Power By oneSignal ạ!

Nguyen Van

Viết hay quá, cám ơn tác giả.

Khỏe

Cảm ơn anh nhiều, hay quá.

trung

Làm sao hẹn giờ cố định gửi thông báo vậy Thạch

Nhựt Đỗ

Này hay lắm, Cám ơn Thạch Phạm

The Golden Palm

mong được đọc thêm bài của thạch

Roman Plaza

có ai biết cách chuyển sang tiếng việt không?

Lê Tòng

rất hay cảm ơn bạn

Duy Nam

Chuyển sang tiếng Việt thế nào anh Thạch nhỉ?

Kiên Nguyễn Blog

sau khi chuyển hướng http sang https thì cái onesignal.com này bị trùng lặp thông báo, tức là nó hiển thị ra 2 thông báo cùng lúc sau khi mình xuất bản 1 post. Ngoài ra, lượng user đăng ký cũng bị x2. Bây giờ khắc phục sao Thạch nhỉ ?

Billy

Cảm ơn thach phạm nhiều nhé. Mình tìm nó mấy nay mà không ra.

Nam Đạt

Bạn ơi cho mình hỏi mình mình làm đúng các bước rồi, nhưng khi nhấn lưu trong Plugin OneSignal thì nó bị lỗi trang : Internal Server Error The server encountered an internal error or misconfiguration and was unable to complete your request. Please contact the server administrator at webmaster@chiasetop.com to inform them of the time this error occurred, and the actions you performed just before this error. More information about this error may be available in the server error log. Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.… Xem thêm »

Công Toàn

Chào ThachPham,

Mình cũng bị lỗi như trên, khi nhấn Save trong plugin thì server báo lỗi 503, phải clear cache trình duyệt đi hoặc chuyển qua trình duyệt khác mới vào lại admin và blog được. Mình đã thực hiện đi thực hiện lại mấy lần mà không được, cứ vẫn lỗi 503 internet server error không.

Có cách nào thực hiện được không nhỉ?

Công Toàn

Đã sửa lỗi được rồi, do bản PHP mình đang dùng là 5.4, phải nâng lên 5.6 mới không bị lỗi 503.

Công Toàn

Kiểm tra lại phiên bản PHP nha bạn, phải là 5.6 trở lên thì mới work ok

Cảnh Nguyễn

e ko làm đc bác ạ 🙁

Nam Ngô

Bạn bị lỗi cái khúc gần cuối đúng không

Hùng Đặng

Cám ơn Thạch, mình mới làm xong cho site. Chạy khá ổn, hy vọng sẽ có nhiều người đăng ký

Hoa Sen Vàng

Chuẩn Man, nếu làm theo y hướng dẫn cụ thể thì thành công 100% – cám ơn Thạch nhé (có một lưu ý nhỏ : nếu FF của bạn không thể Verify hoặc gặp thông báo: this website does not supply indentify … tốt nhất bạn nên chuyển sang Chrome để giải quyết bước xác nhận này “Check Subscribed Users” )

Văn Thắng Blog

Bài viết của anh hay lắm.

Lan Bui

Ok. Mình đã thử ở trên blogger. Nhưng không có nhiều tính năng như wordpress. mình thử mở trình duyệt mới để push. Trình duyệt đòi allow thì mới push được đúng không ad.

Thể Hình Channrl

Bước hướng dẫn em kích hoạt trên mobile với 🙁

Trần Vĩnh Khon

Em đã tạo được và kích hoạt mọi nền tảng trừ thằng Apple

Thể Hình Channrl

Bác hướng dẫn em kích hoạt trên mobile với ạ

Duy Pham

mình cũng vậy tất cả các nền tảng đều chơi tốt, hoạt động rất ok. Trừ thằng Apple muốn chửi thề với nó, đòi đủ thứ. Chung sống hoà bình hok chịu lại muốn tách biệt bới thế giới.

CươngPjh

Cảm ơn anh Thạch, Anh có thể hướng dẫn tích hợp trên các nền tảng khác nữa không anh? Ví dụ em có một website truyện mà làm cập nhật liên tục các chương mới trên nền tảng Android thì làm thế nào ạ. Rất mong anh có thêm một bài viết tích hợp các nền tảng khác nữa. Tks anh.

Lang

cho mình hỏi: Khi mình vào bước “Bây giờ quay lại trang OneSignal và ấn nút Check Subscribed Users, sau đó chọn Next.” trang web OneSignal báo lỗi “We haven’t detected any subscribed users yet for this platform. Try some of the tips below, or contact us for support. Open the Developer Tools Console (Right Click on page -> Inspect -> click the Console tab) Check for OneSignal error messages on the Developers Tools Console Verify that the OneSignal App ID is correct in your app or site.” Mình ko biết là làm sao bước nào? bạn xem giúp mình… Xem thêm »

Tibi Nguyễn

Bữa thấy bài này là lưu lại, nhưng giờ làm thử cho site chạy thấy ok. Chỉ là nó không hiện ra bảng popup gợi ý đăng ký như PushCrew, như vậu được cái người dùng bớt khó chịu, nhưng lượng đăng ký chắc là sẽ ít hơn.

Hỏi thêm cái, Thạch có cách nào cho nó popup ra luôn không? Mình mò mà không thấy ^^

Hải Anh

Plugin này sẽ hiển thị trên điện thoại như tin nhắn facebook ah Thạch. Có thể gửi tin nhắn thông qua plugin được không Thạch

Tuyến

Mình bấm vào “Cách lấy Google Server API Key và Google Project Number” thì nó ra lại bài hiện tại, không ra bài cách lấy google API với Number

Ngọc Thảo

Cái này hay nè, áp dụng cho site thường xyên ấp tin hấp dẫn 😛

Kiên Nguyễn Blog

Sau khi cài đặt xong plugin OneSignal Push, mình ko thẤy phần thiết lập nào để mà nhập các thông số là sao nhỉ. Đã xoá đi cài lại mấy lần rồi mà ko đc 🙁

Kiên Nguyễn Blog

Của mình xong khi cài đặt xong nó lại không có mới lạ chứ. Mình cài đặt plugin thủ công, sau khi cài đặt xong chả thấy biểu tượng gì cả, đã xóa cache và gỡ ra cài đặt lại mấy lần rồi đều ko được. Bó tay

Tran Nghia Phuong

Dear Anh Thạch Phạm !
Plugin comment này có dùng cho web ngoài được không ạ. Plugin này đẹp quá.
Anh HD giúp .

Thanks a

Phúc Thuận

anh Thạch cho em hỏi cái này nhé! ví dụ em có domain chính là domain.com giờ em tạo 1 domain dạng m.domain.com thì làm sao để blog m.domain.com sẽ dùng chung database dữ liệu với blog domain.com ( tức là khi trên blog domain.com có bài mới hay comment mới thì blog m.domain.com cũng có ấy) nhưng blog m.domaon.com lại có thể quản lý được giao diện và các plugin riêng được nhỉ?

Trần Cao Dũng

Chào Thachpham !
Bài viết hay và rất có ích cho những ai yêu mến wp.
Xin phép bạn cho tôi được share bài viết này, tôi sẽ trích dẫn đầy đủ tên tác giả.
Xin cảm ơn.

Thành Thái

Thấy thachpham luôn đi đầu cho các công nghệ liên quan wp nhề 🙂

Tân Nguyễn

Có cách nào hiện thông báo luôn mà không cần phải ấn vào icon không bác, giống như facebook vậy đó

TINKA

cảm ơn bạn đã trở lại. mình đang muốn nhờ bạn giúp 1 ít việc, sẽ liên hệ bạn sau.
chứ liên hệ qua trang diễn đàn quá bất tiện.

90
0
Would love your thoughts, please comment.x
()
x