Skip to content

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

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

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

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

分析のロギング

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

  • logInAppMessageClicked
  • logInAppMessageImpression
  • logInAppMessageButtonClicked (ボタンインデックスも併せて)

以下に例を示します。

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

自動表示を無効にする

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

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

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

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

  2. .discard を返すように inAppMessage(_:displayChoiceForMessage:) デリゲートメソッドを更新します。

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

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

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

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

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

```dart // ストリームサブスクリプションを作成 StreamSubscription inAppMessageStreamSubscription;

inAppMessageStreamSubscription = braze.subscribeToInAppMessages((BrazeInAppMessage inAppMessage) { // アプリ内メッセージを処理 }

// ストリームのサブスクリプションをキャンセル inAppMessageStreamSubscription.cancel(); ```

例については、サンプルアプリの main.dart を参照してください。

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

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

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

オプション 1 - BrazeInAppMessageUIDelegate の使用

  1. コアアプリ内メッセージデリゲートに関する iOS 記事で説明されているように、BrazeInAppMessageUIDelegate デリゲートを実装します。

  2. willPresent デリゲート実装を更新して BrazePlugin.process(inAppMessage) を呼び出します。

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

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

     let inAppMessageUI = CustomInAppMessagePresenter()
 braze.inAppMessagePresenter = inAppMessageUI

  2. カスタムプレゼンタークラスを作成して、present(message:) 内で BrazePlugin.process(inAppMessage) を呼び出します。 ```swift class CustomInAppMessagePresenter:BrazeInAppMessageUI { override func present(message:Braze.InAppMessage) { // アプリ内メッセージデータを Dart レイヤーに渡す BrazePlugin.processInAppMessage(message)

    // デフォルトの UI にアプリ内メッセージを表示する場合 super.present(message: message) } } ```

アプリ内メッセージのコールバックを再生する

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

1

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

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

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

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

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

  Edit this page on GitHub
HOW HELPFUL WAS THIS PAGE?
New Stuff!