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

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

옵션 1 - BrazeInAppMessageUIDelegate 사용

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

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

옵션 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 지원

You can add animated GIFs to your in-app messages using the native Braze Android SDK. By default, the Android SDK uses HTML in-app messages to display GIFs.

For all other in-app message types, you’ll need to use a custom image library. To learn more, see Android In-App Messaging: GIFs.

You can add animated GIFs to your in-app messages using the native Braze Swift SDK. By default, all Braze in-app messages support GIFs. For a full walkthrough, see Tutorial: GIF Support for Swift In-App Messages.

자신의 사용자 ID를 테스트 수신자로 추가하여 인앱 메시지를 테스트할 수 있는 Braze 인앱 메시지 캠페인

Github   GitHub 에서 이 페이지를 편집합니다.
이 페이지가 얼마나 도움이 되었나요?
New Stuff!