サイトの更新をプッシュ通知する機能を実装する One Signal

サイトを更新したらより多くの人に見てもらいたいと思うのは人情というか、Webマーケティングの基本。サイトにプッシュ通知機能を実装すると、ユーザーにサイト更新情報を通知できるので、サイトに再訪問してもらう手段の1つとして有効と思います。

サイトからクライアントに情報を送ることをプッシュ(押す)、クライアントがサイトの情報を参照することはプル(引く)と言います。

One Signal というプラグインを導入すると、プッシュ通知機能を無料で利用できるできるようになります。Chrome、Safari、Firefox 、Edge をサポートし、導入も簡単です。

OneSignal のアカウント作成

One Signalのサイト、https://onesignal.com/ で 右上の「Sign Up」をクリックするとサインアップ画面が表示されるので、メールアドレス、パスワード、会社名を入力し「Create Account」ボタンをクリックします。

入力したメールアドレスに確認メールが送信されます。

以下のメールが届くので、「Confirm Your Account」ボタンをクリックするとアカウント作成完了です。

プッシュ通知の設定

続いて以下の画面が表示されるので、「Configure Your App or Website」ボタンをクリックします。

サイト名を入力し、「Web Push」を選択後、「Next: Configure Your Platform」をクリックします。

上段中央の「Wordpress Plugin or Website Builder」を選択後、下段左の「WordPress」を選択します。

スクロールダウンして、サイト名とURL、サイトアイコンのURLを指定して「Save」ボタンをクリックします。

APP ID と API KEY が表示されるのでメモっておきます。

OneSignal プラグインのインストール

WordPressのプラグイン画面から「OneSignal」を検索し、「OneSignal – Web Push Notifications」を「今すぐインストール」します。

インストールしたら「有効化」します。

サイドバーの「OneSignal Push」から「Configuration」タブにある「App ID」と「API KEY」を入力し、最下行の「Save」ボタンをクリックします。これで基本的な設定ができました。

OneSignal プラグインの設定

次にOneSignalプラグインでプロンプトを構成して、ユーザーがプッシュ通知を受け取れるようにします。これは、プラグインの「Configuration」タブで設定します。

プロンプト設定とサブスクリプションベル

サブスクリプションベルは画面の右下に通知を表示します。

  • Automatically prompt new site visitors with OneSignal Slide Prompt before Native Browser Prompt (recommended)
    新規サイト訪問者に自動的にプロンプトを表示(推奨)
  • Enable the Subscription Bell
    サブスクリプションベルの有効化
  • Show the Subscription Bell after users have subscribed
    ユーザーが登録した後にサブスクリプションベルを表示
  • Show the OneSignal logo on the Subscription Bell dialog
    サブスクリプションベルのダイアログにOneSignalのロゴを表示する
  • Customize the Subscription Bell text
    サブスクリプションベルのテキストをカスタマイズする
  • Customize the Subscription Bell offset position
    サブスクリプションベルのオフセット位置のカスタマイズ
  • Customize the Subscription Bell theme colors
    サブスクリプションベルのテーマカラーのカスタマイズ
  • Tip when unsubscribed
    配信停止時のヒント
  • Tip when subscribed
    登録されたときのヒント
  • Tip when blocked
    ブロックされたときのヒント
  • Message on subscribed
    購読中のメッセージ
  • Message on re-subscribed (after first unsubscribing)
    再登録時のメッセージ(最初に登録解除した後)
  • Message on unsubscribed
    配信停止時のメッセージ
  • Main dialog title
    メインダイアログのタイトル
  • Main dialog subscribe button
    メインダイアログの購読ボタン
  • Main dialog unsubscribe button
    メインダイアログの配信停止ボタン
  • Blocked dialog title
    ブロックされたダイアログのタイトル
  • Blocked dialog message
    ブロックされたダイアログのメッセージ
  • Attempt to automatically prompt new site visitors with Native Browser Prompt (not recommended)
    新規サイト訪問者に自動的にプロンプトを表示させる試み(推奨しない)

プロンプトのカスタマイズ

ポップアッププロンプトとスライドプロンプトをカスタマイズします。ここに設定した文字列は長さ制限があります。

  • Action Message
    アクションメッセージ
  • Accept Button Text
    承諾ボタンテキスト
  • Cancel Button Text
    キャンセルボタンのテキスト
  • Auto Accept Title (Click Allow) – HTTP Only
    自動承認タイトル(クリック許可) – HTTPのみ
  • Site Name – HTTP Only
    サイト名 – HTTPのみ
  • Example Notification Title (Desktop) – HTTP Only
    通知タイトルの例(デスクトップ) – HTTP のみ
  • Example Notification Message (Desktop) – HTTP Only
    通知メッセージの例 (デスクトップ) – HTTP のみ
  • Example Notification Title (Mobile) – HTTP Only
    通知タイトルの例 (モバイル) – HTTP のみ
  • Example Notification Message (Mobile) – HTTP Only
    通知メッセージの例 (モバイル) – HTTP のみ
  • Example Notification Caption – HTTP Only
    通知キャプションの例 – HTTPのみ

ウェルカム通知設定

新規購読者に対する初回通知の内容を設定します。

自動通知設定

  • Automatically send a push notification when I create a post from the WordPress editor
    WordPressのエディタから記事を作成したときに自動的にプッシュ通知を送信する
  • Automatically send a push notification when I publish a post from 3rd party plugins
    サードパーティープラグインから記事を公開したときに自動的にプッシュ通知を送信する

ここまでで、Chrome 、FireFox 、Edge でプッシュ通知が実装されました。

Safariのプッシュ通知設定

Windows版のSafariやiOSはプッシュ通知に対応していません。
Mac OS XのSafariのみサポートしています。

One Signal サイトでの設定

One Signalのサイト、https://onesignal.com/ にログインし、設定-Platforms画面を表示し、Web Push Platforms の「Apple Safari」をクリックします。

設定用ダイアログが表示されるので、サイト名とURLを入力します。
URLは末尾のスラッシュを省略しておきます。

スクロールダウンして、通知に表示するアイコンを指定するために「I’d like to upload my own notification icons」にチェックし、256 x 256 サイズのアイコンをアップロードし、「Next」ボタンをクリックします。

次にSDK選択画面が表示されるので、WordPressを選択し「Next」ボタンをクリック。

Safari Web ID が表示されるのでメモっておき、「Save」ボタンをクリック。

設定は完了していますので、「Leave Setup」ボタンをクリックします。

Apple Safari も Active になりました。

OneSignal プラグインの設定

サイドバーの「OneSignal Push」から「Configuration」タブにある「Safari Web ID」を入力し、最下行の「Save」ボタンをクリックします。以上で設定完了です。

サイト更新情報の購読をお願いします

この記事を気に入ってくださった方は是非、サイト更新情報の購読をお願いします。

最新情報をチェックしよう!