Skip to content

Web用ソフトプッシュプロンプト

ソフトプッシュプロンプトは、ブラウザーのネイティブ通知許可プロンプトの前に表示するカスタムメッセージです。ユーザーにプッシュ通知を有効にすべき理由を説明し、初回訪問時にシステムプロンプトを表示する場合と比較してオプトイン率を向上させることができます。このガイドでは、Braze Web SDKを使用したソフトプッシュプロンプトの実装方法について、プロンプトをトリガーするタイミング、メッセージコンテンツのカスタマイズ方法、ユーザーがプッシュの価値を理解した後にリクエストを行うためのベストプラクティスを説明します。

前提条件

この機能を使用する前に、Web Braze SDKを統合する必要がある。 プッシュ通知の設定も必要です。

mParticleの組み込みキットを使用してWebでBrazeを統合している場合は、ソフトプッシュプロンプトの実装手順についてmParticleのBraze Webイベント統合のステップ3を参照してください。

ソフトプッシュプロンプトについて

サイトでは、プッシュ許可をリクエストする前に、ユーザーに「事前説明」を行い、プッシュ通知を送信する理由を伝える「ソフト」プッシュプロンプトを実装することが推奨されます。これが有用な理由は、ブラウザーがユーザーに直接プロンプトを表示できる頻度を制限しているためです。また、ユーザーが許可を拒否した場合、再度リクエストすることはできません。

また、標準のWebプッシュ統合で説明されているようにrequestPushPermission()を直接呼び出す代わりに、特別なカスタム処理を含めたい場合は、トリガーされたアプリ内メッセージを使用してください。

ソフトプッシュプロンプトの設定

ステップ1:プッシュプライマーキャンペーンを作成する

まず、Brazeダッシュボードで「Prime for Push」アプリ内メッセージングキャンペーンを作成する必要があります。

  1. 希望するテキストとスタイルでモーダルアプリ内メッセージを作成します。
  2. 次に、クリック時の動作をメッセージを閉じるに設定します。この動作は後でカスタマイズします。
  3. メッセージにキーと値のペアを追加します。キーはmsg-id、値はpush-primerです。
  4. メッセージにカスタムイベントトリガーアクション(「prime-for-push」など)を割り当てます。必要に応じて、ダッシュボードからカスタムイベントを手動で作成できます。

ステップ2:呼び出しを削除する

Braze SDKの統合で、読み込みスニペット内のautomaticallyShowInAppMessages()への呼び出しをすべて見つけて削除します。

ステップ3:統合を更新する

最後に、削除した呼び出しを以下のスニペットに置き換えます。openSession()を呼び出す前にsubscribeToInAppMessage()を呼び出してください。これにより、アプリ内メッセージリスナーがプッシュプライマーメッセージを受信するために適切なタイミングで登録されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import * as braze from "@braze/web-sdk";
// Be sure to remove any calls to braze.automaticallyShowInAppMessages()
braze.subscribeToInAppMessage(function(inAppMessage) {
  // check if message is not a control variant
  if (inAppMessage instanceof braze.inAppMessage) {
    // access the key-value pairs, defined as `extras`
    const keyValuePairs = inAppMessage.extras || {};
    // check the value of our key `msg-id` defined in the Braze dashboard
    if (keyValuePairs["msg-id"] === "push-primer") {
      // We don't want to display the soft push prompt to users on browsers
      // that don't support push, or if the user has already granted/blocked permission
      if (
        braze.isPushSupported() === false ||
        braze.isPushPermissionGranted() ||
        braze.isPushBlocked()
      ) {
        // do not call `showInAppMessage`
        return;
      }

      // user is eligible to receive the native prompt
      // register a click handler on one of the two buttons
      if (inAppMessage.buttons[0]) {
        // Prompt the user when the first button is clicked
        inAppMessage.buttons[0].subscribeToClickedEvent(function() {
          braze.requestPushPermission(
            function() {
              // success!
            },
            function() {
              // user declined
            }
          );
        });
      }
    }
  }

  // show the in-app message now
  braze.showInAppMessage(inAppMessage);
});

ユーザーにソフトプッシュプロンプトを表示したい場合は、braze.logCustomEventを呼び出します。このアプリ内メッセージをトリガーするイベント名を指定してください。

よくある質問

ソフトプッシュプロンプトとは何ですか?

ソフトプッシュプロンプトは、ブラウザーのネイティブ通知許可ダイアログの前に表示するカスタムのアプリ内メッセージまたはオンサイトメッセージです。プッシュ通知の価値を説明することで、システムプロンプトが表示された際にユーザーが許可を受け入れる可能性が高まります。

ソフトプッシュプロンプトはいつ表示すべきですか?

ソフトプッシュプロンプトは、ユーザーがプロダクトの価値を理解した後に表示してください。たとえば、オンボーディングの完了後や、意味のあるアプリ内アクションの後が適切です。最初のページ読み込み時には表示しないでください。実装の詳細については、このガイドのWeb SDKのステップを参照してください。

New Stuff!