プレオプトインを適用させる
Update: 2023/12/15
プレオプトインを適用させる
プレオプトインはブラウザの通知ダイアログの前に通知許可を求める2段階方式の通知許可ステップを指します。
【↓プレオプトイン対応時の挙動参考動画↓】
-
機能メリット：ユーザーへの丁寧な案内が可能になります。
-
機能デメリット：通知許諾まで２段階での認証となるため許諾率が５割～７割ほど減少する可能性があります。
-
[Point!!]：「必須ブラウザのみ」をご選択いただくことで一部のプレオプトイン対応が必須であるブラウザのみを対象としてプレオプトインを表示します。
上記により、プレオプトインを全てのブラウザに適応した場合に生じる許諾率の減少を抑えつつ、必要なブラウザでのみ表示させることが可能です。
※表示位置やサイズ・デザインの一部を管理画面よりカスタマイズ可能です。 WEBサイト上の広告表示やその他何らかのポップアップ機能などを設置している場合は位置のご調整にお気をつけ下さいませ。
【↓SPでのプレオプトイン対応例画像↓】
【設定方法】
- 管理画面トップのサイドメニューより「ブラウザプッシュタグ設定」をクリックします。
- ブラウザプッシュタグ・モジュールファイルの「プレオプトイン対応」のチェックボックスに適用させたい項目にチェックを入れます。
- プレオプトイン対応は、「なし」「全てのブラウザ」「必須ブラウザのみ」の3項目から選択出来ます。
※画像は「必須ブラウザのみ」を選択。
| プレオプトイン対応 | iOS対応 | ブロック解除バー対応 | |
|---|---|---|---|
| 機能説明 | Android・PC限定でプレオプトインが適用される。 「なし」「全てのブラウザ」「必須ブラウザのみ」の3項目から選択。 |
iOS・iPadOS限定でプレオプトインが適用される。 ※iOS・iPadOSでWEBプッシュを利用する際に必須。 |
通知ブロックされている場合に通知を促すポップアップを表示する。 ※ボタンクリックでブロック解除の案内が表示される仕様。 |
| 画像 |  |
|
 |
- プレオプトイン・ブロック解除バーオプションタグの項目を入力します。
※画面上にプレオプトインのデザインイメージが表示されますので、参考にご入力ください。
※以下のオプションタグを設置しない場合、デフォルト表記が適用されます。
是非オプションタグをカスタマイズして、ご利用くださいませ。
| 項目 | 説明 |
|---|---|
| 「サンプルを表示する」 | チェックが入っている状態で、実際にサイトに表記される位置やデザインの確認が可能。管理画面操作上、不都合な場所にある場合はチェックを外すと非表示となる。 |
| アイコン画像 | プレオプトイン・ブロック解除バーの左側に位置するアイコン設定。 ※実際にサイト下部に出現するためサイトデザインに沿ったアイコンを推奨。 正方形であれば、自動圧縮につき画像容量制限はなし。 |
| ダイアログテキスト | プレオプトイン・ブロック解除バー共通の案内文言。自由に編集可。どちらでも適応できる名称を推奨。 |
| ボタンテキスト | プレオプトイン・ブロック解除バー共通のボタン。自由に編集可。どちらでも適応できる名称を推奨。 |
| 次回表示までの間隔 | プレオプトイン・ブロック解除バー共通で×印で消した場合の次回までの間隔。タグ内、intervalに適応される。3日以上の指定は直接interval数値を変更。 |
| 表示のカスタマイズ | 「あり」を選択すると表示位置・サイズ・デザイン・ボタンタイプ・ポップアップの閉じ方を選択出来る。サイトデザインに応じたカスタマイズを推奨。 |
- 生成された2つのスクリプトタグをコピーして、WEBページに貼り付けます。（コピーアイコンをクリックでコピーできます。）
// ブラウザプッシュタグ（プレオプトイン対応/[必須ブラウザのみ]）
<script src="https://dev-cdn.webpush.jp/js/pushone.js" charset="utf-8"
data-bptoken="（AccessTokenの値が反映されます）" data-optindialog="on" data-requiredbrowser="on">
</script>
// プレオプトイン・ブロック解除バーオプションタグ
<script>
var CoinsOptinDialogOption = {
icon: 'https://cdn.webpush.jp/（画像URL）',
message: 'お得なクーポンを受け取りませんか？',
button: '受け取る',
interval: 259200,
customStyle: {
vertical: 'top',
horizontal: 'left',
size: 'small',
design: 1,
buttonType: 1,
close: {
type: 'cross'
}
}
}
</script>
※ブラウザプッシュタグなどのスクリプトタグは各種タグ管理ツール（GoogleTagManagerなど）で設置可能です。
（詳しくはGTMでタグを設置する方法をご確認ください。）
【設定解除方法】
- 管理画面トップのサイドメニューより「ブラウザプッシュタグ設定」をクリックします。
- ブラウザプッシュタグ・モジュールファイルのチェックボックスの適用を外したい項目を確認し、「なし」に変更。
↓プレオプトイン対応を外したい場合↓
上記画像のように「なし」を選択し直すとタグが一部切り替わりますので、
変更されたタグをコピーし、サイトへ適応し直してください。
※管理画面上のみの変更ではサイト上の表記は変わりません。ご注意ください。