プッシュ通知はユーザーとの交流を促進する機能です。プッシュ通知は、モバイルアプリやFacebook, Twitterを始めとするSNSなどで多く利用されていますが、ウェッブサイトでもプッシュ通知を搭載することができます。
本記事では、Blogger ブログにプッシュ通知を搭載する方法を紹介します。WordPressのサイトでのプッシュ通知の搭載方法は以下の記事をご参照下さい。
[WordPress サイトにプッシュ通知機能を搭載する方法 ##external-link##]
[post_ads]
プッシュ通知はユーザーエンゲージメントツール
サイトの更新情報をユーザーに伝える方法は、SNSを使用することが多いと思います。ユーザーやサイトによっては、フィードを使用してサイトの更新情報を入手することもあります。
サイトの更新情報を発信することは様々な手段、ツールを使用することが可能です。プッシュ通知もその一つです。サイトによっては、プッシュ通知は効果的なユーザーとのエンゲージメントツールとなります。
ブロギングライフの場合、プッシュ通知を購読してくれるユーザーが比較的多いです。
Blogger ブログにプッシュ通知を搭載する方法
OneSignalは、プッシュ通知のサービスプロバイダーです。OneSignalを使用すると無料で簡単にBloggerのブログにプッシュ通知を搭載することができます。OneSignalのアカウントを作成する
OneSignalのホームページ にアクセスして、”Web Push Notifications"の"Get Started"のボタンを押します。
アカウント作成の小ウインドウが開かれます。メールアドレスとパスワードを入力し、利用規約とプライバシーポリシーを確認の上、同意できる場合はボックスにチェックを入れて、”Create account"ボタンを押します。
Webプッシュ通知アプリの追加
作成したアカウントにログインし、アカウントページの"Add a new app"をクリックすると、以下の様なアプリの追加用ショウウィンドウが表示されます。アプリの名前（例：”Blogger101 プッシュ通知”）を入力して、"Create"を押します。
プラットフォームの選択
プラットフォーム選択の小ウィンドウが表示されます。"Web Push"を選択して、"Next"を押します。
Webプッシュの機能設定
Webプッシュの機能設定ページが表示されます。① Choose Integration のセクションで、"WordPress Plugin or Website Builder"を選んで表示されるCMSの中から、Bloggerを選択します。
② Blogger Site Setupの設定項目が表示されます。サイト名、サイトURL、ラベル名を入力します。デフォルトアイコンのURLを入力するか"+ UPLOAD"ボタンを押して、アイコンをアップロードします。アイコンの推奨サイズは、192x192 ピクセルです。
③ Permission Prompt Setup のセクションで”Add a prompt”ボタンを押します。
”Permission Prompt”は、プッシュ通知の購読を促す通知の方法です。Subscription Bell （購読ベル）、カスタムリンク、スライドプロンプトの3種類から選ぶことができます。以下にそれぞれのプロンプトの設定方法を紹介します。お好みの方法を選んで設定して下さい。（一つでも複数でも構いません。）
カスタムリンクの設定方法については、Blogger ブログ 記事下にプッシュ通知購読ボタンを設置する方法をご覧下さい。
Subscription Bell（購読ベル）
ベル型のアイコンをページの右下か左下に表示します。ベルをクリックすると購読の確認ウィンドウが表示されます。ベルアイコンの大きさ、場所、色とアクセントを設定することができます。アイコンをマウスオーバーしたり操作した時に表示されるメッセージをカスタマイズすることができます。表示メッセージは日本語で設定できます。
スライドプロンプト
ページを表示した時にブラウザーのアドレスバーの下に購読を促す小ウィンドウを表示する機能がスライドプロンプトです。
”Customize slide prompt text"のスイッチを右にスライドすると、メッセージをカスタマイズすることができます。設定したメッセージがプレビューで表示されます。
④ Welcome Notification （オプション）
オプションで購読後にWelcome 通知を送る設定ができます。メッセージはカスタマイズ可能です。プレビューは、MacOS, Windows, Androidの切り替え表示できます。
設定内容を確認後、ページ下部のSAVE ボタンを押して、保存します。
BloggerブログにOneSignalのコードをコピー
OneSignalのWebプッシュアプリの設定ページの保存ボタンを押すと、"Add Code to Site"のページが表示されます。"COPY CODE"のボタンを押してコードをコピーします。
コードをBloggerテンプレートの<head>タグ内に設置
Bloggerブログにログインして、ダッシュボードのメニューからテーマを選択し、表示されるプレビューページの下の「HTMLの編集」ボタンを押します。
表示されるテンプレートのHTMLソースコードの<head>タグ内にOneSignalのプッシュ通知アプリ設定で取得したコードを貼り付けます。内容を確認の上、「テーマを保存」のボタンを押します。
以上でBloggerブログのプッシュ通知の搭載作業は完了です。ブログをブラウザーで表示して、プロンプトが表示され、プッシュ通知の購読ができるか確認します。
プッシュ通知メッセージの送信方法については、以下の記事をご覧下さい。
[OneSignal プッシュ通知メッセージの送信方法 ##link##]
コメント