プッシュ通知の大手プロバイダーOneSignalが、新しいユーザー承諾プロンプトのオプションを追加 したと発表しました。追加されたのは、プッシュ通知購読のボタン、またはリンクをサイト内の任意の箇所に自由に設置できる機能です。この機能は2018年8月の時点では、WordPressでは未対応ですが、Bloggerでは利用可能になっています。OneSignalを使用すると簡単にBlogger ブログにプッシュ通知機能を搭載することができます。
[post_ads]
ユーザー承諾プロンプトとは
プッシュ通知機能を備えるサイトでは、スライドプロンプトと呼ばれるプッシュ通知購読を促す（購読の承諾を促す）小ウインドウを表示したりします。
プロンプトを表示してユーザーの承諾を得ることは、プッシュ通知登録を獲得する上で必要な機能ですが、表示形式やタイミングによっては、ユーザーエクスペリエンスのマイナス要因となる場合もあります。
例えば、「プッシュ通知を購読しますか？」と言う小ウィンドウが初めて訪問したユーザーに対して、いきなり表示されるのは、ユーザーエクスペリエンスの観点ではマイナス要因となるリスクが高いです。
記事を読み終わったところで、購読しますか？というボタンが表示されるのは、ユーザーのフローを考慮しても、自然でUXに対して良好なアプローチと思います。
OneSignalのプッシュ通知購読ボタンの設置方法
OneSignalのホームページからアカウントにログインして、購読ボタンを追加するWebプッシュ通知アプリを選択します。アプリのダッシュボード上部のメニューから"SETTINGS"をクリックし設定ページを表示します。カスタムリンク プロンプトを追加設定
"Web Push Platforms"のAll Browsers (except Safari)のペンアイコン部をクリックします。
Web プッシュ設定ページが表示されます。スクロールダウンして、③ Permission Prompt Setupのセクションの"ADD A PROMPT"ボタンを押します。
Permission Prompt Editorのウィンドウが表示されます。PROMPT TYPEの中からCUSTOM LINKを選択すると、CUSTOM LINKの設定項目とプレビューが表示されます。
プッシュ通知承諾カスタムリンク プロンプト設定項目
設定項目を変更するとリアルタイムで、右側のプレビューに設定内容が反映されます。
ボタンかリンクのどちらかを選ぶことができます。
SIZE（サイズ）
大、中、小から選択可能です。
COLOR（色）
ボタンの場合は、ボタン色とテキスト色が設定できます。
SUBSCRIBE TEXT
ボタン内、またはリンクのアンカーテキストの文言を入力します。（例：プッシュ通知を購読する）
EXPLANATION （オプション）
ボタンやリンクの上に説明文をオプションで入力可能です。
ALLOW UNSUBSCRIBE（非購読ボタンの表示）
プッシュ通知を非購読するボタンを表示するか否かのスイッチです。オンにすると、非購読のテキスト入力欄が表示されます。
プレビューで設定内容を確認の上、”SAVE"ボタンを押して設定を保存します。Configure Web Pushのページに戻ります。スクロールダウンして、ページの最後にある"SAVE"ボタンを押します。
備考：
本ブログでは非購読ボタンのスイッチはオフにしています。購読しているユーザーにはボタンは表示されません。
本ブログでは非購読ボタンのスイッチはオフにしています。購読しているユーザーにはボタンは表示されません。
カスタムリンク コンテナコードの設置
Configure Web Pushのページを保存すると、”Add Code to Site"のウィンドウが表示されます。<head>タグ内に設置するOneSignalのプッシュ通知機能設定コードとカスタムリンクのコードが表示されます。<head>タグ内にOneSignalのコードを設置していない場合は、”COPY CODE"ボタンを押してコードをコピーし、Blogger ブログの<head>タグ内に設置して下さい。（「Blogger ブログにプッシュ通知を搭載する方法」の最後の部分をご参照下さい。）既にコードを<head>タグ内に設置している場合は、再設置の必要はありません。
プッシュ通知の設定コードの下に、カスタムリンク コンテナのコードが表示されています。”COPY MARKUP"のボタンを押して、コードをコピーします。（設定したプッシュ通知購読ボタンの表示を確認したら、”FINISH”ボタンを押して下さい。）
上のページでコピーしたカスタムリンクのコードを、Blogger ブログの任意の場所（お勧めは記事下）に貼り付けます。コードの設置方法は、テンプレートの種類によって異なります。基本的には、広告コードの設置と同様です。（HTMLテキストガジェットを使用したり、マニュアルでHTML入力モードで記事下に入力します。）
ブラウザーでブログの記事などを表示して、プッシュ通知確認ボタンが表示されているか確認します。以上で作業完了です。
コメント