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 (버튼 인덱스와 함께)

For example:

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 레이어에서 데이터를 수신하려면 다음 코드를 추가하여 기본 레이어에서 인앱 메시지 데이터를 전달합니다.

인앱 메시지 데이터는 안드로이드 계층에서 자동으로 전달됩니다.

인앱 메시지 데이터를 전달하는 방법은 두 가지가 있습니다:

  1. 핵심 인앱 메시지 위임에 대한 iOS 문서에 설명된 대로 BrazeInAppMessageUIDelegate 위임을 구현합니다.

  2. BrazePlugin.process(inAppMessage)를 호출하도록 willPresent 위임 구현을 업데이트합니다.

  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 메서드를 사용하여 이벤트 리스너를 등록해 인앱 메시지에서 오는 데이터를 처리할 수 있습니다.

또한 인앱 메시지가 트리거될 때 SDK가 inAppMessageReceived 이벤트를 게시하도록 Braze.subscribeToInAppMessage 메서드를 호출하여 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를 사용하여 인앱 메시지를 표시할지 여부를 결정하는 고급 로직을 포함하려면 기본 레이어를 통해 인앱 메시지를 구현합니다.

커스텀 매니저 리스너에 대한 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 위임 재정의

기본적으로 BrazeInAppMessageUI는 braze 인스턴스를 초기화할 때 생성 및 할당됩니다. BrazeInAppMessageUI는 BrazeInAppMessagePresenter 프로토콜의 구현이며 수신된 인앱 메시지 처리를 사용자 지정하는 데 사용할 수 있는 delegate 속성정보가 함께 제공됩니다.

  1. 여기 iOS 문서에서 설명한 대로 BrazeInAppMessageUIDelegate 위임을 구현합니다.

  2. inAppMessage(_:displayChoiceForMessage:) 델리게이트 메서드에서 inAppMessage 데이터에 액세스하여 자바스크립트 계층으로 전송하고 반환값에 따라 네이티브 메시지를 표시할지 표시하지 않을지 결정할 수 있습니다.

이러한 값에 대한 자세한 내용은 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!