Paano Magdagdag ng Web Push Notification sa iyong WordPress Site

Napansin mo ba ang mga abiso sa push ng web na ginagamit sa mga sikat na website tulad ng Facebook? Kamakailan isa sa aming mga mambabasa ay nagtanong kung posible na magdagdag ng mga abiso sa push ng web sa WordPress. Ofcourse, ito ay. Sa artikulong ito, ipapakita namin sa iyo kung paano magdagdag ng notification ng web push sa iyong WordPress site.

Pagdaragdag ng mga abiso sa web push sa isang WordPress site

Bakit Magdagdag ng mga Abiso sa Web Push sa Iyong WordPress Site?

Ang mga abiso ng push ng web ay maaaring i-click na mga mensahe na ipinapakita sa tuktok ng Desktop ng gumagamit. Maaaring ipakita ang mga ito kahit na hindi bukas ang browser ng user.

Mga notification ng push ng web na ipinapakita sa Desktop gamit ang mga web browser ng Google Chrome, Firefox, at Safari

Bukod sa desktop, ang mga abiso ng push ng Web ay gumagana din sa mga mobile browser.

Ang mga sikat na site kabilang ang Facebook, Pinterest, LinkedIn, at marami pang iba ay gumagamit na ng mga abiso sa web push. Ito ay nagpapatunay na maging mas nakakaakit kaysa sa SMS, email marketing, at iba pang social media. Ayon sa isang survey, ang mga abiso ng push ay may 50% na bukas na rate sa mga mobile device.

Nangangahulugan ito ng mas nakatuon na madla para sa iyong WordPress site at makabuluhang tulong sa iyong pangkalahatang mga pagtingin sa pahina at bumabalik na mga bisita.

Ang pagkakaroon ng sinabi na, tingnan natin kung paano magdagdag ng mga push ng web push sa isang WordPress site.

Pag-set up ng Mga Abiso sa Web Push sa WordPress na may OneSignal

Ang OneSignal ay isang libreng serbisyo na nagbibigay-daan sa iyo upang magdagdag ng mga abiso sa push sa anumang website, web, o mga mobile na app.

Ang unang bagay na kailangan mong gawin ay i-install at i-activate ang OneSignal plugin. Para sa higit pang mga detalye

Sa pag-activate, ang plugin ay magdaragdag ng isang bagong item sa menu na may label na OneSignal sa iyong WordPress admin bar. Ang pag-click dito ay magdadala sa iyo sa pahina ng mga setting ng plugin.

Mga setting ng OneSignal WordPress plugin

Ang pahina ng mga setting ay nahahati sa mga tab ng Setup at Configuration. Ang tab ng pag-setup ay talagang detalyadong dokumentasyon kung paano i-setup ang OneSignal push notification sa WordPress. Ito ay may mga parehong hakbang na ipapakita namin sa iyo sa tutorial na ito.

Upang i-setup ang OneSignal, kakailanganin mong magdagdag ng iba’t ibang mga API key at ID ng application sa mga setting ng plugin.

Magsimula na tayo.

Hakbang 1: Lumikha ng Google Keys

Una kailangan mong bisitahin ang website ng Google Services Wizard.

Paglikha ng mga serbisyo ng Google na serbisyo

Magbigay lamang ng pangalan para sa iyong app at magdagdag ng isang pangalan ng Android package. Ang OneSignal ay hindi gumagamit ng Android package name, ngunit ito ay isang kinakailangang field.

Susunod, piliin ang iyong bansa at rehiyon, pagkatapos ay mag-click sa pindutang ‘Piliin at i-configure ang mga serbisyo’.

Dadalhin ka nito sa susunod na screen kung saan hihilingin sa iyo na piliin ang mga serbisyo ng Google na nais mong gamitin sa iyong app. Kailangan mong mag-click sa ‘Paganahin ang Google Cloud Messaging’ na pindutan.

Paganahin ang cloud messaging

Makikita mo na ngayon ang iyong server API key at Sender ID.

Server API at Pagpapadala ID

Kailangan mong kopyahin ang iyong ID ng Nagpapadala at i-paste ito sa tab ng Configuration ng WordPress plugin sa ilalim ng field ng Proyekto ng Google Project.

Kailangan mo ring kopyahin ang iyong server API key at i-paste ito sa isang text file sa iyong computer. Kakailanganin mo ang API key na ito mamaya sa tutorial na ito.

Hakbang 2: Pag-set up ng Mga Abiso sa Push ng Chrome at Firefox

Magsasagawa na kami ngayon ng mga push notification sa Chrome at Firefox. Una kailangan mong bisitahin ang OneSignal website at likhain ang iyong libreng account.

Sa sandaling nalikha mo ang iyong account, kailangan mong mag-login at mag-click sa pindutang ‘Magdagdag ng bagong app’.

Magdagdag ng bagong OneSignal app

Hihilingin sa iyo na magpasok ng isang pangalan para sa iyong app. Maaari mong gamitin ang anumang pangalan na gusto mo at pagkatapos ay mag-click sa pindutang ‘Lumikha’ upang magpatuloy.

Pangalan ng app

Sa susunod na pahina, hihilingin sa iyo na pumili ng isang platform upang i-configure. Kailangan mong piliin ang ‘Website Push’ at pagkatapos ay mag-click sa susunod na button upang magpatuloy.

Push ng Website

Pagkatapos nito ay hihilingin sa iyo na piliin ang platform ng browser. Makikita mo ang Google Chrome at Mozilla Firefox sa isang kahon at Safari sa isa pang kahon.

Kailangan mong mag-click sa kahon ng Google Chrome at Mozilla Firefox. Ipapakita namin sa iyo kung paano i-setup ang Safari, mamaya sa artikulong ito.

Piliin ang platform ng browser

Mag-click sa susunod na button upang magpatuloy.

Sa susunod na hakbang, hihilingin sa iyo na ipasok ang url ng iyong WordPress site, key ng Google Server API, at URL para sa iyong default na icon ng imaheng abiso.

Mga setting ng app

Kung ang iyong website ay hindi sumusuporta sa SSL / HTTPS, kailangan mong suriin ang kahon sa tabi ‘Ang aking site ay hindi ganap na HTTPS’ pagpipilian. Maaari mo ring i-setup ang SSL sa iyong website kung gusto mo, ngunit hindi ito kinakailangan.

Hindi sinusuportahan ng Google Chrome ang mga abiso ng web push para sa mga di-ssl o mga website ng http. Nalulutas ng OneSignal ang problemang ito sa pamamagitan ng pag-subscribe sa mga user sa isang subdomain sa kanilang sariling https domain.

Sinusuri ‘Ang aking site ay hindi ganap na HTTPS’ Ang opsyon ay magpapakita ng mga pagpipilian sa fallback ng HTTP. Kakailanganin mong pumili ng isang subdomain para sa iyong app at ipasok ang Numero ng Google Project o ID ng Nagpapadala na iyong nabuo sa unang hakbang.

Mga pagpipilian sa http fallback

Mag-click sa pindutang I-save upang magpatuloy. Ngayon ay maaari kang lumabas sa dialog box na ito. Ikaw ay sasabihan na may paunawa na ang iyong setup ay hindi pa kumpleto at maaaring maipagpatuloy sa ibang pagkakataon. I-click ang Oo upang isara ang dialog box.

Hakbang 3: Pagkuha ng OneSignal Keys

Kailangan mo na ngayong makakuha ng OneSignal Keys para sa iyong website. Mula sa iyong app dashboard mag-click sa Mga Setting ng App.

Link sa Mga Setting ng App

Dadalhin ka nito sa pahina ng mga setting ng iyong app. Kailangan mong mag-click sa tab ng Mga Key at ID.

Mga Key at ID

Ipapakita nito ang iyong OneSignal App ID at ang Rest API Key.

App ID at Rest API Key

Kailangan mong kopyahin at i-paste ang mga ito sa tab na pagsasaayos ng OneSignal WordPress plugin sa iyong site.

Hakbang 4: Pag-set up ng Safari Web Push Notification

Tandaan na nilaktawan namin ang mga setting ng push notification ng web ng Safari. Ngayon ipapakita namin sa iyo kung paano i-setup ang mga push notification ng web ng Safari.

Mag-login sa iyong OneSignal account at pumunta sa iyong pahina ng Mga Setting ng App. Mag-scroll pababa sa mga platform ng web at mag-click sa pindutan ng pag-configure sa tabi ng Apple Safari.

I-configure ang Apple Safari

Dadalhin nito ang isang dialog box kung saan hihilingin sa iyo na ipasok ang iyong site name at site url.

Mga setting ng push notification ng web ng Safari

Pagkatapos ay kailangan mong suriin ang kahon sa tabi ‘Gusto kong mag-upload ng aking sariling mga icon ng abiso’ pagpipilian.

Makakakita ka na ngayon ng pagpipilian upang mag-upload ng iba’t ibang mga laki ng icon. Ang mga ito ay mga kuwadradong imahe, gamitin ang Photoshop o anumang program sa pag-edit ng imahe upang lumikha ng mga icon sa eksaktong laki.

Mag-click sa piliin ang mga pindutan ng file upang i-upload ang lahat ng iyong mga icon.

Mag-upload ng mga icon ng abiso para sa notification ng push ng Web ng Safari

Mag-click sa pindutang I-save at pagkatapos isara ang dialog box.

I-refresh ang pahina ng Mga Setting ng App at mag-scroll pababa sa seksyon ng Web Platform. Sa oras na ito makikita mo ang ‘Web ID’ sa ilalim ng Apple Safari.

Safari web ID

Kailangan mong kopyahin ang web ID na ito at idikit ito sa tab na Configuration ng OneSignal plugin sa iyong site.

Iyon lang, matagumpay mong na-setup ang OneSignal web push notification para sa iyong WordPress site.

Hakbang 5: Pagsubok Abiso sa Push sa Web sa Iyong WordPress Site

Bilang default, ang OneSignal plugin ay magdaragdag ng isang icon ng subscription sa iyong WordPress site. Bisitahin ang iyong website sa isang suportadong browser at pagkatapos ay mag-click sa pindutang mag-subscribe.

Mag-subscribe sa pindutan ng push notification

Makikita mo ang default na ‘salamat sa pag-subscribe’ na mensahe.

Ngayon mag-login sa OneSignal account. Mag-click sa pangalan ng iyong app, at pagkatapos ay sa Mga Setting ng App.

Mag-scroll pababa sa seksyon ng web platform at mag-click sa pindutan ng pag-configure sa tabi ng Google Chrome at Firefox.

I-configure ang mga notification ng web push para sa Chrome at Firefox

Makikita mo ang screen ng pagsasaayos ng platform na napunan mo nang mas maaga. I-click lamang ang pindutang I-save at pagkatapos ay mag-click sa Magpatuloy.

pagsubok ng mga push notification sa web

Hihilingin sa iyo na piliin ang target na SDK. Kailangan mong piliin ang WordPress at pagkatapos ay mag-click sa Susunod.

Piliin ang WordPress

Dahil mayroon ka lamang isang subscriber sa sandaling ang iyong subscriber ID ay awtomatikong mapupunan.

Mag-click sa susunod na button, at maaabot mo ang ‘Mga Setting ng Pagsubok’ hakbang.

Mag-click sa ‘Magpadala ng Abiso sa Pagsubok’ na pindutan.

Magpadala ng abiso sa pagsubok

Magpapadala ngayon ng One Signal ng abiso sa push ng web.

Ang hitsura ng mga abiso ay maaaring mag-iba depende sa kung aling browser na ginamit mo upang mag-subscribe. Kapag lumitaw ang abiso sa screen ng iyong computer, kailangan mong mag-click dito.

Abiso sa pagsubok

Dadalhin ka nito sa screen ng kumpirmasyon, na nagpapakita na matagumpay mong na-setup ang OneSignal web push notification para sa iyong website.

Tagumpay na mensahe

Bumalik sa configure screen sa OneSignal website at mag-click sa ‘ Suriin ang Katayuan ng Abiso ‘Na pindutan.

Suriin ang katayuan ng notification

Makakakita ka na ngayon ng isa pang mensahe ng tagumpay na nagpapahiwatig na matagumpay mong nagdagdag ng mga abiso sa web push sa iyong WordPress site.

Paano Ipadala ang Mga Abiso ng Push sa Web sa WordPress gamit ang OneSignal

Ang OneSignal web push notification plugin sa iyong WordPress site ay awtomatikong magpapadala ng abiso sa lahat ng mga subscriber kapag nag-publish ka ng isang bagong post.

Maaari ka ring mano-manong magpadala ng mga notification mula sa iyong OneSignal App Dashboard. Mag-login sa iyong OneSignal account at mag-click sa pangalan ng iyong app.

Mula sa menu sa iyong kaliwa, mag-click sa pindutang ‘Bagong Mensahe’.

Nagpapadala ng bagong web push notification message

Dadalhin ka nito sa bagong screen ng mensahe. Maaari kang magpasok ng pamagat at ilang nilalaman para sa iyong abiso.

Isulat ang iyong bagong mensahe ng push notification sa OneSignal

Maaari ka ring mag-click sa Mga Pagpipilian, Segment, Iskedyul / Ipadala Mamaya upang higit pang ipasadya ang iyong web push notification.

Halimbawa, maaari mong i-link ito sa isang partikular na pahina sa iyong site, ipadala ito sa isang partikular na segment ng iyong mga gumagamit, o itakda ito upang maipadala sa isang partikular na oras.

Umaasa kami na ang artikulong ito ay nakatulong sa iyo na magdagdag ng web push notification sa iyong WordPress site