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

Flutter を使用して Android と iOS のアプリ内メッセージを統合およびカスタマイズする方法を学びます。

アプリ内メッセージの UI を有効にする

Flutter のアプリ内メッセージングを iOS と統合するには、Braze Swift SDK を使用してアプリ内メッセージングを有効にします。Android の場合、これ以外の手順はありません。

分析のロギング

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);

自動表示を無効にする

アプリ内メッセージの自動表示を無効にするには、ネイティブレイヤーでこれらの更新を行います。

android
ios

自動統合初期化機能を使用していることを確認してください。この機能は、バージョン 2.2.0 以降でデフォルトで有効になっています。
次の行を braze.xml ファイルに追加することで、アプリ内メッセージ操作のデフォルトを DISCARD に設定します。

<string name="com_braze_flutter_automatic_integration_iam_operation">DISCARD</string>

こちらの iOS の記事で説明されているように、BrazeInAppMessageUIDelegate デリゲートを実装します。
.discard を返すように inAppMessage(_:displayChoiceForMessage:) デリゲートメソッドを更新します。

アプリ内メッセージデータの受信

Flutter アプリでアプリ内メッセージデータを受信できるよう、BrazePlugin は、Dart ストリームを使用したアプリ内メッセージデータの送信をサポートしています。

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

ステップ 1: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();

例としては main.dartを参照のこと。

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

ステップ 1 の Dart レイヤーでデータを受信するには、次のコードを追加して、ネイティブレイヤーからアプリ内メッセージデータを転送します。

android
ios

アプリ内メッセージデータは Android レイヤーから自動的に転送されます。

オプション 1 - `BrazeInAppMessageUIDelegate` の使用

コアアプリ内メッセージデリゲートに関する iOS 記事で説明されているように、BrazeInAppMessageUIDelegate デリゲートを実装します。
willPresent デリゲート実装を更新して BrazePlugin.process(inAppMessage) を呼び出します。

オプション 2 - カスタムのアプリ内メッセージプレゼンター

アプリ内メッセージ UI が有効になっていることを確認して、inAppMessagePresenter をカスタムプレゼンターに設定します。

 let inAppMessageUI = CustomInAppMessagePresenter()
 braze.inAppMessagePresenter = inAppMessageUI

カスタムプレゼンタークラスを作成して、present(message:) 内で BrazePlugin.process(inAppMessage) を呼び出します。

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

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

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

braze.changeUser('your-user-id') メソッドを呼び出して、React アプリケーションにアクティブユーザーを設定します。
ダッシュボードの [キャンペーン] ページに移動し、このガイドに従って新しいアプリ内メッセージキャンペーンを作成します。
テスト用のアプリ内メッセージングキャンペーンを作成し、[テスト] タブに移動します。テストユーザーと同じ user-id を追加し、[テストを送信] をクリックします。
プッシュ通知をタップすると、デバイスにアプリ内メッセージが表示されます。