Skip to content

アプリ内メッセージデータのロギング

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 を使用して分析をログに記録するには、インスタンスを目的の分析関数に渡します。

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

メッセージデータにアクセスする

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

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 レイヤーから自動的に転送されます。

アプリ内メッセージデータを転送するには、2つの方法がある：

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

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

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

ステップ 3:アプリ内メッセージのコールバックを再生する（オプション）

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

1

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

前提条件

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

ロギングの方法

これらのメソッドを使用するには、BrazeInAppMessage インスタンスを渡して分析をログに記録し、アクションを実行します。

メッセージデータを扱う

ほとんどの場合、Braze.addListener メソッドを使用して、アプリ内メッセージからのデータを処理するイベントリスナーを登録できます。
さらに、Braze.subscribeToInAppMessage メソッドを呼び出して、アプリ内メッセージがトリガーされたときに SDK に inAppMessageReceived イベントを発行させることで、JavaScript レイヤーのアプリ内メッセージデータにアクセスできます。 アプリ内メッセージがトリガーされてリスナーによって受信されたときに独自のコードを実行するには、このメソッドにコールバックを渡します。

メッセージデータの扱い方をカスタマイズするには、以下の実装例を参照のこと：

デフォルトの行動を強化するため、またはiOSやAndroidのネイティブコードをカスタマイズするアクセス権がない場合は、デフォルトのUIを無効にしながら、アプリ内メッセージイベントをBrazeから受信することをお勧めします。デフォルトの UI を無効にするには、false を Braze.subscribeToInAppMessage メソッドに渡し、アプリ内メッセージデータを使用して 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 を使用してアプリ内メッセージを表示するかどうかを決定するためのより高度なロジックを組み込むには、ネイティブレイヤーを介してアプリ内メッセージを実装します。

カスタムマネージャーリスナーに関する 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 プロパティが付属しています。

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

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

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 が含まれます。
Github   GitHub でこのページを編集
New Stuff!