アプリ内メッセージデータを記録する
Braze SDK を使用してアプリメッセージ(IAM) データにログインする方法について説明します。
前提条件
この機能を使用する前に、Web Braze SDKを統合する必要がある。
メッセージデータを記録する
アプリ内メッセージのインプレッションとクリックの記録は、showInAppMessage または automaticallyShowInAppMessage メソッドを使用すると自動的に実行されます。
どちらのメソッドも使用せず、独自のUI コードを使用して手動でメッセージを表示することを選択した場合は、次の方法を使用して分析を記録します。
1
2
3
4
5
6
7
8
// 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 を使用して分析をログに記録するには、インスタンスを目的の分析関数に渡します。
logInAppMessageClickedlogInAppMessageImpressionlogInAppMessageButtonClicked(ボタンインデックスと共に)
以下に例を示します。
1
2
3
4
5
6
// 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() してください。
1
2
3
4
5
6
7
8
9
// 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) の呼び出しを削除してください。
1
2
3
4
5
6
7
8
9
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 マップに追加します。
1
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 メソッドを呼び出して、アプリ内メッセージがトリガーされたときにSDKに inAppMessageReceived イベントを発行させることで、JavaScriptレイヤーのアプリ内メッセージデータにアクセスできます。アプリ内メッセージがトリガーされてリスナーによって受信されたときに独自のコードを実行するには、このメソッドにコールバックを渡します。
メッセージデータの処理方法をカスタマイズするには、以下の実装例を参照してください。
デフォルトの動作を強化するため、またはネイティブのiOSやAndroidコードをカスタマイズするアクセス権がない場合は、デフォルトのUIを無効にしながら、Brazeからアプリ内メッセージイベントを受信することをお勧めします。デフォルトのUIを無効にするには、Braze.subscribeToInAppMessage メソッドに false を渡し、アプリ内メッセージデータを使用して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を使用してアプリ内メッセージを表示するかどうかを決定するためのより高度なロジックを組み込むには、ネイティブレイヤーを介してアプリ内メッセージを実装します。
これは高度なカスタマイズオプションであるため、デフォルトのBraze実装をオーバーライドすると、アプリ内メッセージイベントをJavaScriptリスナーに送信するロジックも無効になることに注意してください。アプリ内メッセージデータへのアクセスの説明に従って Braze.subscribeToInAppMessage または Braze.addListener を引き続き使用する場合は、イベントの発行を自分で処理する必要があります。
カスタムマネージャーリスナーに関する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 プロパティが付属しています。
-
こちらのiOSの記事で説明されているように、
BrazeInAppMessageUIDelegateデリゲートを実装します。 -
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 に割り当てます。
BrazeUI はObjective-CまたはSwiftでのみインポートできます。Objective-C++を使用している場合は、これを別のファイルで処理する必要があります。
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;
前提条件
この機能を使用する前に、Android Braze SDKを統合する必要がある。
メッセージデータを記録する
キャンペーンの分析を処理するために特定の関数が呼び出されることを確認する必要があります。
表示されるメッセージ
メッセージが表示または確認されたら、インプレッションをロギングします。
1
LogInAppMessageImpression(in_app_message.id, brazetask)
クリックされたメッセージ
ユーザーがメッセージをクリックしたら、クリックをロギングし、in_app_message.click_action を処理します。
1
LogInAppMessageClick(in_app_message.id, brazetask)
クリックされたボタン
ユーザーがボタンをクリックしたら、ボタンクリックをロギングし、inappmessage.buttons[selected].click_action を処理します。
1
LogInAppMessageButtonClick(inappmessage.id, inappmessage.buttons[selected].id, brazetask)
メッセージを処理した後
アプリ内メッセージの処理後に、フィールドをクリアする必要があります。
1
m.BrazeTask.BrazeInAppMessage = invalid
アプリ内メッセージのサブスクライバーになる
Unity ゲームオブジェクトを登録して、アプリ内メッセージの受信について通知を受けることができます。Brazeコンフィギュレーションエディターからゲームオブジェクトリスナーを設定することを推奨する。コンフィギュレーション・エディターでは、リスナーをAndroidとiOSで別々に設定する必要がある。
ゲームオブジェクトのリスナーを実行時に設定する必要がある場合は、AppboyBinding.ConfigureListener() を使用し、BrazeUnityMessageType.IN_APP_MESSAGE を指定します。
メッセージの解析
アプリ内メッセージゲームオブジェクトのコールバックで受け取った受信 string メッセージは、便宜上、事前に提供されているモデルオブジェクトに解析できます。
InAppMessageFactory.BuildInAppMessage() を使ってアプリ内メッセージを解析しよう。結果として得られるオブジェクトはそのタイプに応じて IInAppMessage.cs または IInAppMessageImmersive.cs のインスタンスになります。
1
2
3
4
5
6
7
8
9
10
// 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 が含まれます。