メインコンテンツへスキップ

​
概要

「プロンプト」とは、プッシュ通知を送信する許可をユーザーに求めるプロセスを指します。プロンプトは、ブラウザまたはモバイルアプリによって表示されるポップアップメッセージであり、サブスクライブしてプッシュ通知を受信するには、ユーザーが「許可」をクリックする必要があります。 WebプッシュはDesktop、Android、iOSで動作しますが、iOSのWebプッシュには追加の設定手順が必要であることに注意してください。モバイルアプリをお持ちの場合は、アプリ内メッセージでプッシュ権限をプロンプトする方法をご覧ください。 ブラウザは独自のネイティブなシステムレベルの権限プロンプトを提供しており、ユーザーがWebサイトにサブスクライブするには、これを表示して「許可」をクリックする必要があります。ブラウザは現在、ネイティブ権限プロンプトを表示する際にWebサイトがより選択的であることを強く推奨しています。これが、ネイティブプロンプトの前にOneSignalプロンプトまたは独自のカスタム「ソフトプロンプト」を使用することが推奨される理由です。

​
OneSignalプロンプト（ソフトプロンプト）

OneSignalソフトプロンプトは、ブラウザのネイティブ権限ダイアログの前に表示される、ユーザーフレンドリーでカスタマイズ可能なプロンプトです。これらのプロンプトは、ユーザーを通知にサブスクライブさせるものではありません。代わりに、次のような役割を果たします：
  1. 通知（プッシュ、メール、またはSMS）へのサブスクライブの価値を説明します。
  2. ブラウザが権限リクエストを自動的にブロックするのを防ぎます。
  3. ユーザーが関心を示した後にのみ、ネイティブブラウザプロンプトを起動します。
ソフトプロンプトはブラウザによって推奨されており、ドメインの評判を保護しながらオプトイン率を最大化するのに役立ちます。

​
プロンプトアイコン

Webプッシュ通知に表示されるアイコンをカスタマイズするには、OneSignalダッシュボードに移動します：Settings > Push & In-App > Web Settings。 Site Setupセクションで、Default Icon URLを設定します。このアイコンは、特に指定しない限り、すべての通知に表示されます。
  • 受け入れられる形式：.pngまたは.jpg
  • 推奨サイズ：256x256ピクセル（Safariの要件を満たすため）
  • 設定されていない場合、OneSignalは汎用のベルアイコンを使用します
この設定はいつでも変更できます。

画像は、Webプッシュ設定のSite Setupセクションを示しています。ここで、Webサイト名、サイトURL、およびデフォルトアイコンを設定します。

​
権限プロンプトの設定

ユーザーのサブスクリプションを促進するために、サイトに表示したいプロンプトを設定します。OneSignalダッシュボードで、Settings > Push & In-App > Web Settings > Permission Prompt Setupに移動します。 そこから、Add Promptをクリックして、OneSignalの利用可能なプロンプトタイプから選択します。リストに既に表示されている既存のプロンプトを編集することもできます。

新しいプロンプトを追加するか、編集したいプロンプトを選択します。

各プロンプトタイプには、異なるユースケースと表示動作があります。個別に使用することも、組み合わせて使用して、WebサイトのUXに合った方法でユーザーをサブスクリプションプロセスに導くこともできます。 利用可能なプロンプトは次のとおりです：
  • Slidedown：プッシュ通知とオプションのカテゴリ選択に使用される、視覚的に目立つプロンプト。
  • Email/Phoneプロンプト：ユーザーのメールアドレス、電話番号、またはその両方を収集するために使用されます。
  • Subscription bellプロンプト：プッシュサブスクリプション用の永続的なフローティングウィジェット。通常、サイトの下隅に配置されます。
  • Custom linkプロンプト：サイトに埋め込まれたカスタマイズ可能なボタンまたはリンクで、ネイティブブラウザプロンプトをトリガーします。
  • Native permission prompt：ユーザーがプッシュ通知を受信するために承認する必要がある、必須のブラウザレベルのプロンプト。

​
Slidedown & category

SlideおよびCategoryプロンプトは、デスクトップでは画面の上部中央に、モバイルでは下部中央に目立つように表示されます。これらは、必須のnative permission promptの前に表示される、高い視認性を持つソフトプロンプトです。これら自体がユーザーをサブスクライブさせるわけではありませんが、サブスクリプションフローを開始するのに役立ちます。

カテゴリタグ付きのSlideプロンプトを示す例。

Slideプロンプトを追加するには：
  1. Settings > Push & In-App > Web Settings > Permission Prompt Setupに移動します
  2. Add Prompt > Push Prompt > Push Slide Promptを選択します
Custom Codeセットアップの場合、OneSignalのinitコード内のpromptOptionsオブジェクトで、slidedownプロパティを使用します。詳細については、Web SDK Referenceをご覧ください。

プッシュスライドプロンプトのオプション。

プロンプトのトリガーの詳細については、Auto prompt & display settingsをご覧ください。

​
Slideプロンプトテキスト

スライドプロンプトに表示されるテキストをカスタマイズできます：
  • アクションメッセージ：最大90文字
  • ボタンラベル：各最大15文字
  • フォント、サイズ、または色のカスタマイズは現在サポートされていません
ダッシュボードでテキストカスタマイズオプションを有効にします。テキストが入力されていない場合は、デフォルトのテキストが使用されます。

スライドプロンプトのテキストオプション。

完了したら、Doneをクリックし、次のページで再度Saveをクリックして、これを有効にします。
Custom Codeセットアップの場合、OneSignalのinitコード内のpromptOptionsオブジェクトで、textプロパティを使用します。詳細については、Web SDK Referenceをご覧ください。

​
カテゴリ

Slidedownプロンプトにカテゴリを追加することで強化できます。カテゴリは、特定のメッセージトピック（例：ニュース、セール、更新）への関心をユーザーが示すことができるチェックボックスです。
  • 最大10個のカテゴリが許可されます
  • 各カテゴリは、1（選択済み）または0（未選択）のData Tagとして保存されます
  • ユーザーの好みによるセグメンテーションとメッセージのターゲティングに役立ちます
後でカテゴリプロンプトを再度表示して、ユーザーが設定を更新できるようにすることができます。以前に選択した値は、上書きされない限り保持されます。
  • Label：ユーザーがプロンプトで見るもの。最初の文字を大文字にすることをお勧めします。
  • Tag Key：OneSignalのタグになるもの。小文字とアンダースコア（_）をスペースの代わりに使用することをお勧めします。
  • Update Instructions、PositiveおよびNegativeボタン：ユーザーがすでにプッシュにサブスクライブした後にカテゴリプロンプトを再度表示することを選択した場合、アクションメッセージの代わりに更新手順が表示されます。これにより、ユーザーにカテゴリを更新できることを通知できます。

カテゴリの例。Labelはユーザーが見るもので、tag keyは値が「1」のタグキーとして設定されるものです。

完了したら、Doneをクリックし、次のページで再度Saveをクリックして、これを有効にします。
Custom Codeセットアップの場合、OneSignalのinitコード内のpromptOptionsオブジェクトで、categoriesプロパティを使用します。詳細については、Web SDK Referenceをご覧ください。
プロンプトのトリガーの詳細については、Auto prompt & display settingsをご覧ください。

​
Email & phone number prompt

Email & Phoneプロンプトは、Slidedown内で直接オプションのユーザー連絡先情報を収集します。各フィールドには、正しい形式を保証する組み込みの検証があります。 送信されると：
  • ユーザーのために新しいEmailおよび/またはSMSサブスクリプションが作成されます
  • これらのチャネルを介してメッセージングを開始できます
このプロンプトを追加するには：
  • Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Email/Phone Promptに移動します。

Email & Phone Number Prompt Setup

表示される入力フィールド、テキストラベル、および自動プロンプト遅延をカスタマイズします。

Email & Phone Number Prompt Setup

完了したら、Doneを押し、次のページで再度Saveを押して、これを有効にします。
Custom Codeセットアップの場合、OneSignalのinitコード内のpromptOptionsオブジェクトに、typeをemail、sms、またはsmsAndEmailのいずれかに追加します。詳細については、Web SDK Referenceをご覧ください。
プロンプトのトリガーの詳細については、Auto prompt & display settingsをご覧ください。

​
Subscription bell prompt

Subscription Bell Promptは、Webサイトの下隅に表示される小さな永続的なウィジェットです。サブスクライブしていないユーザーがクリックすると、Native Browser Promptがトリガーされます。 最小限のフットプリントのため、ベルは常に表示したままにすることができ、継続的なオプトイン機会のための受動的でありながら効果的なオプションとなります。却下を必要とせず、ユーザーにサブスクライブするタイミングをコントロールする権限を提供します。

Subscription Bell Prompt

OneSignal Bell Promptの色、サイズ、下部位置、テキストなどをカスタマイズできます！🛑 現在、アイコン画像を変更したり、ベルを上隅に配置したりすることはできません。
Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Subscription Bell Promptに移動しますベルの以下をカスタマイズできます：
  • 色
  • サイズ
  • 下部位置（左または右）
  • テキストとラベル
設定後、Doneをクリックしてから、Saveをクリックして変更を適用します。

ダッシュボードのSubscription Bell Setup

Web SDK初期化オプションでnotifyButtonパラメータを使用します。Bell Promptのカスタマイズのために、さまざまな例を切り替えることができます。非表示： ユーザーがサブスクライブした後にサブスクリプションベルを非表示にするか、特定のページでのみ表示するには、初期化中のdisplayPredicate関数で値false または 値falseに解決されるPromiseを返すようにしてください。この関数は、サブスクリプションベルが表示される前に評価されます。サブスクリプションベルを表示するには、他の値を返すことができます。
// その他のinit optionsをここに記述
notifyButton: {
    enable: true, /* Subscription Bellを使用するために必要 */
    size: 'medium', /* 'small'、'medium'、または'large'のいずれか */
    theme: 'default', /* 'default'（赤-白）または'inverse'（白-赤）のいずれか */
    position: 'bottom-right', /* 'bottom-left'または'bottom-right'のいずれか */
    offset: {
        bottom: '0px',
        left: '0px', /* bottom-leftの場合のみ適用 */
        right: '0px' /* bottom-rightの場合のみ適用 */
    },
    showCredit: false, /* OneSignalロゴを非表示 */
    text: {
        'tip.state.unsubscribed': 'Subscribe to notifications',
        'tip.state.subscribed': "You're subscribed to notifications",
        'tip.state.blocked': "You've blocked notifications",
        'message.prenotify': 'Click to subscribe to notifications',
        'message.action.subscribed': "Thanks for subscribing!",
        'message.action.resubscribed': "You're subscribed to notifications",
        'message.action.unsubscribed': "You won't receive notifications again",
        'dialog.main.title': 'Manage Site Notifications',
        'dialog.main.button.subscribe': 'SUBSCRIBE',
        'dialog.main.button.unsubscribe': 'UNSUBSCRIBE',
        'dialog.blocked.title': 'Unblock Notifications',
        'dialog.blocked.message': "Follow these instructions to allow notifications:"
    }
}
Custom Link Promptは、Webサイトのどこにでも埋め込むことができる、ユーザーがトリガーするボタンまたはリンクです。クリックすると、プッシュ通知のNative Browser Promptが表示されます。

Custom Link Prompt

一般的なユースケース：
  • ブログ投稿の下：「この記事が気に入りましたか？投稿後すぐに更新を受け取りましょう！」
  • サイトのフッター内
  • 固定ヘッダーまたはフローティングツールバー内
いつでもウィジェットの外観を変更するために、すべての要素には特別なクラスonesignal-resetがあり、要素から以前のスタイリングを削除して、当社の内部スタイルとの競合がなく、ダッシュボードで定義したとおりに見えるようにします。OneSignalのスタイルを再定義する必要がある場合は、Custom Linkウィジェットで使用されるクラスの簡単なリファレンスを次に示します
クラス名適用対象
onesignal-customlink-containerメインコンテナ
onesignal-customlink-subscribeアクションボタン
onesignal-customlink-explanationカスタム説明テキストを含む段落
state-subscribedメインコンテナ内のすべてのコンポーネント
state-unsubscribedメインコンテナ内のすべてのコンポーネント
buttonボタンモードの場合のアクションボタン
linkリンクモードの場合のアクションボタン
smallメインコンテナ内のすべてのコンポーネント
mediumメインコンテナ内のすべてのコンポーネント
largeメインコンテナ内のすべてのコンポーネント
hideunsubscribeEnabledがfalseに設定されている場合のメインコンテナ内のすべてのコンポーネント
これらのいずれかをオーバーライドするには、より高い特異性を持つCSSルールを作成する必要があります。クラス名を親要素IDと組み合わせれば十分です。ただし、競合に注意してください。当社の内部スタイルは変更される可能性があります。

​
Native permission prompt

ネイティブ権限プロンプトは、ユーザーがWebサイトからプッシュ通知にサブスクライブするために承認する必要がある、ブラウザによって制御されるダイアログです。このプロンプトは：
  • サブスクリプションに必須
  • OneSignalソフトプロンプト（SlidedownやCustom Linkなど）の後に自動的にトリガーされます
  • 外観、テキスト、または動作はカスタマイズできません

Native Permission Prompt

​
ブラウザのネイティブプロンプト動作

さまざまなブラウザは、スパムの権限リクエストを減らすために独自の動作と制限を課します：

​
Chrome

Chrome 80+は、完全なプロンプトの代わりに静かなUIを表示する場合があります：
  • プロンプトを頻繁に拒否するユーザーに自動的に適用されます
  • 拒否率が高いサイトにも適用されます
ユーザーがネイティブプロンプトの「X」をクリックした場合、Chromeはバックオフロジックを実装します：
  • プロンプトを表示する機会は3回あります
  • 3回目の却下後、プロンプトは7日間抑制されます（ソース）。

​
Firefox

  • Firefox 72+は、プロンプトをトリガーするためにユーザージェスチャーを必要とします
  • 自動プロンプトはブロックされ、ユーザーはサイト要素と積極的に対話する必要があります

​
Safari

  • Safari 12.1+のプロンプトはユーザージェスチャーを必要とします
  • 直接的な対話によってトリガーされない限り、自動プロンプトは静かにブロックされます

​
Edge

Edgeは信頼ベースのモデルを使用します：
  • サイトが信頼されていない場合、プロンプトは抑制され、ブラウザバーのベルアイコンに置き換えられます：

Edgeで馴染みのないサイトまたは信頼されていないサイトに表示されるベルアイコン。

  • サイトが信頼されている場合、ネイティブプロンプトは通常どおり表示されます：

Edgeで信頼されているサイトの場合、ネイティブプロンプトが直接表示されます。

​
自動プロンプトと表示設定

エンゲージメントを最大化し、ユーザーを中断させないために、サイトでしばらく過ごした後にプロンプトを表示することをお勧めします。OneSignalでは、2つの遅延条件を使用してユーザーの動作に基づいてプロンプトを自動的に表示できます：
  • Page Views：ユーザーがサイトの任意のページを読み込んだ回数
  • Seconds on Page：ユーザーがページで過ごす必要がある時間
これらの遅延はAND条件を使用して適用されます。つまり、プロンプトが表示される前に両方が満たされる必要があります。 例： 遅延を3ページビューと30秒に設定した場合、プロンプトは3回目のページ読み込み時に、30秒経過後に表示されます。ユーザーがプロンプトと対話しない場合、クリックまたは却下されるまで、各ページ読み込み（30秒後）で引き続き表示されます。
  • Settings > Push & In-App > Web Settings > Permission Prompt Setupに移動します
  • プロンプトを選択するか、新しいプロンプトを作成します
  • Auto Promptを有効にします
  • 遅延の設定（ページビューと時間遅延）を設定します

例：このプロンプトは、30秒後の3回目のページビューで表示されるように設定されています。

  • Done、次にSaveをクリックします
プロンプトをプログラムでトリガーする場合は、Auto Promptを無効にして、Web SDK Prompt promptメソッドを使用します。
OneSignalのinitコード内のpromptOptionsオブジェクトで、autoPromptおよびdelayオプションを使用します。目的のslidedownまたはnativeプロンプトを直接トリガーするメソッドもあります。詳細については、Web SDK Referenceをご覧ください。
プロンプトがいつ表示されるかをより細かく制御したい場合（たとえば、特定のページまたは特定のアクションの後にのみ）：
  1. Auto Promptを無効にします
  2. SDKのSlidedownまたはNative Promptメソッドを使用して、コードを介してプロンプトを表示します

​
Slidedownプロンプトのバックオフロジック

Slidedown（Push、Category、またはEmail/Phone）プロンプトが表示されて却下されると（Allow、Cancel、またはダイアログを閉じることによって）、定義されたスケジュールでバックオフして再表示されます：
インタラクションの結果次のプロンプトのタイミング
最初の却下3日間待機
2回目の却下7日間待機
3回目以降の却下（サブスクライブされていない）30日間待機
たとえば、ユーザーがSlidedownで「Allow」をクリックしたが、ブラウザのネイティブプロンプトで「X」をクリックした場合（サブスクライブせずに）、Slidedownは上記のバックオフサイクルに従います。
このロジックは、Push、Category、およびEmail/Phone Slidedownプロンプトに適用されます。Web SDK Slidedown promptメソッドを使用してバックオフロジックをバイパスできます。ネイティブプロンプトのバックオフロジックについては、Browser native prompt behaviorをご覧ください。ネイティブプロンプトのバックオフロジックはブラウザによって制御されているため、バイパスすることはできません。
ユーザーがCookieまたはブラウザデータをクリアすると、バックオフサイクルがリセットされ、プロンプトが初めてのように再度表示される場合があります。

​
FAQ

ソーシャルメディアアプリ（Instagram、Facebook、その他）を介してWebサイトを表示しようとする場合、Webビューを使用している場合はWebプロンプトが表示されない場合があります。WebビューはWebプッシュ通知をサポートしていません。アプリは、Webプッシュ通知をサポートするブラウザでWebサイトを開く必要があります。
現在、Custom Code Setupを選択する必要があります。次に、ユーザーのブラウザ言語を検出してプロンプトの言語をプログラムで変更し、異なるテキストでOneSignal SDKを初期化します。ネイティブPermission Promptは、ブラウザの設定言語に自動的に翻訳されます。
Custom Code Setupを使用して、さまざまなプロンプトオプションでOneSignalを初期化できます。OneSignalを初期化するA/B/C/Dなどのテストをトリガーする独自の方法を設定する必要があります。ボーナスとして、Subscription Changeメソッドを使用して、ユーザーがサブスクライブしたことを検出し、どのテストがサブスクリプションを獲得したかに基づいてData Tagsを追加できます。
はい！ガイドAuto-Segment By Subscription Pageをご覧ください。
ベルの画像は変更できませんが、色やテキストを変更したり、ページの左下または右下に配置したりできます。
はい！これには、Custom Code Setupを使用し、上記のセットアップ構成に基づいてコードを介してカテゴリを追加する必要があります。
OneSignal Web SDKには、画面に表示されたとき、閉じられたとき、および「Allow」または「Cancel」アクションを検出するためのSlide Prompt Event Methodsがあります。
OneSignalプロンプトについては、Slidedownプロンプトのバックオフロジックをご覧ください。ネイティブ権限プロンプトについては、Browser native prompt behaviorをご覧ください。
Auto Promptオプションを無効にする必要があります。次に、プロンプトを表示したい特定のページにSlidedown promptコードを追加します。Bellプロンプトを使用している場合、現時点ではページごとに無効にすることはできません。
Firefox 72+では、ネイティブブラウザプロンプトを表示するためにユーザーがボタンをクリックする必要がある変更があります。ネイティブブラウザプロンプトを自動的に表示しようとすると、次のようなブラウザ内のアイコンが表示されます：

Firefoxアイコン

ユーザーは、FirefoxでネイティブPermission Promptを表示するために、このアイコンをクリックする必要があります。これが、いずれの場合も2ステップのオプトインが必要であるため、FirefoxでSlide Promptをデフォルトにする理由です。Slide Promptをデフォルトとして表示したくない場合は、Prompt Editorで Auto Promptスイッチをオフにし（Saveボタンを押すことを忘れないでください）、次にWeb SDK requestPermission()メソッドを使用します。
2017年12月5日、Googleは、Chrome for AndroidでネイティブPermission Promptの外観を変更しました。これは、サイトの画面全体を占めるユーザー非友好的なポップアップです。ユーザーがサイトで悪い体験をするのを防ぐために、Androidでダブルプロンプトを意図的に追加しました。Slide Promptを表示したくない場合は、Prompt Editorで Auto Promptスイッチをオフにし（Saveボタンを押すことを忘れないでください）、次にWeb SDK requestPermission()メソッドを使用します。
シークレットモード、プライベートブラウザモード、またはゲストブラウザモードになっていないことを確認してください。
次の条件のいずれかが真である場合、ブラウザのネイティブPermission Promptが表示されない場合があります：
  • ブラウザがプロンプトの表示を妨げた。
  • ユーザーはすでに通知を許可しているか、すでにサブスクライブしています
  • ユーザーが通知をブロックしました。ユーザーが「Block」（Chrome）、「Don’t Allow」（Safari）、または「Never Allow」（Firefox）をクリックした場合、再度プロンプトを表示することはできず、ブラウザ設定で複数ステップのプロセスを介してサブスクライブする必要があります。これがOneSignalプロンプトの使用が推奨される理由です。
  • Auto Promptがオフになっており、requestPermission();の呼び出しがありません
  • ネイティブPermission Promptは、シークレットモード、プライベートブラウザモード、またはゲストブラウザモードでは表示されません。また、Safari 12.1+またはFirefox 72+ではすぐには表示されません（詳細）。
  • Webプッシュをサポートするブラウザとデバイスを使用していることを確認してください。
プロンプト設定を確認して、Auto Promptがオンになっているか、Web SDKを使用してユーザーにプロンプトを表示していることを確認してください。iOSの場合、サブスクリプションのためにユーザーにプロンプトを表示するための追加の要件があります。詳細については、Mobile Web Push for iOS/iPadOSガイドをご覧ください。最後に、これらの手順に従ってCookieとブラウザキャッシュをリセットして、初めてのユーザーのようにサイトにアクセスしてください。