인앱 메시지 통합

React Native를 사용할 때 기본 인앱 메시지는 Android와 iOS에서 자동으로 표시됩니다. 이 문서에서는 React Native를 사용하는 앱의 인앱 메시지에 대한 분석 사용자 지정 및 로깅을 다룹니다.

인앱 메시지 데이터 액세스

대부분의 경우 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
• ios

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

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

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

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;

분석 및 조치 방법

이러한 방법은 BrazeInAppMessage 인스턴스를 전달하여 분석을 기록하고 작업을 수행하는 데 사용할 수 있습니다.

샘플 인앱 메시지 표시 테스트

샘플 인앱 메시지를 테스트하려면 다음 단계를 따르세요.

1. Braze.changeUserId('your-user-id') 메서드를 호출하여 React 애플리케이션에서 활성 사용자를 설정합니다.
2. 캠페인으로 이동하여 이 가이드에 따라 새 인앱 메시지 캠페인을 생성합니다.
3. 테스트 인앱 메시징 캠페인을 작성하고 테스트 탭으로 이동합니다. 동일한 user-id을 테스트 사용자로 추가하고 테스트 보내기를 클릭하십시오. 곧 기기에서 인앱 메시지를 실행할 수 있습니다.

샘플 구현은 React Native SDK 내의 BrazeProject에서 찾을 수 있습니다. 추가적인 Android 및 iOS SDK 구현 샘플을 찾을 수 있습니다.

인앱 메시지 데이터 모델

인앱 메시지 모델은 React Native SDK에서 사용할 수 있습니다. Braze에는 동일한 데이터 모델을 공유하는 네 가지 인앱 메시지 유형( 슬라이드업, 모달, 전체 및 HTML 전체)이 있습니다.

인앱 메시지 모델 속성

인앱 메시지 모델은 모든 인앱 메시지의 기본을 제공합니다.

인앱 메시지 모델에 대한 전체 참조는 안드로이드 및 iOS 설명서를 참조하십시오.

인앱 메시지 버튼 모델 속성

인앱 메시지에 버튼을 추가하여 작업 및 로그 분석을 수행할 수 있습니다. 버튼 모델은 모든 인앱 메시지 버튼의 기본을 제공합니다.

버튼 모델에 대한 전체 참조는 Android 및 iOS 설명서를 참조하십시오.

GIF 지원

• android
• ios