Browser Push Notifications Dengan WordPress

Apr 14, 2016 | WordPress | 1 Komen

Pernah dengar tentang “Push Notifications”? Push Notifications adalah teknologi yang membolehkan anda menghantar mesej terus kepada handphone seseorang. Untuk menggunakan fungsi “Push Notifications”, anda perlu membina Mobile Apps. Sekarang, kita boleh menggunakan Browser Push Notifications Dengan WordPress.

Teknologi yang lebih kurang sama tapi lebih berbisa.

Apa Itu “Browser/Web Push Notification”?

“Browser Push Notifications” membolehkan anda menghantar mesej terus kepada browser seseorang. Tidak kira sama ada di Desktop, Tablet ataupun Mobile. Anda juga tidak perlu membina sebarang “Mobile App” untuk menghantar “Browser Push Notifications”.

Google Chrome telah boleh menerima “Web Push Notifications” semenjak awal 2015. Mozilla Firefox pula telah mempunyai sokongan semenjak awal 2016.

Anda seorang usahawan? Anda ada website WordPress? Tahniah! Anda kini sudah boleh menggunakan Browser Push Notification untuk menghantar mesej kepada pelawat website anda.

Sekiranya ini first time anda singgah di laman web den HadeeRoslan.my ini, tentunya anda ada melihat popup seperti berikut.

Web Push Notification HTTPS Default Prompts In Firefox and Chrome

Itulah yang dinamakan “Browser Push Notification Prompt”. Setiap pelawat akan dapat melihat popup berkenaan. Anda juga mungkin ada melihat lambang loceng berwarna merah di kawasan bawah kanan seperti berikut.

Web Push Notification OneSignal Bell Icon 745x419

Itulah dia cara bagaimana anda boleh mengumpul list untuk “Browser Push Notification” anda.

Macam mana pula rupa mesej “Browser Push Notification” itu? Bila anda menghantar mesej melalui “Browser Push Notification”, mesej anda akan dipaparkan pada desktop subscriber anda seperti berikut:

Web Push Notification OneSignal Pushed Message

Buat subscriber yang subscribe menggunakan telefon mobile mereka pula, akan menerima Push Notification seperti berikut:

Web Push Notification OneSignal Sample Mobile Push

Sekiranya mereka klik pada mesej berkenaan, subscriber anda itu akan dibawa ke laman web yang anda tetapkan. Subcriber juga tidak semestinya sedang melawat website anda untuk mendapat mesej. Mereka tetap akan menerima mesej walaupun tidak melawat website anda pada hari itu.

Menarik? Tertarik? Strategi pemasaran yang memang “Da Bomb!” Baiklah, jom ikut den bongkarkan cara nak pasang Browser Push Notification ini pada salah satu website WordPress den sendiri – KodeeXII.Net.

Apa DiPerlukan Untuk Menggunakan Browser Push Notifications Dengan WordPress?

Sebelum anda boleh setup Browser Push Notification pada website WordPress anda, tolong pastikan anda sudah bersedia dengan:

  1. WordPress yang update dengan core/theme/plugin terkini.
  2. WordPress yang siap dengan SSL dan menggunakan HTTPS – kalau belum ada SSL, sila rujuk post ini untuk pasang SSL secara percuma dan mudah.
  3. Install plugin OneSignal.com
  4. Google Cloud Messaging API
  5. Register akaun dalam OneSignal.com

Kenapa OneSignal.com?

Terdapat pelbagai penyedia sistem Push Notification untuk WordPress. Antara yang den dah tengok:

  1. Push Crew
  2. Push Engage
  3. Push Response
  4. One Signal

Kesemuanya menyediakan sistem Browser Push Notification yang boleh digunakan. Den pilih untuk menggunakan One Signal kerana .. Ianya percuma. hehehe.

OneSignal WordPress Plugin

Pemasangan OneSignal pada website WordPress dipermudahkan lagi dengan adanya plugin khas OneSignal untuk platform WordPress. Anda perlu install plugin ini ke dalam website WordPress anda. Ianya boleh anda dapatkan di SINI atau cari di dalam WordPress Plugin Repository menggunakan kata kunci “OneSignal”.

Web Push Notification OneSignal Plugin

Bila dah jumpa install seperti plugin biasa. Setelah berjaya install OneSignal Plugin, anda akan melihat paparan seperti berikut.

Web Push Notification OneSignal Configuration

Anda akan mengisikan butiran butiran yang diperlukan itu dalam sedikit masa sahaja lagi. Jom, teruskan membaca..

Penyediaan Google Developers Console

Sebelum anda boleh melakukan konfigurasi pada plugin OneSignal, anda perlu terlebih dahulu menyediakan Applikasi Google API anda di Google Developer’s Console. Satu akaun Google diperlukan. Klik SINI untuk ke laman web Google Developer’s Console.

Web Push Notification Google Dev Console Login

Sekiranya anda sudah ada akaun GMail/Youtube/Google+, anda boleh login menggunakan akaun tersebut.

Tiada akaun Google? Buat satu sekarang. Klik pada pautan “Create Account“.

Setelah anda login ke dalam Google Dev Console, anda akan dihidangkan dengan paparan berikut.

Web Push Notification Google Dev Console Create Project

Sekarang anda perlu membina satu projek. Klik pada menu “Select a project” dan pilih menu “Create a project

Web Push Notification Google Dev Console New Project

Isikan nama projek anda. Den gunakan nama website jer. Senang. Butiran lain, sila ikut sahaja macam dalam gambar. Setelah itu, klik pada butang “Create“.

Tunggu sebentar, dalam masa beberapa saat, skrin anda akan refresh dan skrin berikut akan dipaparkan.

Web Push Notification Google Dev Console Project Created

Pastikan nama projek anda tadi di paparkan di bahagian atas kanan skrin anda.

Info pertama yang anda perlukan dari Projek Google API  anda adalah “Project Number“. Ianya boleh didapatkan seperti dalam gambar berikut:

BACA JUGA  Kurangkan Bounce Rate Website Dengan Plugin WordPress Reduce Bounce Rate

Web Push Notification Google Dev Console Project Info Menu

Klik pada menu yang berbentuk seperti tiga titik bertindih. Kemudian pilih menu “Project Information“. Butiran ringkas tentang projek anda itu akan dipaparkan seperti berikut.

Web Push Notification Google Dev Console Project Info

Salin “Project Number” tersebut ke dalam Notepad. Anda akan menggunakannya nanti.

Setelah selesai membuat salinan “Project Number” tadi. Anda kini perlu pula mengaktifkan API untuk Google Cloud Messaging.

Web Push Notification Google Dev Console GCM Link

Untuk ini, anda hanya perlu Klik pada pautan “Google Cloud Messaging” seperti yang ditunjukkan dalam gambar di atas.

Web Push Notification Google Dev Console GCM Enable Button

Seterusnya, Klik pula pada butang “Enable“. Beberapa saat diperlukan untuk Google mengaktifkan Google Cloud Messaging API untuk projek anda. Setelah selesai, anda akan di minta untuk membuat satu “Credentials” untuk menggunakan API tersebut.

Web Push Notification Google Dev Console GCM Enabled

Klik pada menu “Credentials” di bahagian kiri skrin anda dan anda akan diberikan skrin berikut.

Web Push Notification Google Dev Console GCM Credentials

Tekan butang “Create Credentials” dan kemudian “API Key“. Anda akan melihat pula paparan untuk memilih jenis Key yang boleh anda bina.

Web Push Notification Google Dev Console GCM Credential New Key

Anda mahukan “Server Key” oleh itu klik pada butang “Server key“.

Web Push Notification Google Dev Console GCM Credentials Server Key

Di dalam paparan ini, anda hanya perlu isikan maklumat di ruangan “Name“. Den gunakan nama website. Anda boleh letak apa sahaja nama. Tiada masalah. Setelah itu, klik pada butang “Create“.

Web Push Notification Google Dev Console GCM Credentials Server Key Display

Dengan itu, terciptalah Server Key untuk Google Cloud Messaging yang boleh anda gunakan. Seperti mana yang dilakukan untuk “Project Number” tadi, salin Server key ini ke dalam notepad yang di gunakan tadi. Anda akan gunakan Server Key ini sebentar lagi.

Anda sekarang sudah pun sedia dengan OneSignal Plugin dan juga Google Cloud Messaging untuk digunakan dalam App OneSignal. Oleh itu, tiba masa untuk anda membina akaun OneSignal anda.

Pendaftaran Akaun OneSignal

Jom, den tunjukkan cara untuk register akaun di OneSignal:

  1. Pergi ke  URL – OneSignal.com
  2. Klik pada butang “Sign Up Free
  3. Anda boleh daftar melalui GitHub, Facebook atau email.

Web Push Notification OneSignal Account Creation

Mudah bukan?

One Signal App Anda Yang Pertama

Setelah selesai pendaftaran, anda kini sudah boleh mula membina Web Push Notification App anda yang pertama.

Web Push Notification OneSignal Create App 745x419

Anda hanya perlu Klik pada butang “Add a New App“, berikan nama (Den gunakan nama website), dan Klik butang “Create

Setelah itu anda akan melihat paparan seperti berikut.

Web Push Notification OneSignal Configure Website Push Platform

Pilih “Website Push” dan tekan butang “Next

Web Push Notification OneSignal Website Push Chrome Firefox Platform

Pilih pula “Google Chrome & Mozilla Firefox” dan tekan butang “Next

Web Push Notification OneSignal Configure Chrome and Firefox

Di skrin ini anda perlu mengisikan ruang ruang berkenaan dengan info berikut:

  1. Site URL: Letakkan url domain anda di dalam ruang ini. Gunakan protokol yang betul – https://. Contohnya, den gunakan https://kodeexii.net sebagai Site URL den.
  2. Google Server API Key: Ini adalah salah satu dari info yang anda sudah salin ke dalam notepad anda tadi.
  3. Default Notification Icon URL: Letakkan URL imej yang ingin anda gunakan sebagai icon utama dalam mesej “Push Notification” yang anda hantar nanti. Saiz imej yang sesuai adalah 80×80. Sekiranya ruangan ini dibiarkan kosong, OneSignal Default Notification Icon akan digunakan. Oleh itu, jika anda belum ada imej yang sesuai, boleh biarkan ruangan ini kosong.
  4. My Site is Not Fully HTTPS: Setting ini digunakan sekiranya domain anda tidak mempunyai SSL. Den galakkan agar anda gunakan HTTPS sepenuhnya. Den ada sediakan panduan SSL percuma jika anda belum pasang SSL untuk WordPress anda.

Setelah segala informasi telah dimasukkan, anda boleh tekan pada butang “Save” dan kemudian “Continue“. Langkah seterusnya adalah untuk membuat percubaan.

Web Push Notification OneSignal Website Push Chrome Firefox Target SDK

Pilih “WordPress” dan tekan butang “Next

Web Push Notification OneSignal Website Push Chrome Firefox Platform WPSDK

Dalam paparan ini, anda diberikan maklumat untuk dimasukkan ke ruangan konfigurasi OneSignal Plugin. Salin kedua dua info – REST API Key dan APP ID ke dalam notepad seperti yang anda lakukan awal tadi untuk maklumat dari Google Dev Console.

Jangan lakukan apa apa lagi pada browser tab ini. Kita akan kembali semula ke sini nanti.

Konfigurasi OneSignal Push Notification WordPress Plugin

Kita sekarang sudah mempunyai maklumat yang cukup untuk melengkapkan konfigurasi OneSignal Plugin. Oleh itu, pergi semula ke browser tab yang anda gunakan untuk install OneSignal WordPress Plugin tadi.

BACA JUGA  Bagaimana Nak Meningkatkan Kelajuan Website WordPress Anda

Web Push Notification OneSignal Plugin Configuration

Anda telah membiarkan kosong segala ruang dalam skrin konfigurasi ini tadi. Sekarang kita sudah ada butiran untuk ketiga tiga ruangan ini.

  1. Google Project Number:
  2. App ID:
  3. REST API Key:

Butiran Google Project Number ini anda salin di awal artikel dalam segment Google Developer’s Console. Sekiranya anda mengikuti apa yang disuruh, ada salinan maklumat ini dalam notepad yang anda buka tadi.

Butiran App ID dan REST API Key pula baru sahaja anda salin beberapa minit lepas ke dalam Notepad anda.

Setelah mengisi maklumat berkenaan ke dalam ketiga tiga ruangan itu, anda boleh skrol ke bawah dan tekan butang “Save“.

Website anda kini sudah sedia untuk mengumpul dan membina subscriber bagi tujuan penghantaran “Browser Push Notification”.

Lawati laman web anda menggunakan Google Chrome atau Mozilla Firefox. Pastikan anda menerima prompt seperti yang den tunjukkan ini.

Web Push Notification Default Prompt

atau

Web Push Notification OneSignal Bell Prompt

Subscribe kepada Push Notification anda sendiri. Klik pada mana mana “prompt” yang ada dan “allow notifications”. Anda kini menjadi orang pertama yang subscribe kepada Web Push Notification anda sendiri.

Sekarang anda pergi semula ke browser tab yang mengandungi paparan website OneSignal yang ditinggalkan tadi.

Web Push Notification OneSignal WPSDK Test

Tekan butang “Check Subscriber Users“. Anda akan mendapat respon seperti yang tertera di atas ini. Tekan butang “Next

Web Push Notification OneSignal Test Notify

Anda kini boleh menghantar satu “Test Notification” kepada diri anda sendiri. Klik butang “Send Test Notification“.

Anda akan menerima mesej Browser Push Notification seperti dalam gambar berikut.

Web Push Notification OneSignal Receive Test Notification

Klik di mana mana bahagian dalam mesej tersebut, dan anda akan di bawa ke laman web seperti berikut

Web Push Notification OneSignal Congratulations

Tahniah! Anda telah berjaya membuat pemasangan sistem Web Push Notifications ke dalam website WordPress anda.

Sekarang anda boleh membuat pengubah suaian kepada pelbagai konfigurasi OneSignal Plugin anda.

Web Push Notification OneSignal Customize

Bolehlah anda sesuaikan setiap ayat yang dipaparkan oleh OneSignal plugin ini mengikut kesesuaian website anda.

Bagaimana Nak Hantar Push Notification?

Laman web WordPress anda kini adalah pusat untuk mengumpul dan menarik pembaca supaya menjadi seorang subscriber kepada Push Notification anda. Fungsi menghantar mesej Push Notification ada disediakan di dalam akaun OneSignal.com anda di website tersebut.

Lawati laman web OneSignal App Dashboard anda.

Web Push Notification Onesignal Send Push

Di ruangan OneSignal App Dashboard anda, ada dua pautan yang boleh membawa anda ke laman menghantar Web Push Notification. Kedua duanya den tunjukkan denga anak panah di dalam gambar di atas. Klik sahaja salah satu dari dua pautan tersebut.

Web Push Notifications OneSignal Push Message

Terdapat 3 ruang asas yang perlu anda isikan sebelum menghantar mesej menggunakan Web Push Notifications:

  1. Title: Tajuk Push Notification anda. Sebaiknya gunakan Call To Action di sini.
  2. Content: Kandungan yang relevant dengan Call To Action dalam Title. 80 – 120 huruf sahaja. Bergantung kepada platform penerima Notifikasi tersebut. Seeloknya hadkan kepada 100 huruf.
  3. Launch URL: Ruang ini tidak perlu di isi sekiranya anda tidak mahu membawa pelawat ke mana mana laman web pilihan anda.

Setelah selesai melengkapkan segala yang perlu untuk menghantar Push Notification ini, anda boleh tekan butang “Preview” di bahagian bawah, sebelah kanan.

Web Push Notification OneSignal Send Message

Setelah anda “Preview” mesej yang bakal anda “Push” keluar ini, tekan butang “Send“. Mesej anda itu tadi akan terus dipaparkan di hadapan Subscriber anda.

Web Push Notification OneSignal Received Push Notice

Web Push Notification yang anda hantar tadi telah pun di lihat melalui paparan Dekstop seperti gambar di atas ini.

Ada pelbagai lagi settings dan konfigurasi yang boleh anda sesuaikan sendiri mengikut kehendak pemasaran yang anda lakukan.

Baiklah. Sekarang anda boleh mula memberitahu para peminat dan pembaca setia laman web anda tentang fungsi terbaru yang telah anda letakkan dalam website anda. Tawarkan “Gula Gula” kepada pembaca anda untuk menjadi subscriber kepada sistem Browser Push Notification Dengan WordPress anda.

Oh ya! Sudahkah anda menjadi subscriber kepada sistem Push Notification laman web den ini?

Nak pasang Browser Push Notifications Dengan WordPress tapi tiada masa nak buat semua ini? Den boleh buatkan untuk anda. Ambil servis yang den sediakan untuk anda Di Sini.

Servis Browser Push Notifications Dengan WordPress

Nak belajar WordPress dari artikel den yang lain? Klik sini.

Browser Push Notifications Dengan WordPress was last modified: 2016-04-14T20:55:07+08:00 by Al-Hadee Mohd Roslan