10分でWordPressサイトにOneSignalのWeb Push通知機能を設定する方法

Web Push(Web通知)って何?

Web Push(Web通知)とは、過去にサイトに訪れてsubscribed(購読)登録したユーザーに、サイト管理者がメッセージを送れる機能です。

以下の画像は、試しにWeb Push機能を取り入れてみたものです。ブラウザの左下にあるボタンが、subscribe(購読)ボタンになります。

webpush1

管理者がメッセージを送ると、subscribe(購読)登録したユーザーに、下記の画像の様なメッセージが表示されます。

webpush2

これにより、一度Webサイトに訪れて登録してくれたユーザーに、こちらのタイミングでメッセージを送る事が出来、再訪問を促すことが出来ます。

 

OneSignalを使ったWeb Push通知の設定方法

Web Push通知を取り入れる方法として最も簡単な方法は、OneSignalと言うサービスを利用する事です。

OneSignalのアカウント登録

まず、OneSingalの公式サイトに遷移して、「Web Push」の「Get Start」をクリックします。

webpush3

「GitHub」や「Google]、「Facebook」のアカウントを持っている人は、それらのアカウント使って、アカウントを作成する事が出来ます。

持っていない場合は、任意の項目を入力して「Create account」をクリックします。

後は、一般的なサービスのアカウント登録と同じような流れで手順を踏んでいくと、登録が完了します。

 

OneSingal Appの新規作成

1.管理画面にログイン後、サイドメニューの「All apps」をクリックして、「Add a new app」をクリックします。

webpush4

2.App Newに任意のアプリ名を入力して「Create」をクリックします。

webpush5

3.「Website Push」をクリックします。

webpush6

4.「Google Ghrome & Mozilla Firefox」をクリックします。

webpush7

5.Web Pushを設置するサイトのアドレスを入力して、「Save」をクリックします。
※もし、サイト名が(http://www.xxx.com/サブディレクトリ)の場合、「http://www.xxx.com/」を入力します。(そんな事が書いてありました。)

webpush8

6.「WordPress」をクリックして、「Next」をクリックします。

webpush9

7.「Your Rest API Key」と「Your App ID」をコピーします。

webpush10

上記までやったら、途中の状態で、WordPressサイト側の設定に移行します。

 

WordPressサイト側の設定

1.管理画面にログインして、プラグインの新規追加から、「OneSingal」のプラグインをインストールして、有効化をします。

webpush11

2.OneSingalのプラグイン設定画面に遷移して、「Configuration」タブをクリックして、先ほどコピーした、「App ID」と「REST API Key」を入力します。
※OneSingalには、「App ID」と「REST API Key」の上下が逆で表示されています。

webpush12

3.必要であれば、デザインの設定をして、画面の一番下部にある「SAVE」をクリックします。

webpush13

4.保存後、下記の様な「エラーメッセージ」が表示される場合がありますが、今の所気にしなくてよい気がします。

webpush14

5.管理画面からホームページ側に遷移すると、指定した位置に、アイコンが表示されているので、「クリック」をします。ブラウザの上側にポップアップが表示されるので、続けて「許可」をクリックします。

webpush15

この作業が終わると、OneSignal側に戻ります。

 

OneSignal側の処理(リターン)

1.先ほど、途中やりの画面にもどり、「Check Subscribed Users」をクリックします。下記画像の様なメッセージが表示されたら成功です。「Done」を押して完了させます。

webpush16_2

 

OneSingalからメッセージを送ってみる

OneSingalの管理画面から、subscribed(購読)登録したユーザーにメッセージを送る処理を開設します。

1.メッセージを送るアプリを選択します。

webpush17

2.「New Message」をクリックして、「Add another language」をクリックします。

webpush18

 

3.「Japanese」にチェックを入れて、「Apply」をクリックします。

webpush19

4.メッセージ欄(英語と日本語)のタイトルとコンテントに任意の文字を入力します。その後、画面の下部にある「Preview」ボタンをクリックします。

webpush20

5.「Send」をクリックします。その後、ほぼリアルタイムで、右下にメッセージが表示されます。

webpush21

以上がOneSingalとWordPressを使ったWeb Push通知の設定方法です。

 

Web Push通知サービスのまとめ

この設定をし終わった後、試しに記事を投稿してみたら、ほぼリアルタイムで、画面右下に、サイトのタイトルと記事のタイトルがメッセージとして表示されました。

そして、そのメッセージをクリックすると、投稿した記事ページに飛びます。RSSフィードとちょっと似ている感じがしますが、とても便利な機能かもしれません。

とは言え、あまり頻繁に表示されると、うっとうしいと思われ、購読解除をされかねないので、ほどほどが良いかもしれません。

また、今の所、OneSingalのサービスは無料で使えますが、今後有料になるかもしれません。皆さんも是非自分のWordPressサイトに導入して、リピート率を向上させてみてください。

 

以上「10分でWordPressサイトにOneSignalのWeb Push通知機能を設定する方法」をご紹介しました。