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 を無効にすることを選択した場合は、メッセージの分析を手動でログに記録する必要があることに注意してください。

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

import Braze from "@braze/react-native-sdk";

// Option 1: Listen for the event directly via `Braze.addListener`.
//
// You may use this method to accomplish the same thing if you don't
// wish to make any changes to the default Braze UI.
Braze.addListener(Braze.Events.IN_APP_MESSAGE_RECEIVED, (event) => {
  console.log(event.inAppMessage);
});

// Option 2: Call `subscribeToInAppMessage`.
//
// Pass in `false` to disable the automatic display of in-app messages.
Braze.subscribeToInAppMessage(false, (event) => {
  console.log(event.inAppMessage);
  // Use `event.inAppMessage` to construct your own custom message 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 のドキュメントを参照してください。

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

- (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
  };

  // Send to JavaScript.
  [self sendEventWithName:@"inAppMessageReceived" body:arguments];

  // Note: Return `BRZInAppMessageUIDisplayChoiceDiscard` if you would like
  // to prevent the Braze SDK from displaying the message natively.
  return BRZInAppMessageUIDisplayChoiceNow;
}

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

1
2
3
4
5
6
7
8

@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と iOSSDKにある。

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

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

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

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

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

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

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

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

GIFサポート

ネイティブのBraze Android SDKを使って、アプリ内メッセージにアニメーションGIFを追加できる。デフォルトでは、Android SDK は HTML アプリ内メッセージを使用して GIF を表示します。

その他のアプリ内メッセージの場合は、カスタム画像ライブラリを使用する必要がある。詳しくは、Androidアプリ内メッセージを参照のこと：GIF.

ネイティブのBraze Swift SDKを使って、アプリ内メッセージにアニメーションGIFTを追加できる。デフォルトでは、すべてのBrazeアプリ内メッセージはGIFをサポートしている。完全なチュートリアルについては、チュートリアル：Swiftアプリ内メッセージのGIFサポートを参照してください。

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