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() してください。

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

例としては 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) を呼び出します。 
    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});

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

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

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

GIFサポート

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

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

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

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

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