無料でWeb Push通知できるOneSignalの設定方法が変わったので、新たな設定方法を書いておきます。
古いOneSignalの設定方法はこちら↓
それほど変わったわけではないけれども、ちょっとまごついたところがあったので全体の流れを書いておきます。
プッシュ通知とは↓こういうサイトにアクセスした時に新着記事の通知の許可を促すプロンプトを表示します。
スライドプロンプトにすると以下のような表示になりますが、「許可する」を押したあと上のプロンプト表示になるので2重の手間になるのがちょっと・・・
このプロンプトを許可すると、サイトが更新されるたびにスマホやPCの通知パネルに表示されますので、アクセスアップが期待できます。
ワードプレスでブログを運営している方は購読してくれるユーザーを増やすためにも有効です。
ただ、ユーザーの視点で見た場合は頻繁にブログを更新するサイトでは、通知パネルに度々表示されますのでユーザーに嫌われるかもしれない恐れもあるので適度な更新が良いかもしれません。
では設定していきましょう。
ワードプレス OneSignalプラグインをインストール
ワードプレスを使っている前提で説明していきます。まずはプラグイン ＞ 新規追加 で「プラグインの検索」フォームからOneSignalと入力して検索します。
検索すると以下のようになりますので、「OneSignal – Web Push Notifications」をインストールします。
インストールできたら有効化しましょう。
OneSignal ユーザー登録
OneSignalサイトに飛ぶ
OneSignalプラグインをインストールしたら、まずはOneSignalのサイトに行きます。
左メニューに OneSiglan Pushの項目ができるのでそれを押すと以下のような表示になるので、１番のリンクを押す。
OneSignal ユーザー登録
OneSignalのサイトに飛んだら「Start for Free」を押します。
ここで、メルアド・パスワード・名前（サイト名など）を入れますが、メルアドはGmailだとすぐ届きますが独自ドメインの場合はメールが来るまで（すぐに来るときもありますが、）数時間かかりました。
すぐに登録完了したい方はGmailのメルアドがよさそうです。
OneSignal ユーザー本登録
以下のようなメールが届いたら「Click Here To Confirm Your Account」を押せば本登録完了です。
このような↓画面になります。チャットと簡単な説明が表示されますが全て英語なので英語が分かる方はチャットで質問してみてもいいかもしれません。
Web Pushを設定
ここからはOneSignalにサイトを登録していきます。ワードプレスやBloggerなどのコンテンツ管理システム（CMS）を使っている場合は簡単に設定できます。
CMSを使わないサイトもWeb Pushの設定は可能で、Public_htmlなどのサイトトップのディレクトリに2つのOneSiglalのJavascriptファイルを設置してHeaderで呼び出せばできるようになります。
ワードプレスを使っている前提で進めていきます。
App Nameを決める
App Nameを決めていきましょう。名前はドメイン名などでOKです。
「ADD App」を押します。
App NAMEはこのサイトのドメイン名にしました。
Web Pushを選ぶ
App NAMEを登録したらこのような画面になりますのでWeb Pushを選びます。
Apple iOSやAndroidなどに通知設定も可能のようです。こちらはアプリを制作した方向けですね。
Web Pushの設定
ここで、ワードプレスの場合は真ん中↓のWordpress Plugin or Website Builderを選択して、その下のWordPressを選びます。
1，Configure Web Push
左側のTypical Siteを選んでワードプレスのサイトで設定もやってみましたが、サイトのトップディレクトリのファイルをアップロードしたりサイトで設定しないといけないのでちょいメンドウです。
なので、ワードプレスやBloggerなどの場合は適した設定のほうが簡単に完了します。
2，WordPress Site Setup
WordPressを選んだら2番目の項目でサイト名・サイトURL・アイコンをアップロードを記入していきます。
Web PushはHTTPSのSSL化したサイト以外ではちょっと問題があるようなので、まだサイトをSSL化していない場合はこれを機にSSL化しましょう。（事情があってSSL化できない場合は下の「My site is not fully HTTPS」をオンにして設定します。）
サイトのアイコンが無い場合は「DEFAULT ICON URL」を記入しないでもOKです。アイコンがあるとインパクトが違いますのでなるべくあったほうがいいですね。
3、Configure Web Push
ここでAPP IDとAPI KEYが発行されました。
この2つの文字列をコピーしてワードプレスの左メニューOneSiglal PushのConfigurationタブにそれぞれ貼り付けます。↓
以上でOneSiglalのサイトの設定は完了です。
もしAPP IDとREST API Keyをコピーし忘れた場合は、OneSiglalサイトにログインして、トップページから該当するAPP Nameをクリック、その後Settingsタブの「Keys & IDs」をクリックすると表示されます。↓
4、Web Pushが表示されるかテスト
実際に自分のサイトにアクセスしてWeb Pushが表示されるか試してみましょう。↓
右下にベルアイコン↓が表示されたら成功です！デフォルトではこのようなベルアイコンの表示になります。（後ほどカスタマイズします。）
マウスオーバーすると以下のような表示になって、
URLを入れるアドレスバーの下にこのような↓表示がでてきます。（Chromeブラウザの場合）
ベルアイコンを押さないと通知の許可が出てこないのでちょっと不便。なのでカスタマイズしていきましょう。
Web Pushがうまく表示されない時は？
上記の設定をしてもWeb Pushが表示されない場合がありました。
自分の場合はプラグインのHead Cleanerが邪魔してました・・・
Head Cleanerが邪魔してた！
Head Cleanerを有効にしておくと、以下のようにJavascriptエラーが多発しました。このおかげでWeb Pushも表示されませんでした。
Firefoxブラウザでページを右クリックして「要素を調査」を選択、「コンソール」タブを選ぶ。
ワードプレスのプラグイン↓Head Cleanerを無効にしたら正常にWeb Pushが表示されるようになった。
今後はHead Cleanerは使わないようにします。
プロンプト設定
他の設定は後ほど説明していきまして、まずはWeb Pushの通知を許可してもらうためのプロンプト設定をしていきましょう。
（サイトを何度もリロードするとプロンプトが表示されなくなりますので、設定の確認をする時はスマホやタブレット・数種のブラウザで確認するようにしましょう。ブラウザによってはプロンプト自体が出てこないものもありますので注意が必要です。プロンプトの確認できたのはFirefoxとChrome・Edgeです。）
OneSignal Push(左メニュー) ＞ Configuration ＞ Prompt Settings & Subscription Bellの部分を設定していきます。
サブスクリプション ベル をオフにする
右下に表示されるベルアイコンの↓サブスクリプションベルはいらないと思いますので、
Enable the Subscription Bellをオフにしましょう。Prompt Settings & Subscription Bellをを全てオフにした↓この状態だとWeb Pushプロンプトが表示されない状態です。
以下3つの設定をしていきます。確認できなかったのはフルスクリーンプロンプトで、オンにしてもフルスクリーンでプロンプトが表示されませんで、代わりにスライドプロンプトが表示されました。
- Use an alternate full-screen prompt when requesting subscription permission (incompatible with Subscription Bell and auto-prompting)
フルスクリーンプロンプトを表示する - Automatically prompt new site visitors to subscribe to push notifications
スライドプロンプトを表示する - Show the Slide Prompt before prompting users to subscribe
プロンプトを表示する
結論から言いますと、フルスクリーンプロンプト・スライドプロンプトをオンにした場合は、2段階で許可を求めることになります。
最終的にプロンプトを表示して許可を促すので、簡単にユーザーに購読してもらうにはこのプロンプトのみ出るように設定するといいと思います。
簡潔にプロンプトのみの表示がオススメ
Prompt Settings & Subscription Bellの最初の3項目を以下のように設定するのが一番よさそうです。
プロンプト表示は以下のようになります。
Chrome
Firefoxの場合、『許可しない』は右の▼のアイコンをクリックしないとでてきません。『後で』を押すと一定期間後にまたWeb Pushが表示されます。
Firefox
Edgeブラウザの場合は下からプロンプトがでてきました。↓
Microsoft edge
フルスクリーンプロンプト・スライドプロンプトをオンにして、ユーザーが許可すると次に上記のようなプロンプトが表示されます。
なので、ユーザーは2回タップ（クリック）しないといけないのでちょっとユーザビリティが悪い感じがします。
見た目のよいスライドプロンプトを表示設定
もし、見た目が良いスライドプロンプト↓を表示させたい場合は「Show the Slide Prompt before prompting users to subscribe」をオンにします。
下の「Show the Slide Prompt before prompting users to subscribe」をオンにしてもオフにしても同じでした。
ただ、スライドプロンプトを表示させて、「許可する」ボタンを押してもらっても続いてプロンプトが表示されますので、ユーザーが許可する確率が低くなると思いますのでご注意ください。
すると以下のような表示になります。デフォルトでは英語になっているので日本語にしてみましょう。
Customize the HTTP Pop-Up Prompt textをオンにして設定する
以下の4項目だけ設定しました。他の設定は？
- Action Message：通知の送信を許可して受信しますか？
- Site Name：サイト名
- Accept Button Text：許可する
- Cancel Button Text：許可しない
上記4項目を設定すると以下のように日本語で表示されました。
この表示で「許可する」ボタンを押したら終わりだったらよかったのですが、この後またプロンプト表示があるので・・・あまり使えないかなぁと思いました。（1回でいいんじゃないのかな？それとも別に設定があるのかな？）
オリジナルアイコンがあると訴求力アップ！
オリジナルアイコンがある場合はさらに訴求力が高まりそうです。↓オリジナルアイコンの設定はOneSiglalサイトのこちらの設定でアイコンをアップロードします。
フルスクリーンプロンプトをオンにした場合
Use an alternate full-screen prompt when requesting subscription permission (incompatible with Subscription Bell and auto-prompting)のみをオンにした場合は、プロンプトが何も表示されませんでした。
このように↓「Show the Slide Prompt before prompting users to subscribe」と一緒にオンにした場合は？・・なぜかスライドプロンプトが表示されます。
上記設定でスライドプロンプト↓が表示されました。
フルスクリーンプロンプトはタブレットやスマホ？（Chromeでは確認できなかった）で表示されるものなのかもしれません。
4種類の中からお好みのプロンプト設定をしてみましょう。
その他の設定
プロンプト設定以外の設定をみていきます。
同様にワードプレスの左メニュー「OneSiglal Push」のConfigurationタブを押して設定していきましょう。
アカウント設定：Account Settings
Account Settings↓は先程APP IDとREST API Keyを貼り付けたので次の項目から設定していきましょう。
そして、デフォルトではサイトの右下にベルアイコンが表示される設定になっているので表示しないようにします。
通知設定：Sent Notification Settings
通知設定は特にいじることなく、全てオンにしておけばいいと思います。Notification Titleの部分のみサイト名などを入れて何の通知が来たかわかりやすくすればOK。
英語が苦手なのでGoogle通訳で訳してわかりやすいようにしてみました。
- Use the post’s featured image for the notification icon
通知パネルに投稿画像（アイキャッチ画像）を使用する - Use the post’s featured image for Chrome’s large notification image
Chromeの通知に投稿画像（アイキャッチ画像）を使用する - Hide notifications after a few seconds
しばらくしたら通知を非表示にするか
YES：Windows：最大20秒,Mac OS X：3〜5秒,Android：通知トレイに保持
NO：Mac OS X通知にブラウザー設定ボタンが表示 - Notification Title
通知タイトル：サイト名+説明など（どのサイトからの通知かわかりやすくする） - Send notifications additionally to iOS & Android platforms
iOSおよびAndroidプラットフォームに追加で通知を送信
Welcome Notification Settings
購読許可後のようこそ通知の表示に使います。デフォルトで英語表示になりますので、日本語に変えましょう。
- Title：サイト名など
- Message：購読ありがとうございます！など
- URL：設定しない場合はドメインのURL
この設定をしたあと、許可をすると以下のように通知が表示されます。
Windows10の場合は右下の通知の上あたりに表示されました。
Windows10 Firefox
スマホの場合は以下のように通知パネルに表示されました。
スマホ Chrome
これで購読してもらったあとのお礼もバッチリですね。
Automatic Notification Settings
ワードプレスを使っている場合は「Automatically send a push notification when I create a post from the WordPress editor」をオンにしておくと記事投稿時にプッシュ通知してくれます。
サードパーティを使っている場合は下の「Automatically send a push notification when I publish a post from 3rd party plugins」をオンにしましょう。
UTM Tracking Settings
UTMパラメーターを設定すると通知URLに追加されて効果測定可能のようです。
以下のパラメーターがあります。
- utm_medium=ppc
- utm_source=adwords
- utm_campaign=snow boots
- utm_content=durable snow boots
サイト全体の設定でページごとの設定はできないようです。
Advanced Settings
最後にアドバンス設定をみていきましょう。
- Additional Custom Post Types for Automatic Notifications Created From Plugins
カスタム投稿タイプを自分で作ったmanifest.jsonを使用する - Disable OneSignal initialization
OneSignalの初期化を無効 - Show status message after sending notifications
通知を送信した後にステータスメッセージを表示
「Additional Custom Post Types for Automatic Notifications Created From Plugins」はワードプレスの改造が分かる方はオリジナルなカスタム投稿タイプを作って読み込ませることができます。
通知を不許可にする方法
ここからは、Web Pushで通知を許可したユーザーが、やっぱり通知が来ないようにしたい場合の設定方法を説明します。
- Androidスマホ Chromeの設定
- Windows10 Chromeの設定
- Windows10 Firefoxの設定
Androidスマホ Chromeの設定
スマホではChromeアプリを起動して、右上にある点が3つ並んでいるアイコン↓をクリックします。
メニューが出てくるので設定を選ぶ↓
.
設定画面で「サイトの通知」を選んで、「通知」を選ぶ。↓
このように↓許可済のサイトやブロックしたサイトが表示されるので、該当のサイトをタップします。
サイトの設定画面になりますので、権限の通知・音声をブロックするか、「データを削除してリセット」ボタンを押します。
以下、2通りのやり方を細かくみていきましょう。
権限の通知・音声を選択した場合
-
- 通知：通知の表示をオフにする
-
- 音声：ブロックを選択
通知・音声を両方ともブロックすると↓サイトの設定は残っていますが、ブロックされているので通知は来なくなります。
データを削除してリセットを押した場合
「データを削除してリセット」を押すとそのサイトのクッキーや権限・ダウンロードしたデータなどが全てスマホから削除されます。
このような表示↓になりますので、「ダータを削除してリセット」を押すと通知が来なくなります。
通知のサイトリストに表示されなくなった。↓
この状態でもう一度サイトにアクセスすると通知プロンプトが表示されます。
Windows10 Chromeの設定
Chromeブラウザを開いて右上の点が3つ並んでいるアイコンをクリックして設定を選択します。
左メニューの↓詳細設定の▼をクリックして「プライバシーとセキュリティー」を押して右側の「サイトの設定」をクリック
「通知」をクリック
以下のようにブロックしているサイトと許可しているサイトの一覧が表示されますので、該当のサイトを削除します。もしくは▶ボタンを押します。
▶ボタンを押したを場合はこのように↓表示されますので、許可しない部分のみブロックしても良いでしょう。「確認」と表示されている部分はサイトのほうで許可を求めるとその都度確認を表示して許可・ブロックかを選択するようになっています。
Windows10 Firefoxの設定
Firefoxを起動して右上になる横棒3本線のアイコン↓をクリックして「オプション」を選択します。
オプション画面になるので「プライバシーとセキュリティ」タブをクリックして、下のほうの許可設定の項目の「通知」の設定ボタンを押します。
このような↓ウィンドウが表示されるので、該当のウェブサイトの現在の設定を「不許可」にして、「変更を保存」ボタンを押すと通知が来なくなります。
以上、OneSiglalのWeb Pushの設定でした。
長くなってしまいましたが、参考にしていただけると嬉しいです。
コメント