【無料でWeb Push通知】OneSignalの設定方法が変わったので設定してみる(ワードプレス編)

無料でWeb Push通知できるOneSignalの設定方法が変わったので、新たな設定方法を書いておきます。

古いOneSignalの設定方法はこちら↓

【Web Push通知】無料で使えるOneSignal設定
ちょっといつまで無料で使えるかは分かりませんが、Push7を使っていて2日で無料送信の限界を超えてPushしてくれなくなったので無料のOneSignalを使ってみます。

それほど変わったわけではないけれども、ちょっとまごついたところがあったので全体の流れを書いておきます。

プッシュ通知とは↓こういうサイトにアクセスした時に新着記事の通知の許可を促すプロンプトを表示します。

OneSiglal

スライドプロンプトにすると以下のような表示になりますが、「許可する」を押したあと上のプロンプト表示になるので2重の手間になるのがちょっと・・・

OneSiglal

このプロンプトを許可すると、サイトが更新されるたびにスマホやPCの通知パネルに表示されますので、アクセスアップが期待できます。

ワードプレスでブログを運営している方は購読してくれるユーザーを増やすためにも有効です。

ただ、ユーザーの視点で見た場合は頻繁にブログを更新するサイトでは、通知パネルに度々表示されますのでユーザーに嫌われるかもしれない恐れもあるので適度な更新が良いかもしれません。

では設定していきましょう。

ワードプレス OneSignalプラグインをインストール

ワードプレスを使っている前提で説明していきます。まずはプラグイン > 新規追加 で「プラグインの検索」フォームからOneSignalと入力して検索します。

検索すると以下のようになりますので、「OneSignal – Web Push Notifications」をインストールします。

OneSignal

インストールできたら有効化しましょう。

OneSignal ユーザー登録

OneSignalサイトに飛ぶ

OneSignalプラグインをインストールしたら、まずはOneSignalのサイトに行きます。

左メニューに OneSiglan Pushの項目ができるのでそれを押すと以下のような表示になるので、1番のリンクを押す。

OneSignal ユーザー登録

OneSignalのサイトに飛んだら「Start for Free」を押します。

OneSignal

ここで、メルアド・パスワード・名前(サイト名など)を入れますが、メルアドはGmailだとすぐ届きますが独自ドメインの場合はメールが来るまで(すぐに来るときもありますが、)数時間かかりました。

すぐに登録完了したい方はGmailのメルアドがよさそうです。

OneSignal

OneSignal ユーザー本登録

以下のようなメールが届いたら「Click Here To Confirm Your Account」を押せば本登録完了です。

OneSignal

このような↓画面になります。チャットと簡単な説明が表示されますが全て英語なので英語が分かる方はチャットで質問してみてもいいかもしれません。

OneSignal

Web Pushを設定

ここからはOneSignalにサイトを登録していきます。ワードプレスやBloggerなどのコンテンツ管理システム(CMS)を使っている場合は簡単に設定できます。

CMSを使わないサイトもWeb Pushの設定は可能で、Public_htmlなどのサイトトップのディレクトリに2つのOneSiglalのJavascriptファイルを設置してHeaderで呼び出せばできるようになります。

ワードプレスを使っている前提で進めていきます。

App Nameを決める

App Nameを決めていきましょう。名前はドメイン名などでOKです。

「ADD App」を押します。

OneSignal

App NAMEはこのサイトのドメイン名にしました。

OneSignal

Web Pushを選ぶ

App NAMEを登録したらこのような画面になりますのでWeb Pushを選びます。

Apple iOSやAndroidなどに通知設定も可能のようです。こちらはアプリを制作した方向けですね。

OneSignal

Web Pushの設定

ここで、ワードプレスの場合は真ん中↓のWordpress Plugin or Website Builderを選択して、その下のWordPressを選びます。

1,Configure Web Push

左側のTypical Siteを選んでワードプレスのサイトで設定もやってみましたが、サイトのトップディレクトリのファイルをアップロードしたりサイトで設定しないといけないのでちょいメンドウです。

OneSignal

なので、ワードプレスやBloggerなどの場合は適した設定のほうが簡単に完了します。

2,WordPress Site Setup

WordPressを選んだら2番目の項目でサイト名・サイトURL・アイコンをアップロードを記入していきます。

Web PushはHTTPSのSSL化したサイト以外ではちょっと問題があるようなので、まだサイトをSSL化していない場合はこれを機にSSL化しましょう。(事情があってSSL化できない場合は下の「My site is not fully HTTPS」をオンにして設定します。)

OneSignal

サイトのアイコンが無い場合は「DEFAULT ICON URL」を記入しないでもOKです。アイコンがあるとインパクトが違いますのでなるべくあったほうがいいですね。

3、Configure Web Push

ここでAPP IDとAPI KEYが発行されました。

OneSiglal

この2つの文字列をコピーしてワードプレスの左メニューOneSiglal PushのConfigurationタブにそれぞれ貼り付けます。↓

OneSiglal

以上でOneSiglalのサイトの設定は完了です。

もしAPP IDとREST API Keyをコピーし忘れた場合は、OneSiglalサイトにログインして、トップページから該当するAPP Nameをクリック、その後Settingsタブの「Keys & IDs」をクリックすると表示されます。↓

OneSiglal

4、Web Pushが表示されるかテスト

実際に自分のサイトにアクセスしてWeb Pushが表示されるか試してみましょう。↓

OneSiglal

右下にベルアイコン↓が表示されたら成功です!デフォルトではこのようなベルアイコンの表示になります。(後ほどカスタマイズします。)

OneSiglal

マウスオーバーすると以下のような表示になって、

OneSiglal

URLを入れるアドレスバーの下にこのような↓表示がでてきます。(Chromeブラウザの場合)

OneSiglal

ベルアイコンを押さないと通知の許可が出てこないのでちょっと不便。なのでカスタマイズしていきましょう。

Web Pushがうまく表示されない時は?

上記の設定をしてもWeb Pushが表示されない場合がありました。

自分の場合はプラグインのHead Cleanerが邪魔してました・・・

Head Cleanerが邪魔してた!

Head Cleanerを有効にしておくと、以下のようにJavascriptエラーが多発しました。このおかげでWeb Pushも表示されませんでした。

OneSignal

Firefoxブラウザでページを右クリックして「要素を調査」を選択、「コンソール」タブを選ぶ。

ワードプレスのプラグイン↓Head Cleanerを無効にしたら正常にWeb Pushが表示されるようになった。

OneSignal

今後はHead Cleanerは使わないようにします。

プロンプト設定

他の設定は後ほど説明していきまして、まずはWeb Pushの通知を許可してもらうためのプロンプト設定をしていきましょう。

(サイトを何度もリロードするとプロンプトが表示されなくなりますので、設定の確認をする時はスマホやタブレット・数種のブラウザで確認するようにしましょう。ブラウザによってはプロンプト自体が出てこないものもありますので注意が必要です。プロンプトの確認できたのはFirefoxとChrome・Edgeです。)

OneSignal Push(左メニュー) > Configuration > Prompt Settings & Subscription Bellの部分を設定していきます。

サブスクリプション ベル をオフにする

右下に表示されるベルアイコンの↓サブスクリプションベルはいらないと思いますので、

OneSiglal

Enable the Subscription Bellをオフにしましょう。Prompt Settings & Subscription Bellをを全てオフにした↓この状態だとWeb Pushプロンプトが表示されない状態です。

OneSiglal

以下3つの設定をしていきます。確認できなかったのはフルスクリーンプロンプトで、オンにしてもフルスクリーンでプロンプトが表示されませんで、代わりにスライドプロンプトが表示されました。

  1. Use an alternate full-screen prompt when requesting subscription permission (incompatible with Subscription Bell and auto-prompting)
    フルスクリーンプロンプトを表示する
  2. Automatically prompt new site visitors to subscribe to push notifications
    スライドプロンプトを表示する
  3. Show the Slide Prompt before prompting users to subscribe
    プロンプトを表示する

結論から言いますと、フルスクリーンプロンプト・スライドプロンプトをオンにした場合は、2段階で許可を求めることになります。

最終的にプロンプトを表示して許可を促すので、簡単にユーザーに購読してもらうにはこのプロンプトのみ出るように設定するといいと思います。

簡潔にプロンプトのみの表示がオススメ

Prompt Settings & Subscription Bellの最初の3項目を以下のように設定するのが一番よさそうです。

OneSiglal

プロンプト表示は以下のようになります。

OneSiglal

Chrome

Firefoxの場合、『許可しない』は右の▼のアイコンをクリックしないとでてきません。『後で』を押すと一定期間後にまたWeb Pushが表示されます。

OneSiglal

Firefox

Edgeブラウザの場合は下からプロンプトがでてきました。↓

OneSiglal

Microsoft edge

フルスクリーンプロンプト・スライドプロンプトをオンにして、ユーザーが許可すると次に上記のようなプロンプトが表示されます。

なので、ユーザーは2回タップ(クリック)しないといけないのでちょっとユーザビリティが悪い感じがします。

見た目のよいスライドプロンプトを表示設定

もし、見た目が良いスライドプロンプト↓を表示させたい場合は「Show the Slide Prompt before prompting users to subscribe」をオンにします。

下の「Show the Slide Prompt before prompting users to subscribe」をオンにしてもオフにしても同じでした。

ただ、スライドプロンプトを表示させて、「許可する」ボタンを押してもらっても続いてプロンプトが表示されますので、ユーザーが許可する確率が低くなると思いますのでご注意ください。

OneSiglal

すると以下のような表示になります。デフォルトでは英語になっているので日本語にしてみましょう。

OneSiglal

Customize the HTTP Pop-Up Prompt textをオンにして設定する

以下の4項目だけ設定しました。他の設定は?

  • Action Message:通知の送信を許可して受信しますか?
  • Site Name:サイト名
  • Accept Button Text:許可する
  • Cancel Button Text:許可しない

Customize the HTTP Pop-Up Prompt text

上記4項目を設定すると以下のように日本語で表示されました。

OneSiglal

この表示で「許可する」ボタンを押したら終わりだったらよかったのですが、この後またプロンプト表示があるので・・・あまり使えないかなぁと思いました。(1回でいいんじゃないのかな?それとも別に設定があるのかな?)

オリジナルアイコンがあると訴求力アップ!

オリジナルアイコンがある場合はさらに訴求力が高まりそうです。↓オリジナルアイコンの設定はOneSiglalサイトのこちらの設定でアイコンをアップロードします。

OneSiglal

フルスクリーンプロンプトをオンにした場合

Use an alternate full-screen prompt when requesting subscription permission (incompatible with Subscription Bell and auto-prompting)のみをオンにした場合は、プロンプトが何も表示されませんでした。

OneSiglal

このように↓「Show the Slide Prompt before prompting users to subscribe」と一緒にオンにした場合は?・・なぜかスライドプロンプトが表示されます。

OneSiglal

上記設定でスライドプロンプト↓が表示されました。

OneSiglal

フルスクリーンプロンプトはタブレットやスマホ?(Chromeでは確認できなかった)で表示されるものなのかもしれません。

 

4種類の中からお好みのプロンプト設定をしてみましょう。

その他の設定

プロンプト設定以外の設定をみていきます。

同様にワードプレスの左メニュー「OneSiglal Push」のConfigurationタブを押して設定していきましょう。

アカウント設定:Account Settings

Account Settings↓は先程APP IDとREST API Keyを貼り付けたので次の項目から設定していきましょう。

OneSiglal

そして、デフォルトではサイトの右下にベルアイコンが表示される設定になっているので表示しないようにします。

通知設定:Sent Notification Settings 

通知設定は特にいじることなく、全てオンにしておけばいいと思います。Notification Titleの部分のみサイト名などを入れて何の通知が来たかわかりやすくすればOK。

OneSiglal

英語が苦手なので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

OneSiglal

この設定をしたあと、許可をすると以下のように通知が表示されます。

Windows10の場合は右下の通知の上あたりに表示されました。

OneSiglal

Windows10 Firefox

スマホの場合は以下のように通知パネルに表示されました。

OneSiglal

スマホ Chrome

これで購読してもらったあとのお礼もバッチリですね。

Automatic Notification Settings

ワードプレスを使っている場合は「Automatically send a push notification when I create a post from the WordPress editor」をオンにしておくと記事投稿時にプッシュ通知してくれます。

OneSiglal

サードパーティを使っている場合は下の「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

最後にアドバンス設定をみていきましょう。

OneSiglal

  • 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つ並んでいるアイコン↓をクリックします。

OneSiglal

メニューが出てくるので設定を選ぶ↓

.OneSiglal

設定画面で「サイトの通知」を選んで、「通知」を選ぶ。↓

このように↓許可済のサイトやブロックしたサイトが表示されるので、該当のサイトをタップします。

OneSiglal

サイトの設定画面になりますので、権限の通知・音声をブロックするか、「データを削除してリセット」ボタンを押します。

OneSiglal

以下、2通りのやり方を細かくみていきましょう。

権限の通知・音声を選択した場合

 

通知・音声を両方ともブロックすると↓サイトの設定は残っていますが、ブロックされているので通知は来なくなります。

OneSiglal

データを削除してリセットを押した場合

「データを削除してリセット」を押すとそのサイトのクッキーや権限・ダウンロードしたデータなどが全てスマホから削除されます。

このような表示↓になりますので、「ダータを削除してリセット」を押すと通知が来なくなります。

OneSiglal

通知のサイトリストに表示されなくなった。↓

OneSiglal

この状態でもう一度サイトにアクセスすると通知プロンプトが表示されます。

Windows10 Chromeの設定

Chromeブラウザを開いて右上の点が3つ並んでいるアイコンをクリックして設定を選択します。

  OneSiglal

左メニューの↓詳細設定の▼をクリックして「プライバシーとセキュリティー」を押して右側の「サイトの設定」をクリック

OneSiglal

「通知」をクリック

OneSiglal

以下のようにブロックしているサイトと許可しているサイトの一覧が表示されますので、該当のサイトを削除します。もしくは▶ボタンを押します。

OneSiglal

▶ボタンを押したを場合はこのように↓表示されますので、許可しない部分のみブロックしても良いでしょう。「確認」と表示されている部分はサイトのほうで許可を求めるとその都度確認を表示して許可・ブロックかを選択するようになっています。

OneSiglal

Windows10 Firefoxの設定

Firefoxを起動して右上になる横棒3本線のアイコン↓をクリックして「オプション」を選択します。

OneSiglal

オプション画面になるので「プライバシーとセキュリティ」タブをクリックして、下のほうの許可設定の項目の「通知」の設定ボタンを押します。

OneSiglal

このような↓ウィンドウが表示されるので、該当のウェブサイトの現在の設定を「不許可」にして、「変更を保存」ボタンを押すと通知が来なくなります。

 OneSiglal

 

 

以上、OneSiglalのWeb Pushの設定でした。

長くなってしまいましたが、参考にしていただけると嬉しいです。

コメント

タイトルとURLをコピーしました