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

Web Push（Web通知）って何？

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

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

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

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

 

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

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

OneSignalのアカウント登録

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

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

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

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

 

OneSingal Appの新規作成

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

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

３．「Website Push」をクリックします。

４．「Google Ghrome & Mozilla Firefox」をクリックします。

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

６．「WordPress」をクリックして、「Next」をクリックします。

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

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

 

WordPressサイト側の設定

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

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

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

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

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

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

 

OneSignal側の処理（リターン）

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

 

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

 

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