$hide=page-404-mobile

$type=carousel$columns=4$cat=hide$show=home

Blogger ブログ 記事下にプッシュ通知購読ボタンを設置する方法

プッシュ通知の大手プロバイダー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の設定項目とプレビューが表示されます。


プッシュ通知承諾カスタムリンク プロンプト設定項目

設定項目を変更するとリアルタイムで、右側のプレビューに設定内容が反映されます。

STYLE(スタイル)

ボタンかリンクのどちらかを選ぶことができます。

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入力モードで記事下に入力します。)

ブラウザーでブログの記事などを表示して、プッシュ通知確認ボタンが表示されているか確認します。以上で作業完了です。

コメント

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,10,Blogger 活用法,18,Bloggerの基本機能と使い方,9,Bloggerの基本設定,7,MagOne,3,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : Blogger ブログ 記事下にプッシュ通知購読ボタンを設置する方法
Blogger ブログ 記事下にプッシュ通知購読ボタンを設置する方法
プッシュ通知の大手プロバイダーOneSignalが、新しいユーザー承諾プロンプトのオプションを追加したと発表しました。追加されたのは、プッシュ通知購読のボタン、またはリンクをサイト内の任意の箇所に自由に設置できる機能です。
https://1.bp.blogspot.com/-ziuHSzfaSEI/W3W5Ce30pJI/AAAAAAAAC1M/N7NL0IbGkmEQYXQvifUtgVS2Et4jueM_gCK4BGAYYCw/s640/Push%2Bnotification%2Bcustom%2Bprompt%2Bin%2Bthe%2Bbottom%2Bof%2Barticle.png
https://1.bp.blogspot.com/-ziuHSzfaSEI/W3W5Ce30pJI/AAAAAAAAC1M/N7NL0IbGkmEQYXQvifUtgVS2Et4jueM_gCK4BGAYYCw/s72-c/Push%2Bnotification%2Bcustom%2Bprompt%2Bin%2Bthe%2Bbottom%2Bof%2Barticle.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/08/push-notification-custom-prompt.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/08/push-notification-custom-prompt.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事 ラベル アーカイブ SEARCH ALL POSTS お探しのページが見つかりませんでした。 Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy