プレオプトインを適用させる

Update: 2026/9/18

プレオプトインはブラウザの通知ダイアログの前に通知許可を求める2段階方式の通知許可ステップを指します。

【↓プレオプトイン対応時の挙動参考動画↓】

メリット：ユーザーへの丁寧な案内が可能になります。
デメリット：通知許諾まで２段階での認証となるため許諾率が５割～７割ほど減少する可能性があります。
[Point!!]：
- 「必須ブラウザのみ」をご選択いただくことで一部のプレオプトイン対応が必須であるブラウザのみを対象としてプレオプトインを表示します。
- 上記により、プレオプトインを全てのブラウザに適応した場合に生じる許諾率の減少を抑えつつ、必要なブラウザでのみ表示させることが可能です。
注意点
- WEBサイト上の広告表示やその他何らかのポップアップ機能などを設置している場合は位置のご調整にお気をつけ下さいませ。

【↓SPでのプレオプトイン対応例画像↓】

設定方法

1. 管理画面トップのサイドメニューより「ブラウザプッシュタグ設定」をクリックします。

2. ブラウザプッシュタグ・モジュールファイルのチェックボックスに適用させたい項目にチェックを入れます。

プレオプトイン対応・Android・PCでプレオプトインが適用されます。・「なし」「全てのブラウザ」「必須ブラウザのみ」の3項目から選択できます。
iOS対応・iOS・iPadOSでプレオプトインが適用されます。・※iOS・iPadOSでWEBプッシュを利用する際に必須です。
ブロック解除バー対応・通知ブロックされている場合に通知を促すポップアップが表示されます。・※ボタンクリックでブロック解除の案内が表示されます。

3. プレオプトイン・ブロック解除バーオプションタグの項目を入力します。

V1（旧デザイン）は将来的に廃止予定です。（既にV1を設置済みの場合はV2への載せ替えをご検討ください）
V2（新デザイン）では、画像・タイトル・説明文などのサイズや色などをより自由にカスタマイズすることで、サイトイメージに合った表示が可能です。

※ V2のオプションタグを設置しない場合、V1（旧デザイン）のデフォルト表示が適用されます。
「プレオプトイン対応」「iOS対応」「ブロック解除バー対応」を使用する際は、必ずV2（新デザイン）のオプションタグを設置をお願い致します。

※ 「プレビュー」ボタンをクリックすると、実際にサイトに表示されるイメージを見ながら位置やデザインの確認が可能です。

設定項目	説明
大型画像	ダイアログ上部に横幅いっぱいで表示される画像（省略可）形式: PNG / JPEG / GIF、容量: 256KB以下。スマホ（画面の横幅が430px以下）では表示されません。
アイコン画像	左側に表示されるアイコン（省略可）形式: PNG / JPEG、192×192px 推奨、容量 8KB以下。正方形以外、または容量超過時は自動でトリミング・圧縮されます。
タイトル	ダイアログのタイトル文言（省略可）
説明文	タイトルの下の案内文言（省略可）
ボタンラベル	拒否ボタン／許可ボタンの表示文言（省略不可）空欄の場合はそれぞれ「今はしない」／「受け取る」が表示されます。
次回表示までの間隔	拒否ボタンを押されて次に表示するまでの日数（1〜90日）
スタイル設定	表示位置・色・フォントサイズ・ボーダーなどの詳細設定ができます。「スタイル設定を開く」ボタンでプレオプトインスタイル設定ダイアログが開きます。
オプションタグ	上記の設定項目を元に自動生成されるスクリプトタグ。コピーして WEB ページに貼り付けます（詳細は下記手順4を参照）。

※ V1 オプションタグを設置しない場合、V1（旧デザイン）のデフォルト表示が適用されます。

※ 「プレビュー」ボタンをクリックすると、実際にサイトに表示されるイメージを見ながら位置やデザインの確認が可能です。

設定項目	説明
アイコン画像URL	左側に表示するアイコン設定。 ※サイトデザインに沿ったアイコンを推奨。正方形であれば、自動圧縮につき画像容量制限はなし。
ダイアログテキスト	案内文言。自由に編集可。どちらでも適応できる名称を推奨。
ボタンテキスト	通知を許可するボタン。自由に編集可。どちらでも適応できる名称を推奨。
次回表示までの間隔	×印で消した場合の次回までの間隔。3日以上の指定は直接interval数値を変更。
表示のカスタマイズ	「あり」を選択すると表示位置・サイズ・デザイン・ボタンタイプ・ポップアップの閉じ方を選択出来る。サイトデザインに応じたカスタマイズを推奨。
オプションタグ	上記の設定項目を元に自動生成されるスクリプトタグ。コピーして WEB ページに貼り付けます（詳細は下記手順4を参照）。

4. 生成された2つのスクリプトタグをコピーして、WEBページに貼り付けます。

※ブラウザプッシュタグなどのスクリプトタグは各種タグ管理ツール（GoogleTagManagerなど）で設置可能です。
詳しくはGTMでタグを設置する方法をご確認ください。

<!-- プレオプトイン・ブロック解除バーオプションタグ(V2) -->
<script>
var pushonePreOptinDialogConfig = {
  version: 'v2',
  iconUrl: "https://cdn.webpush.jp/（画像URL）",
  title: "最新情報をいち早くお届け！",
  description: "サイトを訪れなくても通知で受け取れます（いつでも解除できます）",
  interval: 86400,
  style: {
    left: "50%",
    right: "auto",
    translate: "-50% 0"
  }
};
</script>

<!-- ブラウザプッシュタグ（プレオプトイン対応/[必須ブラウザのみ]） -->
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="（AccessTokenの値が反映されます）"
data-optindialog="on" data-requiredbrowser="on"></script>

<!-- プレオプトイン・ブロック解除バーオプションタグ(V1) -->
<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>

<!-- ブラウザプッシュタグ（プレオプトイン対応/[必須ブラウザのみ]） -->
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="（AccessTokenの値が反映されます）"
data-optindialog="on" data-requiredbrowser="on"></script>

設定解除方法

1. 管理画面トップのサイドメニューより「ブラウザプッシュタグ設定」をクリックします。

2. ブラウザプッシュタグ・モジュールファイルのチェックボックスの適用を外したい項目を確認し、「なし」に変更。

上記画像のように「なし」を選択し直すとタグが一部切り替わります。
変更されたブラウザプッシュタグをコピーし、サイトへ適応し直してください。
※管理画面上のみの変更ではサイト上の表記は変わりません。ご注意ください。