Skip to content

アプリ内メッセージの統合

React Native を使用すると、ネイティブのアプリ内メッセージが Android および iOS に自動的に表示されます。この記事では、React Native を使用したアプリのアプリ内メッセージの分析のカスタマイズとログ記録について説明します。

アプリ内メッセージデータへのアクセス

ほとんどの場合、Braze.addListener メソッドを使用して、アプリ内メッセージからのデータを処理するイベントリスナーを登録できます。
さらに、Braze.subscribeToInAppMessage メソッドを呼び出して、アプリ内メッセージがトリガーされたときに SDK に inAppMessageReceived イベントを発行させることで、JavaScript レイヤーのアプリ内メッセージデータにアクセスできます。 アプリ内メッセージがトリガーされてリスナーによって受信されたときに独自のコードを実行するには、このメソッドにコールバックを渡します。

デフォルトの動作をさらにカスタマイズする場合、またはネイティブ iOS または Android コードをカスタマイズするアクセス権がない場合は、Braze からアプリ内メッセージ イベントを受信しながらデフォルト UI を無効にすることをお勧めします。デフォルトの UI を無効にするには、false を Braze.subscribeToInAppMessage メソッドに渡し、アプリ内メッセージデータを使用して JavaScript で独自のメッセージを作成します。デフォルトの UI を無効にすることを選択した場合は、メッセージの分析を手動でログに記録する必要があることに注意してください。

```javascript import Braze from “@braze/react-native-sdk”;

// オプション 1: Braze.addListener を介して直接イベントをリッスンします。 // // You may use this method to accomplish the same thing if you don’t // デフォルトの Braze UI に変更を加えたい。 Braze.addListener(Braze.Events.IN_APP_MESSAGE_RECEIVED, (event) => { console.log(event.inAppMessage); });

// オプション2: subscribeToInAppMessage を呼び出します。 false を // // Pass in してアプリ内メッセージの自動表示を無効にします。 Braze.subscribeToInAppMessage(false, (event) => { console.log(event.inAppMessage); // event.inAppMessage を使用して、独自のカスタムメッセージ UI を作成します。 }); ```

高度なカスタマイズ

組み込み UI を使用してアプリ内メッセージを表示するかどうかを決定するためのより高度なロジックを組み込むには、ネイティブレイヤーを介してアプリ内メッセージを実装します。

カスタムマネージャーリスナーに関する Android の記事で説明されているように、IInAppMessageManagerListener を実装します。beforeInAppMessageDisplayed 実装では、inAppMessage データにアクセスして JavaScript レイヤーに送信し、戻り値に基づいてネイティブメッセージを表示するかどうかを決定できます。

これらの値の詳細については、Android のドキュメントを参照してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// In-app messaging
@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
    WritableMap parameters = new WritableNativeMap();
    parameters.putString("inAppMessage", inAppMessage.forJsonPut().toString());
    getReactNativeHost()
        .getReactInstanceManager()
        .getCurrentReactContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("inAppMessageReceived", parameters);
    // Note: return InAppMessageOperation.DISCARD if you would like
    // to prevent the Braze SDK from displaying the message natively.
    return InAppMessageOperation.DISPLAY_NOW;
}

デフォルトの UI デリゲートをオーバーライドする

既定では、braze インスタンスを初期化すると、BrazeInAppMessageUI が作成されて割り当てられます。BrazeInAppMessageUI は BrazeInAppMessagePresenter プロトコルの実装であり、受信したアプリ内メッセージの処理をカスタマイズするために使用できる delegate プロパティが付属しています。

  1. こちらの iOS の記事で説明されているように、BrazeInAppMessageUIDelegate デリゲートを実装します。

  2. inAppMessage(_:displayChoiceForMessage:) デリゲートメソッドでは、inAppMessage データにアクセスして JavaScript レイヤーに送信し、戻り値に基づいてネイティブメッセージを表示するかどうかを決定できます。

これらの値の詳細については、iOS のドキュメントを参照してください。

```objc - (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui displayChoiceForMessage:(BRZInAppMessageRaw *)message { // Convert the message to a JavaScript representation. NSData *inAppMessageData = [message json]; NSString *inAppMessageString = [[NSString alloc] initWithData:inAppMessageData encoding:NSUTF8StringEncoding]; NSDictionary *arguments = @{ @”inAppMessage” : inAppMessageString };

// JavaScript に送信します。 [self sendEventWithName:@”inAppMessageReceived” body:arguments];

// 注: もし以下のようにしたい場合、BRZInAppMessageUIDisplayChoiceDiscard を返してください。 // Braze SDK がメッセージをネイティブに表示したい。 BRZInAppMessageUIDisplayChoiceNow を返す。 } ```

このデリゲートを使用するには、braze インスタンスを初期化した後に brazeInAppMessagePresenter.delegate に割り当てます。

```objc @import BrazeUI;

  • (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint]; Braze *braze = [BrazeReactBridge initBraze:configuration]; ((BrazeInAppMessageUI *)braze.inAppMessagePresenter).delegate = [[CustomDelegate alloc] init]; AppDelegate.braze = braze; } ```

デフォルトのネイティブ UI をオーバーライドする

ネイティブ iOS レイヤーでアプリ内メッセージの表示を完全にカスタマイズしたい場合は、BrazeInAppMessagePresenter プロトコルに従い、以下のサンプルに従ってカスタムプレゼンターを割り当てます。

1
2
3
4

BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
Braze *braze = [BrazeReactBridge initBraze:configuration];
braze.inAppMessagePresenter = [[MyCustomPresenter alloc] init];
AppDelegate.braze = braze;

分析とアクション方法

これらのメソッドを使用するには、BrazeInAppMessage インスタンスを渡して分析をログに記録し、アクションを実行します。

方法 説明
logInAppMessageClicked(inAppMessage) 提供されたアプリ内メッセージ データのクリックをログに記録します。
logInAppMessageImpression(inAppMessage) 提供されたアプリ内メッセージデータのインプレッションをログに記録します。
logInAppMessageButtonClicked(inAppMessage, buttonId) 提供されたアプリ内メッセージデータとボタン ID のボタンクリックをログに記録します。
hideCurrentInAppMessage() 現在表示されているアプリ内メッセージを閉じます。
performInAppMessageAction(inAppMessage) アプリ内メッセージのアクションを実行します。
performInAppMessageButtonAction(inAppMessage, buttonId) アプリ内メッセージボタンのアクションを実行します。

サンプルのアプリ内メッセージの表示をテストする

次のステップに従って、サンプルのアプリ内メッセージをテストします。

  1. Braze.changeUserId('your-user-id') メソッドを呼び出して、React アプリケーションにアクティブユーザーを設定します。
  2. [キャンペーン] に移動し、このガイドに従って新しいアプリ内メッセージキャンペーンを作成します。
  3. テスト用のアプリ内メッセージングキャンペーンを作成し、[テスト] タブに移動します。テストユーザーと同じ user-id を追加し、[テストを送信] をクリックします。すぐにデバイスでアプリ内メッセージを起動できるようになるはずです。

アプリ内メッセージをテストするため、テスト受信者として自分のユーザー ID を追加できることを示す Braze アプリ内メッセージキャンペーン。

サンプル実装は、React Native SDK 内の BrazeProject にあります。追加の Android および iOS 実装サンプルは、Android および iOS SDK にあります。

アプリ内メッセージのデータモデル

アプリ内メッセージのモデルは、React Native SDK で利用できます。Braze には、同じデータ モデルを共有する4つのアプリ内メッセージタイプ (スライドアップ、モーダル、フル、HTML フル) があります。

アプリ内メッセージモデルのプロパティ

アプリ内メッセージモデルは、すべてのアプリ内メッセージのベースを提供します。

プロパティ 説明
inAppMessageJsonString メ ッセージの JSON 表現。
message メッセージテキスト。
header メッセージヘッダー。
uri ボタンのクリックアクションに関連付けられた URI。
imageUrl メッセージ画像の URL。
zippedAssetsUrl HTML コンテンツを表示するために準備された圧縮アセット。
useWebView ボタンのクリックアクションを Web ビューを使用してリダイレクトするかどうかを示します。
duration メッセージの表示期間。
clickAction ボタンのクリックアクションのタイプ。3つのタイプは次のとおりです。NEWS_FEED、 URI、NONE。
dismissType メッセージのクローズタイプ。2つのタイプは次のとおりです。SWIPE およびAUTO_DISMISS。
messageType SDKでサポートされているアプリ内メッセージのタイプ。4つのタイプは次のとおりです。SLIDEUP、MODAL、FULL および HTML_FULL。
extras メッセージエクストラ辞書。デフォルト値: [:].
buttons アプリ内メッセージのボタンのリスト。
toString() 文字列表現としてのメッセージ。

アプリ内メッセージモデルの完全なリファレンスについては、Android および iOS のドキュメントを参照してください。

アプリ内メッセージボタンモデルのプロパティ

アプリ内メッセージにボタンを追加して、アクションを実行したり、分析をログに記録したりできます。ボタンモデルは、すべてのアプリ内メッセージボタンのベースを提供します。

プロパティ 説明
text ボタン上のテキスト。
uri ボタンのクリックアクションに関連付けられた URI。
useWebView ボタンのクリックアクションを Web ビューを使用してリダイレクトするかどうかを示します。
clickAction ユーザーがボタンをクリックしたときに処理されるクリック アクションのタイプ。3つのタイプは次のとおりです。NEWS_FEED、URI、そして NONE。
id メッセージのボタン ID。
toString() 文字列表現としてのボタン。

ボタンモデルの完全なリファレンスについては、Android および iOS のドキュメントを参照してください。

  GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!