コンテンツにスキップ

アプリ内メッセージデータを記録する

Braze SDK を使用してアプリメッセージ(IAM) データにログインする方法について説明します。

前提条件

この機能を使用する前に、Web Braze SDKを統合する必要があります。

メッセージデータを記録する

アプリ内メッセージのインプレッションとクリックの記録は、showInAppMessage または automaticallyShowInAppMessage メソッドを使用すると自動的に実行されます。

どちらのメソッドも使用せず、独自のUI コードを使用して手動でメッセージを表示することを選択した場合は、次の方法を使用して分析を記録します。

// Registers that a user has viewed an in-app message with the Braze server.
braze.logInAppMessageImpression(inAppMessage);
// Registers that a user has clicked on the specified in-app message with the Braze server.
braze.logInAppMessageClick(inAppMessage);
// Registers that a user has clicked a specified in-app message button with the Braze server.
braze.logInAppMessageButtonClick(button, inAppMessage);
// Registers that a user has clicked on a link in an HTML in-app message with the Braze server.
braze.logInAppMessageHtmlClick(inAppMessage, buttonId?, url?)

前提条件

この機能を使用する前に、Flutter Braze SDKの統合を完了する必要があります。

メッセージデータを記録する

BrazeInAppMessage を使用して分析をログに記録するには、インスタンスを目的の分析関数に渡します。

  • logInAppMessageClicked
  • logInAppMessageImpression
  • logInAppMessageButtonClicked(ボタンインデックスと共に)

以下に例を示します。

// Log a click
braze.logInAppMessageClicked(inAppMessage);
// Log an impression
braze.logInAppMessageImpression(inAppMessage);
// Log button index `0` being clicked
braze.logInAppMessageButtonClicked(inAppMessage, 0);

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

Flutterアプリでアプリ内メッセージデータにアクセスするために、BrazePluginはDart Streamsを使用したアプリ内メッセージデータの送信をサポートしています。

BrazeInAppMessageオブジェクトは、uri、message、header、buttons、extrasなどを含む、ネイティブモデルオブジェクトで使用可能なフィールドのサブセットをサポートします。

Dartレイヤーでアプリ内メッセージデータをリッスンする

Dartレイヤーでアプリ内メッセージデータを受信するには、以下のコードを使用してStreamSubscriptionを作成し、braze.subscribeToInAppMessages()を呼び出します。不要になったストリームサブスクリプションは忘れずにcancel()してください。

// Create stream subscription
StreamSubscription inAppMessageStreamSubscription;

inAppMessageStreamSubscription = braze.subscribeToInAppMessages((BrazeInAppMessage inAppMessage) {
  // Handle in-app messages
}

// Cancel stream subscription
inAppMessageStreamSubscription.cancel();

例については、Braze Flutter SDKサンプルアプリケーションのmain.dartを参照してください。

ネイティブレイヤーからアプリ内メッセージデータを転送する

アプリ内メッセージデータはAndroidとiOSの両方のネイティブレイヤーから自動的に転送されます。追加の設定は必要ありません。

Flutter SDK 17.1.0以前を使用している場合、iOSネイティブレイヤーからのアプリ内メッセージデータの転送には手動設定が必要です。アプリケーションには以下のいずれかが含まれている可能性があります。Flutter SDK 18.0.0に移行するには、BrazePlugin.processInAppMessage(_:)の呼び出しを削除してください。データの転送は自動的に処理されるようになりました。

willPresentデリゲート実装からBrazePlugin.processInAppMessage(_:)の呼び出しを削除してください。

カスタムプレゼンターのpresent(message:)実装からBrazePlugin.processInAppMessage(message)の呼び出しを削除してください。

class CustomInAppMessagePresenter: BrazeInAppMessageUI {
  override func present(message: Braze.InAppMessage) {
    // Pass in-app message data to the Dart layer.
    BrazePlugin.processInAppMessage(message)

    // If you want the default UI to display the in-app message.
    super.present(message: message)
  }
}

アプリ内メッセージのコールバックを再実行する(オプション)

コールバックが利用可能になる前にトリガーされたアプリ内メッセージを保存し、設定後に再生するには、BrazePluginの初期化時に次のエントリをcustomConfigsマップに追加します。

BrazePlugin braze = new BrazePlugin(customConfigs: {replayCallbacksConfigKey: true});

この機能を使う前に、React Native Braze SDKを統合する必要があります。

ロギングのメソッド

BrazeInAppMessageインスタンスを渡すことで、以下のメソッドを使用して分析を記録し、アクションを実行できます。

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

メッセージデータの処理

ほとんどの場合、Braze.addListener メソッドを使用してイベントリスナーを登録し、アプリ内メッセージから送信されるデータを処理できます。

さらに、Braze.subscribeToInAppMessage メソッドを呼び出すことで、JavaScriptレイヤーでアプリ内メッセージデータにアクセスできます。このメソッドにより、アプリ内メッセージがトリガーされたときにSDKが inAppMessageReceived イベントを発行します。このメソッドにコールバックを渡すことで、アプリ内メッセージがトリガーされてリスナーが受信したときに独自のコードを実行できます。

メッセージデータの処理をカスタマイズするには、以下の実装例を参照してください。

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

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ドキュメントを参照してください。

// 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アプリ内メッセージUIチュートリアルで説明されているように、BrazeInAppMessageUIDelegate デリゲートを実装します。

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

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

- (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 に割り当てます。

@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 プロトコルに準拠し、以下のサンプルに従ってカスタムプレゼンターを割り当てます。

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

前提条件

この機能を使用する前に、Android Braze SDKを統合する必要があります。

メッセージデータを記録する

キャンペーンの分析を処理するために特定の関数が呼び出されることを確認する必要があります。

表示されるメッセージ

メッセージが表示または確認されたら、インプレッションをロギングします。

LogInAppMessageImpression(in_app_message.id, brazetask)

クリックされたメッセージ

ユーザーがメッセージをクリックしたら、クリックをロギングし、in_app_message.click_action を処理します。

LogInAppMessageClick(in_app_message.id, brazetask)

クリックされたボタン

ユーザーがボタンをクリックしたら、ボタンクリックをロギングし、inappmessage.buttons[selected].click_action を処理します。

LogInAppMessageButtonClick(inappmessage.id, inappmessage.buttons[selected].id, brazetask)

メッセージを処理した後

アプリ内メッセージの処理後に、フィールドをクリアする必要があります。

m.BrazeTask.BrazeInAppMessage = invalid

アプリ内メッセージのサブスクライバーになる

Unity ゲームオブジェクトを登録して、アプリ内メッセージの受信について通知を受けることができます。Brazeコンフィギュレーションエディターからゲームオブジェクトリスナーを設定することを推奨する。コンフィギュレーション・エディターでは、リスナーをAndroidとiOSで別々に設定する必要がある。

ゲームオブジェクトのリスナーを実行時に設定する必要がある場合は、AppboyBinding.ConfigureListener() を使用し、BrazeUnityMessageType.IN_APP_MESSAGE を指定します。

メッセージの解析

アプリ内メッセージゲームオブジェクトのコールバックで受け取った受信 string メッセージは、便宜上、事前に提供されているモデルオブジェクトに解析できます。

InAppMessageFactory.BuildInAppMessage() を使ってアプリ内メッセージを解析しよう。結果として得られるオブジェクトはそのタイプに応じて IInAppMessage.cs または IInAppMessageImmersive.cs のインスタンスになります。

// Automatically logs a button click, if present.
void InAppMessageReceivedCallback(string message) {
  IInAppMessage inApp = InAppMessageFactory.BuildInAppMessage(message);
  if (inApp is IInAppMessageImmersive) {
    IInAppMessageImmersive inAppImmersive = inApp as IInAppMessageImmersive;
    if (inAppImmersive.Buttons != null && inAppImmersive.Buttons.Count > 0) {
      inAppImmersive.LogButtonClicked(inAppImmersive.Buttons[0].ButtonID);
    }
  }
}

メッセージデータを記録する

Brazeが直接表示しないアプリ内メッセージについては、クリック数とインプレッション数を手動で記録する必要がある。

IInAppMessage で LogClicked() と LogImpression() を使用して、メッセージのクリック数とインプレッション数をログに記録します。

IInAppMessageImmersive で LogButtonClicked(int buttonID) を使用して、ボタンのクリック数をログに記録します。ボタンは InAppMessageButton インスタンスのリストとして表され、各インスタンスには ButtonID が含まれます。

New Stuff!