Skip to content

인앱 메시지 사용자 지정

Braze SDK의 인앱 메시지를 사용자 지정하는 방법을 알아보세요.

Prerequisites

이 기능을 사용하려면 먼저 Android Braze SDK를 통합해야 합니다. 또한 인앱 메시지를 설정해야 합니다.

커스텀 매니저 리스너 설정하기

BrazeInAppMessageManager 리스너는 인앱 메시지의 표시 및 생애주기를 자동으로 처리할 수 있지만, 메시지를 완전히 커스텀하려면 커스텀 매니저 리스너를 구현해야 합니다.

Braze SDK에는 커스텀 리스너가 정의되어 있지 않은 경우 사용되는 기본 DefaultHtmlInAppMessageActionListener 클래스가 있으며 자동으로 적절한 조치가 수행됩니다. 사용자 지정 HTML 인앱 메시지 내에서 사용자가 다른 버튼과 상호 작용하는 방식을 더 잘 제어해야 하는 경우 사용자 지정 IHtmlInAppMessageActionListener 클래스를 구현하세요.

1단계: 커스텀 매니저 리스너 구현하기

1.1단계: 구현 IInAppMessageManagerListener

IInAppMessageManagerListener를 구현하는 클래스를 생성합니다.

IInAppMessageManagerListener 의 콜백은 인앱 메시지 라이프사이클의 다양한 지점에서 호출됩니다. 예를 들어, Braze에서 인앱 메시지를 수신할 때 커스텀 매니저 리스너를 설정하면 beforeInAppMessageDisplayed() 메서드가 호출됩니다. 이 메서드의 구현이 InAppMessageOperation.DISCARD를 반환하면, 인앱 메시지가 호스트 앱에서 처리되며 Braze에서 표시해서는 안 됨을 Braze에 알립니다. 가 반환되면 InAppMessageOperation.DISPLAY_NOW 가 반환되면 Braze는 인앱 메시지를 표시하려고 시도합니다. 이 방법은 인앱 메시지를 사용자 지정 방식으로 표시하도록 선택한 경우에 사용해야 합니다.

IInAppMessageManagerListener 에는 메시지 클릭 및 버튼에 대한 델리게이트 메서드도 포함되어 있어 추가 처리를 위해 버튼이나 메시지를 클릭할 때 메시지를 가로채는 등의 경우에 사용할 수 있습니다.

1.2단계: IAM 보기 수명 주기 메서드에 연결(선택 사항)

IInAppMessageManagerListener 인터페이스에는 인앱 메시지 보기 생애주기의 특정 지점에서 호출되는 인앱 메시지 보기 메서드가 있습니다. 이러한 메서드는 다음 순서로 호출됩니다:

  1. beforeInAppMessageViewOpened: 인앱 메시지가 활동의 보기에 추가되기 직전에 호출됩니다. 현재 인앱 메시지는 아직 사용자에게 표시되지 않습니다.
  2. afterInAppMessageViewOpened: 인앱 메시지가 활동의 보기에 추가된 직후에 호출됩니다. 이제 인앱 메시지가 사용자에게 표시됩니다.
  3. beforeInAppMessageViewClosed: 인앱 메시지가 활동의 보기에서 제거되기 직전에 호출됩니다. 현재 인앱 메시지는 사용자에게 계속 표시됩니다.
  4. afterInAppMessageViewClosed: 인앱 메시지가 활동 보기에서 제거된 직후에 호출됩니다. 현재 인앱 메시지는 더 이상 사용자에게 표시되지 않습니다.

사이의 시간은 afterInAppMessageViewOpened 과 beforeInAppMessageViewClosed 사이의 시간은 인앱 메시지 보기가 화면에 표시되어 사용자에게 보이는 시간입니다.

IHtmlInAppMessageActionListener를 구현하는 클래스를 생성합니다.

IHtmlInAppMessageActionListener의 콜백은 사용자가 HTML 인앱 메시지 내에서 다음 작업 중 하나를 시작할 때마다 호출됩니다.

  • 닫기 버튼을 클릭합니다.
  • 사용자 지정 이벤트를 실행합니다.
  • HTML 인앱 메시지 내의 URL을 클릭합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

public class CustomHtmlInAppMessageActionListener implements IHtmlInAppMessageActionListener {
  private final Context mContext;

  public CustomHtmlInAppMessageActionListener(Context context) {
    mContext = context;
  }

  @Override
  public void onCloseClicked(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
    Toast.makeText(mContext, "HTML In App Message closed", Toast.LENGTH_LONG).show();
    BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false);
  }

  @Override
  public boolean onCustomEventFired(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
    Toast.makeText(mContext, "Custom event fired. Ignoring.", Toast.LENGTH_LONG).show();
    return true;
  }

  @Override
  public boolean onOtherUrlAction(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
    Toast.makeText(mContext, "Custom url pressed: " + url + " . Ignoring", Toast.LENGTH_LONG).show();
    BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false);
    return true;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class CustomHtmlInAppMessageActionListener(private val mContext: Context) : IHtmlInAppMessageActionListener {

    override fun onCloseClicked(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle) {
        Toast.makeText(mContext, "HTML In App Message closed", Toast.LENGTH_LONG).show()
        BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false)
    }

    override fun onCustomEventFired(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle): Boolean {
        Toast.makeText(mContext, "Custom event fired. Ignoring.", Toast.LENGTH_LONG).show()
        return true
    }

    override fun onOtherUrlAction(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle): Boolean {
        Toast.makeText(mContext, "Custom url pressed: $url . Ignoring", Toast.LENGTH_LONG).show()
        BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false)
        return true
    }
}

2단계: Braze에 커스텀 매니저 리스너를 사용하도록 지시하세요.

IInAppMessageManagerListener 를 만든 후 BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener() 으로 전화하여 지시하세요. BrazeInAppMessageManager 기본 리스너 대신 커스텀 IInAppMessageManagerListener를 사용하도록 지시합니다. 이 작업을 수행하면 Application.onCreate() 를 호출하여 인앱 메시지가 표시되기 전에 커스텀 리스너가 설정되도록 합니다.

표시 전 인앱 메시지 변경하기

새 인앱 메시지가 수신될 때 이미 표시 중인 인앱 메시지가 있는 경우 새 메시지가 스택 맨 위에 배치되고 나중에 표시될 수 있습니다.

그러나 인앱 메시지가 표시되지 않으면 IInAppMessageManagerListener의 다음 위임 메서드가 호출됩니다.

1
2
3
4

@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  return InAppMessageOperation.DISPLAY_NOW;
}

1
2
3

override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
  return InAppMessageOperation.DISPLAY_NOW
}

InAppMessageOperation() 반환 값은 메시지 표시 시기를 제어할 수 있습니다. 제안된 방색으로 이 메서드를 사용하면 인앱 메시지가 사용자의 앱 경험을 방해할 경우 DISPLAY_LATER를 반환하여 앱의 특정 부분에서 메시지를 지연시킬 수 있습니다.

자세한 내용은 InAppMessageOperation를 참조하세요.

Android에서는 인앱 메시지에서 logClick 및 logImpression을 호출하고 몰입형 인앱 메시지에서 logButtonClick을 호출하면 됩니다.

IHtmlInAppMessageActionListener 을 만든 후 BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener() 으로 전화하여 BrazeInAppMessageManager 에 기본값 대신 커스텀 작업 리스너 IHtmlInAppMessageActionListener 를 사용하도록 지시합니다.

Braze에 대한 다른 호출을 수행하기 전에 Application.onCreate()에서 IHtmlInAppMessageActionListener를 설정하는 것이 좋습니다. 이렇게 하면 인앱 메시지가 표시되기 전에 사용자 지정 동작 리스너가 설정됩니다:

1

BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener(new CustomHtmlInAppMessageActionListener(context));

1

BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener(CustomHtmlInAppMessageActionListener(context))

커스텀 공장 설정하기

커스텀 팩토리 오브젝트를 통해 여러 기본값을 재정의할 수 있습니다. 원하는 결과를 얻기 위해 필요한 경우 Braze SDK에 등록할 수 있습니다. 그러나 팩토리를 재정의하려면 기본값을 명시적으로 재정의하거나 Braze 기본값에서 제공하는 기능을 다시 구현해야 할 수 있습니다. 다음 코드 스니펫은 IInAppMessageViewFactory 및 IInAppMessageViewWrapperFactory 인터페이스의 커스텀 구현을 제공하는 방법을 보여줍니다.

인앱 메시지 유형

1
2
3
4
5
6
7
8

class BrazeDemoApplication : Application(){
 override fun onCreate() {
    super.onCreate()
    registerActivityLifecycleCallbacks(BrazeActivityLifecycleCallbackListener(true, true))
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(CustomInAppMessageViewWrapperFactory())
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory(CustomInAppMessageViewFactory())
  }
}

인앱 메시지 유형

1
2
3
4
5
6
7
8
9

public class BrazeDemoApplication extends Application {
  @Override
  public void onCreate{
    super.onCreate();
    registerActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener(true, true));
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(new CustomInAppMessageViewWrapperFactory());
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory(new CustomInAppMessageViewFactory());
  }
}

Braze 인앱 메시지 유형은 대부분의 커스텀 사용 사례를 포괄할 수 있을 만큼 유용합니다. 그러나 기본 유형을 사용하는 대신 인앱 메시지의 시각적 모양을 완전히 정의하고 싶다면 Braze에서 커스텀 보기 팩토리를 설정하면 됩니다.

BrazeInAppMessageManager는 기본적으로 DefaultInAppMessageViewWrapper를 사용하여 인앱 메시지 모델을 기존 활동 보기 계층 구조에 배치하는 작업을 자동으로 처리합니다. 인앱 메시지가 보기 계층 구조에 배치되는 방식을 사용자 지정해야 하는 경우 커스텀 IInAppMessageViewWrapperFactory를 사용해야 합니다.

인앱 메시지에는 사전 설정된 애니메이션 동작이 있습니다. Slideup 메시지는 화면에서 슬라이드되고 full 및 modal 메시지는 페이드 인 및 페이드 아웃 처리됩니다. 인앱 메시지에 대한 커스텀 애니메이션 동작을 정의하려는 경우, Braze에서 커스텀 애니메이션 팩토리를 설정하면 됩니다.

1단계: 공장 구현

IInAppMessageViewFactory를 구현하는 클래스를 생성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

public class CustomInAppMessageViewFactory implements IInAppMessageViewFactory {
  @Override
  public View createInAppMessageView(Activity activity, IInAppMessage inAppMessage) {
    // Uses a custom view for slideups, modals, and full in-app messages.
    // HTML in-app messages and any other types will use the Braze default in-app message view factories
    switch (inAppMessage.getMessageType()) {
      case SLIDEUP:
      case MODAL:
      case FULL:
        // Use a custom view of your choosing
        return createMyCustomInAppMessageView();
      default:
        // Use the default in-app message factories
        final IInAppMessageViewFactory defaultInAppMessageViewFactory = BrazeInAppMessageManager.getInstance().getDefaultInAppMessageViewFactory(inAppMessage);
        return defaultInAppMessageViewFactory.createInAppMessageView(activity, inAppMessage);
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

class CustomInAppMessageViewFactory : IInAppMessageViewFactory {
  override fun createInAppMessageView(activity: Activity, inAppMessage: IInAppMessage): View {
    // Uses a custom view for slideups, modals, and full in-app messages.
    // HTML in-app messages and any other types will use the Braze default in-app message view factories
    when (inAppMessage.messageType) {
      MessageType.SLIDEUP, MessageType.MODAL, MessageType.FULL ->
        // Use a custom view of your choosing
        return createMyCustomInAppMessageView()
      else -> {
        // Use the default in-app message factories
        val defaultInAppMessageViewFactory = BrazeInAppMessageManager.getInstance().getDefaultInAppMessageViewFactory(inAppMessage)
        return defaultInAppMessageViewFactory!!.createInAppMessageView(activity, inAppMessage)
      }
    }
  }
}

IInAppMessageViewWrapperFactory를 구현하고 IInAppMessageViewWrapper를 반환하는 클래스를 생성합니다.

이 팩토리는 인앱 메시지 보기가 생성된 직후에 호출됩니다. 커스텀 IInAppMessageViewWrapper를 구현하는 가장 쉬운 방법은 기본 DefaultInAppMessageViewWrapper를 확장하는 것입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

public class CustomInAppMessageViewWrapper extends DefaultInAppMessageViewWrapper {
  public CustomInAppMessageViewWrapper(View inAppMessageView,
                                       IInAppMessage inAppMessage,
                                       IInAppMessageViewLifecycleListener inAppMessageViewLifecycleListener,
                                       BrazeConfigurationProvider brazeConfigurationProvider,
                                       Animation openingAnimation,
                                       Animation closingAnimation, View clickableInAppMessageView) {
    super(inAppMessageView,
        inAppMessage,
        inAppMessageViewLifecycleListener,
        brazeConfigurationProvider,
        openingAnimation,
        closingAnimation,
        clickableInAppMessageView);
  }

  @Override
  public void open(@NonNull Activity activity) {
    super.open(activity);
    Toast.makeText(activity.getApplicationContext(), "Opened in-app message", Toast.LENGTH_SHORT).show();
  }

  @Override
  public void close() {
    super.close();
    Toast.makeText(mInAppMessageView.getContext().getApplicationContext(), "Closed in-app message", Toast.LENGTH_SHORT).show();
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

class CustomInAppMessageViewWrapper(inAppMessageView: View,
                                    inAppMessage: IInAppMessage,
                                    inAppMessageViewLifecycleListener: IInAppMessageViewLifecycleListener,
                                    brazeConfigurationProvider: BrazeConfigurationProvider,
                                    openingAnimation: Animation,
                                    closingAnimation: Animation, clickableInAppMessageView: View) : 
    DefaultInAppMessageViewWrapper(inAppMessageView, 
        inAppMessage, 
        inAppMessageViewLifecycleListener, 
        brazeConfigurationProvider, 
        openingAnimation, 
        closingAnimation, 
        clickableInAppMessageView) {

  override fun open(activity: Activity) {
    super.open(activity)
    Toast.makeText(activity.applicationContext, "Opened in-app message", Toast.LENGTH_SHORT).show()
  }

  override fun close() {
    super.close()
    Toast.makeText(mInAppMessageView.context.applicationContext, "Closed in-app message", Toast.LENGTH_SHORT).show()
  }
}

IInAppMessageAnimationFactory를 구현하는 클래스를 생성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

public class CustomInAppMessageAnimationFactory implements IInAppMessageAnimationFactory {

  @Override
  public Animation getOpeningAnimation(IInAppMessage inAppMessage) {
    Animation animation = new AlphaAnimation(0, 1);
    animation.setInterpolator(new AccelerateInterpolator());
    animation.setDuration(2000L);
    return animation;
  }

  @Override
  public Animation getClosingAnimation(IInAppMessage inAppMessage) {
    Animation animation = new AlphaAnimation(1, 0);
    animation.setInterpolator(new DecelerateInterpolator());
    animation.setDuration(2000L);
    return animation;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class CustomInAppMessageAnimationFactory : IInAppMessageAnimationFactory {
  override fun getOpeningAnimation(inAppMessage: IInAppMessage): Animation {
    val animation: Animation = AlphaAnimation(0, 1)
    animation.interpolator = AccelerateInterpolator()
    animation.duration = 2000L
    return animation
  }

  override fun getClosingAnimation(inAppMessage: IInAppMessage): Animation {
    val animation: Animation = AlphaAnimation(1, 0)
    animation.interpolator = DecelerateInterpolator()
    animation.duration = 2000L
    return animation
  }
}

2단계: Braze에게 공장 사용 지시하기

IInAppMessageViewFactory 을 생성한 후 BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory() 으로 전화하여 다음과 같이 지시하세요. BrazeInAppMessageManager 기본 보기 팩토리 대신 커스텀 IInAppMessageViewFactory를 사용하도록 지시합니다.

작동 방식

slideup 인앱 메시지 보기는 IInAppMessageView를 구현합니다. full 및 modal 유형 메시지 보기는 IInAppMessageImmersiveView를 구현합니다. 이러한 클래스 중 하나를 구현하면 Braze가 해당되는 경우 커스텀 보기에 클릭 리스너를 추가할 수 있습니다. 모든 Braze 뷰 클래스는 안드로이드의 View 클래스를 확장합니다.

IInAppMessageView를 구현하면 커스텀 보기의 특정 부분을 클릭 가능한 요소로 정의할 수 있습니다. IInAppMessageImmersiveView를 구현하면 메시지 버튼 보기와 닫기 버튼 보기를 정의할 수 있습니다.

가 생성된 후 IInAppMessageViewWrapper 가 생성된 후 BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory() 을 호출하여 BrazeInAppMessageManager 에 기본 뷰 래퍼 팩토리 대신 커스텀을 사용하도록 지시합니다. IInAppMessageViewWrapperFactory 기본값인 뷰 래퍼 팩토리 대신 사용하도록 지시합니다.

Braze에 대한 다른 호출을 수행하기 전에 Application.onCreate()에서 IInAppMessageViewWrapperFactory를 설정하는 것이 좋습니다. 이렇게 하면 인앱 메시지가 표시되기 전에 사용자 지정 보기 래퍼 팩토리가 설정됩니다:

1

BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(new CustomInAppMessageViewWrapper());

1

BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(CustomInAppMessageViewWrapper())

IInAppMessageAnimationFactory가 생성되면 BrazeInAppMessageManager.getInstance().setCustomInAppMessageAnimationFactory()를 호출하여 BrazeInAppMessageManager에 기본 애니메이션 팩토리 대신 커스텀 IInAppMessageAnimationFactory를 사용하도록 지시합니다.

Braze에 대한 다른 호출을 수행하기 전에 Application.onCreate()에서 IInAppMessageAnimationFactory를 설정하는 것이 좋습니다. 그러면 인앱 메시지가 표시되기 전에 커스텀 애니메이션 팩토리가 설정됩니다.

커스텀 스타일

Braze UI 요소는 Android 표준 UI 지침과 일치하는 기본 모양과 느낌으로 제공되며 원활한 경험을 제공합니다. 이 참조 문서에서는 Android 또는 FireOS 애플리케이션의 커스텀 인앱 메시징 스타일을 다룹니다.

기본값 스타일 설정하기

기본 스타일은 Braze SDK의 styles.xml 파일에서 확인할 수 있습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  <style name="Braze"/>
  <style name="Braze.InAppMessage"/>
  <style name="Braze.InAppMessage.Header">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:padding">0.0dp</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:textColor">@color/com_braze_inappmessage_header_text</item>
    <item name="android:textSize">20.0sp</item>
    <item name="android:lineSpacingMultiplier">1.3</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">bold</item>
    <item name="android:layout_centerHorizontal">true</item>
  </style>

원하는 경우 이러한 스타일을 재정의하여 앱에 더 적합한 모양과 느낌을 만들 수 있습니다.

스타일을 재정의하려면 프로젝트의 styles.xml 파일에 전체 스타일을 복사한 후 수정합니다. 모든 속성을 올바르게 설정하려면 전체 스타일을 로컬 styles.xml 파일에 복사해야 합니다. 이러한 커스텀 스타일은 레이아웃을 일괄적으로 변경하는 것이 아니라 개별 UI 요소를 변경하기 위한 기능입니다. 레이아웃 수준 변경은 사용자 지정 보기로 처리해야 합니다.

글꼴 커스텀하기

res/font 디렉토리에서 서체를 찾아 커스텀 글꼴을 설정할 수 있습니다. 이를 사용하려면 메시지 텍스트, 헤더 및 버튼 텍스트의 스타일을 재정의하고 fontFamily 속성을 사용하여 사용자 지정 폰트 패밀리를 사용하도록 Braze에 지시하세요.

예를 들어 인앱 메시지 버튼 텍스트의 글꼴을 업데이트하려면 Braze.InAppMessage.Button 스타일을 재정의하고 커스텀 글꼴 패밀리를 참조합니다. 속성 값은 res/font 디렉터리에 있는 글꼴 패밀리를 가리켜야 합니다.

다음은 마지막 줄에 참조된 사용자 정의 글꼴 모음( my_custom_font_family)을 사용한 잘린 예제입니다:

1
2
3
4
5
6
7

  <style name="Braze.InAppMessage.Button">
    <item name="android:layout_height">wrap_content</item>
    ...
    <item name="android:paddingBottom">15.0dp</item>
    <item name="android:fontFamily">@font/my_custom_font_family</item>
    <item name="fontFamily">@font/my_custom_font_family</item>
  </style>

버튼 텍스트의 스타일은 Braze.InAppMessage.Button이며, 메시지 텍스트의 스타일은 Braze.InAppMessage.Message이고, 메시지 헤더의 스타일은 Braze.InAppMessage.Header입니다. 가능한 모든 인앱 메시지 텍스트에 커스텀 글꼴 패밀리를 사용하려면 모든 인앱 메시지의 상위 스타일인 Braze.InAppMessage 스타일에서 글꼴 패밀리를 설정하면 됩니다.

메시지 해고

뒤로 버튼 해고 비활성화하기

기본적으로 하드웨어의 뒤로 버튼은 Braze 인앱 메시지를 해제합니다. 이 동작은 메시지별로 BrazeInAppMessageManager.setBackButtonDismissesInAppMessageView()를 통해 비활성화할 수 있습니다.

다음 예제에서 disable_back_button은 인앱 메시지에 설정된 커스텀 키-값 페어로, 메시지에서 뒤로 버튼을 사용하여 메시지를 해제할 것인지 여부를 나타냅니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener(new DefaultInAppMessageManagerListener() {
  @Override
  public void beforeInAppMessageViewOpened(View inAppMessageView, IInAppMessage inAppMessage) {
    super.beforeInAppMessageViewOpened(inAppMessageView, inAppMessage);
    final Map<String, String> extras = inAppMessage.getExtras();
    if (extras != null && extras.containsKey("disable_back_button")) {
      BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(false);
    }
  }

  @Override
  public void afterInAppMessageViewClosed(IInAppMessage inAppMessage) {
    super.afterInAppMessageViewClosed(inAppMessage);
    BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(true);
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener(object : DefaultInAppMessageManagerListener() {
  override fun beforeInAppMessageViewOpened(inAppMessageView: View, inAppMessage: IInAppMessage) {
    super.beforeInAppMessageViewOpened(inAppMessageView, inAppMessage)
    val extras = inAppMessage.extras
    if (extras != null && extras.containsKey("disable_back_button")) {
      BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(false)
    }
  }

  override fun afterInAppMessageViewClosed(inAppMessage: IInAppMessage) {
    super.afterInAppMessageViewClosed(inAppMessage)
    BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(true)
  }
})

외부 탭 해고 인에이블먼트

기본적으로 외부 탭을 사용하여 모달을 해제하는 기본값은 false 으로 설정되어 있습니다. 이 값을 true로 설정하면 사용자가 인앱 메시지 외부를 탭할 때 Modal 인앱 메시지가 해제됩니다. 이 동작은 호출을 통해 토글할 수 있습니다.

1

BrazeInAppMessageManager.getInstance().setClickOutsideModalViewDismissInAppMessageView(true)

오리엔테이션 커스텀하기

인앱 메시지의 고정 방향을 설정하려면 먼저 커스텀 인앱 메시지 관리자 리스너를 설정합니다. 그런 다음 beforeInAppMessageDisplayed() 델리게이트 메서드에서 IInAppMessage 객체의 오리엔테이션을 업데이트합니다:

1
2
3
4
5

public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  // Set the orientation to portrait
  inAppMessage.setOrientation(Orientation.PORTRAIT);
  return InAppMessageOperation.DISPLAY_NOW;
}

1
2
3
4
5

override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
  // Set the orientation to portrait
  inAppMessage.orientation = Orientation.PORTRAIT
  return InAppMessageOperation.DISPLAY_NOW
}

태블릿 기기의 경우 인앱 메시지는 실제 화면 방향과 관계없이 사용자가 선호하는 방향 스타일로 표시됩니다.

어두운 테마 비활성화하기

기본값은 IInAppMessageManagerListener 의 beforeInAppMessageDisplayed() 에서 시스템 설정을 확인하고 다음 코드를 사용하여 메시징에 어두운 테마 스타일링을 조건부로 인에이블먼트합니다:

1
2
3
4
5
6
7

@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  if (inAppMessage instanceof IInAppMessageThemeable && ViewUtils.isDeviceInNightMode(BrazeInAppMessageManager.getInstance().getApplicationContext())) {
    ((IInAppMessageThemeable) inAppMessage).enableDarkTheme();
  }
  return InAppMessageOperation.DISPLAY_NOW;
}

1
2
3
4
5
6

override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
  if (inAppMessage is IInAppMessageThemeable && ViewUtils.isDeviceInNightMode(BrazeInAppMessageManager.getInstance().applicationContext!!)) {
    (inAppMessage as IInAppMessageThemeable).enableDarkTheme()
  }
  return InAppMessageOperation.DISPLAY_NOW
}

이를 변경하려면 사전 표시 프로세스의 어느 단계에서든 enableDarkTheme 을 호출하여 고유한 조건 로직을 구현할 수 있습니다.

Google Play 리뷰 프롬프트 커스텀하기

Google이 설정한 제한 사항으로 인해 현재 Braze에서는 커스텀 Google Play 리뷰 프롬프트를 지원하지 않습니다. 일부 사용자는 이러한 프롬프트를 성공적으로 통합할 수 있었지만, Google Play 할당량으로 인해 성공률이 낮은 사용자도 있습니다. 위험을 감수하고 통합해 보세요. Google Play 인앱 리뷰 프롬프트에 대한 설명서를 참조하십시오.

Prerequisites

이 기능을 사용하려면 먼저 Swift Braze SDK를 통합해야 합니다.

UI 델리게이트 설정(필수)

인앱 메시지 표시를 사용자 지정하고 다양한 수명 주기 이벤트에 반응하려면 다음을 설정해야 합니다. BrazeInAppMessageUIDelegate. 트리거된 인앱 메시지 페이로드 수신 및 처리, 디스플레이 수명 주기 이벤트 수신, 디스플레이 타이밍 제어에 사용되는 델리게이트 프로토콜입니다. BrazeInAppMessageUIDelegate 을 사용하려면 다음을 수행해야 합니다:

  • 기본 BrazeInAppMessageUI 구현을 inAppMessagePresenter.
  • 프로젝트에 BrazeUI 라이브러리를 포함하세요.

1단계: BrazeInAppMessageUIDelegate 프로토콜 구현

먼저 BrazeInAppMessageUIDelegate 프로토콜과 원하는 모든 해당 메서드를 구현하십시오. 다음 예제에서는 애플리케이션의 AppDelegate 클래스에서 이 프로토콜을 구현합니다.

1
2
3

extension AppDelegate: BrazeInAppMessageUIDelegate {
  // Implement your protocol methods here.
}

1
2
3
4
5
6
7

@interface AppDelegate () <BrazeInAppMessageUIDelegate>

@end

@implementation AppDelegate
  // Implement your protocol methods here.
@end

2단계: delegate 객체 할당

이 인앱 메시지 UI를 inAppMessagePresenter 로 할당하기 전에 BrazeInAppMessageUI 인스턴스에 delegate 객체를 할당합니다.

1
2
3

let inAppMessageUI = BrazeInAppMessageUI()
inAppMessageUI.delegate = self
AppDelegate.braze?.inAppMessagePresenter = inAppMessageUI

1
2
3

BrazeInAppMessageUI *inAppMessageUI = [[BrazeInAppMessageUI alloc] init];
inAppMessageUI.delegate = self;
AppDelegate.braze.inAppMessagePresenter = inAppMessageUI;

클릭 시 동작

각 Braze.InAppMessage 오브젝트에는 해당 ClickAction이 포함되어 있으며, 이는 클릭 시 동작을 정의합니다.

클릭 작업 유형

Braze.InAppMessage의 clickAction 속성정보에서 기본값은 .none이지만 다음 값 중 하나로 설정할 수 있습니다.

클릭 시 동작 사용자 지정

이 동작을 사용자 지정하려면 다음 샘플을 참조하여 clickAction 속성정보를 수정할 수 있습니다.

1
2
3
4
5
6
7
8

func inAppMessage(
  _ ui: BrazeInAppMessageUI, 
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  if let newUrl = URL(string: "{your-url}") {
    context.message.clickAction = .url(newUrl, useWebView: true)
  }
}

inAppMessage(_:prepareWith:) 메서드는 Objective-C에서 사용할 수 없습니다.

사용자 지정 동작 처리하기

다음 BrazeInAppMessageUIDelegate 위임 메서드가 인앱 메시지를 클릭할 때 호출됩니다. 인앱 메시지 버튼 및 HTML 인앱 메시지 버튼(링크)을 클릭한 경우 버튼 ID가 선택적 매개변수로 제공됩니다.

1
2
3
4
5
6
7

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  shouldProcess clickAction: Braze.InAppMessage.ClickAction,
  buttonId: String?,
  message: Braze.InAppMessage,
  view: InAppMessageView
) -> Bool

1
2
3
4
5
6

- (BOOL)inAppMessage:(BrazeInAppMessageUI *)ui
       shouldProcess:(enum BRZInAppMessageRawClickAction)clickAction
                 url:(NSURL *)uri
            buttonId:(NSString *)buttonId
             message:(BRZInAppMessageRaw *)message
                view:(UIView *)view;

이 메서드는 Braze에서 클릭 동작을 계속 실행할지 여부를 나타내는 부울 값을 반환합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

func inAppMessage(
  _ ui: BrazeInAppMessageUI, shouldProcess clickAction: Braze.InAppMessage.ClickAction,
  buttonId: String?, message: Braze.InAppMessage, view: InAppMessageView
) -> Bool {
    guard let buttonId,
      let idInt = Int(buttonId)
    else { return true }
    var button: BrazeKit.Braze.InAppMessage.Button? = nil

    switch message {
    case .modal(let modal):
      button = modal.buttons[idInt]

    case .modalImage(let modalImage):
      button = modalImage.buttons[idInt]

    case .full(let full):
      button = full.buttons[idInt]

    case .fullImage(let fullImage):
      button = fullImage.buttons[idInt]

    default:
      break
    }
    
    print(button?.id)
    print(button?.text)
    print(button?.clickAction)

    return true
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

- (BOOL)inAppMessage:(BrazeInAppMessageUI *)ui
       shouldProcess:(enum BRZInAppMessageRawClickAction)clickAction
                 url:(NSURL *)uri
            buttonId:(NSString *)buttonId
             message:(BRZInAppMessageRaw *)message
                view:(UIView *)view {
  NSInteger buttonInt = [buttonId integerValue];

  if (message.type == BRZInAppMessageRawTypeFull || message.type == BRZInAppMessageRawTypeModal) {
    BRZInAppMessageRawButton *button = message.buttons[buttonInt];
    NSLog(@"%ld", (long)button.identifier);
    NSLog(@"%@", button.text);
    NSLog(@"%ld", (long)button.clickAction);
  }
  return YES;
}

모달 해지 사용자 지정

외부 탭 해제 기능을 활성화하려면 사용자 지정하려는 인앱 메시지 유형의 Attributes 구조에서 dismissOnBackgroundTap 속성정보를 수정하면 됩니다.

예를 들어 Modal 이미지 인앱 메시지에 이 기능을 사용하려면 다음과 같이 구성할 수 있습니다.

1

BrazeInAppMessageUI.ModalImageView.Attributes.defaults.dismissOnBackgroundTap = true

Attributes 을 통한 사용자 지정은 Objective-C에서 사용할 수 없습니다.

기본값은 false 입니다. 사용자가 인앱 메시지 외부를 클릭할 때 Modal 인앱 메시지의 해제 여부를 결정합니다.

인앱 메시지 사용자 지정에 대한 자세한 내용은 이 문서를 참조하세요.

메시지 방향 사용자 지정

인앱 메시지의 방향을 사용자 지정할 수 있습니다. 모든 메시지에 대해 새로운 기본 방향을 설정하거나 단일 메시지에 대해 사용자 지정 방향을 설정할 수 있습니다.

모든 인앱 메시지의 기본 방향을 선택하려면 다음과 같이 inAppMessage(_:prepareWith:) 메서드를 사용하여 PresentationContext 에서 preferredOrientation 속성을 설정합니다.

예를 들어 세로 방향을 기본 방향으로 설정합니다:

1
2
3
4
5
6

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  context.preferredOrientation = .portrait
}

1
2
3
4

- (void)inAppMessage:(BrazeInAppMessageUI *)ui
         prepareWith:(BrazeInAppMessageUIPresentationContextRaw *)context {
  context.preferredOrientation = BRZInAppMessageRawOrientationPortrait;
}

단일 메시지의 방향을 설정하려면 Braze.InAppMessage 의 orientation 속성을 수정합니다:

1
2
3
4
5
6
7
8

// Set inAppMessage orientation to support any configuration
inAppMessage.orientation = .any

// Set inAppMessage orientation to only display in portrait
inAppMessage.orientation = .portrait

// Set inAppMessage orientation to only display in landscape
inAppMessage.orientation = .landscape

1
2
3
4
5
6
7
8

// Set inAppMessage orientation to support any configuration
inAppMessage.orientation = BRZInAppMessageRawOrientationAny;

// Set inAppMessage orientation to only display in portrait
inAppMessage.orientation = BRZInAppMessageRawOrientationPortrait;

// Set inAppMessage orientation to only display in landscape
inAppMessage.orientation = BRZInAppMessageRawOrientationLandscape;

인앱 메시지가 표시된 후 메시지가 표시되는 동안 디바이스 방향이 변경되면 메시지가 디바이스와 함께 회전합니다(메시지의 orientation 구성에서 지원되는 경우).

메시지가 표시되려면 인앱 메시지의 orientation 속성에서 디바이스 방향도 지원해야 합니다. 또한 preferredOrientation 설정은 Xcode에서 대상 설정의 배포 정보 섹션 아래 애플리케이션이 지원하는 인터페이스 방향에 포함된 경우에만 적용됩니다.

Xcode에서 지원되는 방향.

디스플레이 타이밍 사용자 지정

사용자 경험의 특정 시점에 사용 가능한 인앱 메시지 표시 여부를 제어할 수 있습니다. 전체 화면으로 게임을 하거나 로딩 화면에서 인앱 메시지가 나타나지 않도록 하고 싶다면 보류 중인 인앱 메시지를 지연시키거나 삭제할 수 있습니다. 인앱 메시지의 타이밍을 제어하려면 inAppMessage(_:displayChoiceForMessage:) delegate method를 사용하여 BrazeInAppMessageUI.DisplayChoice 속성을 설정하십시오.

1
2
3
4

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  displayChoiceForMessage message: Braze.InAppMessage
) -> BrazeInAppMessageUI.DisplayChoice

1

- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui displayChoiceForMessage:(BRZInAppMessageRaw *)message

다음 값 중 하나를 반환하도록 BrazeInAppMessageUI.DisplayChoice을(를) 구성하십시오:

상태 표시줄 숨기기

Full, FullImage, HTML의 인앱 메시지에서 SDK는 기본적으로 상태 표시줄을 숨깁니다. 다른 유형의 인앱 메시지에서 상태 표시줄은 그대로 유지됩니다. 이 동작을 구성하려면 inAppMessage(_:prepareWith:) 위임 메서드를 사용하여 PresentationContext에서 statusBarHideBehavior 속성정보를 설정합니다. 이 필드는 다음 값 중 하나를 사용합니다:

다크 모드 비활성화

사용자 기기에 다크 모드가 켜져 있는 경우 인앱 메시지에 다크 모드 스타일이 적용되지 않도록 하려면 inAppMessage(_:prepareWith:) 위임 메서드를 구현합니다. 메서드에 전달된 PresentationContext에는 표시할 InAppMessage 오브젝트에 대한 참조가 포함되어 있습니다. 각 InAppMessage에는 dark 및 light 모드 테마를 포함하는 themes 속성정보가 있습니다. themes.dark 속성정보를 nil로 설정하면 Braze가 인앱 메시지를 라이트 테마로 자동 표시합니다.

버튼이 있는 인앱 메시지 유형에는 buttons 속성정보에 추가 themes 오브젝트가 있습니다. 버튼이 다크 모드 스타일을 채택하지 않도록 하려면 map(_:)을 사용하여 light 테마가 적용되고 dark 테마가 적용되지 않은 새 버튼 배열을 생성할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  switch context.message {
    case .slideup:
      guard var slideup = context.message.slideup else { return }
      slideup.themes.dark = nil
      context.message.slideup = slideup
    
    case .modal:
      guard var modal = context.message.modal else { return }
      modal.themes.dark = nil
      modal.buttons = modal.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.modal = modal
    
    case .modalImage:
      guard var modalImage = context.message.modalImage else { return }
      modalImage.themes.dark = nil
      modalImage.buttons = modalImage.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.modalImage = modalImage
    
    case .full:
      guard var full = context.message.full else { return }
      full.themes.dark = nil
      full.buttons = full.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.full = full
    
    case .fullImage:
      guard var fullImage = context.message.fullImage else { return }
      fullImage.themes.dark = nil
      fullImage.buttons = fullImage.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.fullImage = fullImage
    
    default:
      break
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

- (void)inAppMessage:(BrazeInAppMessageUI *)ui
         prepareWith:(BrazeInAppMessageUIPresentationContextRaw *)context {
  switch (context.message.type) {
    case BRZInAppMessageRawTypeSlideup: {
      NSMutableDictionary *updatedThemes = [context.message.themes mutableCopy];
      [updatedThemes removeObjectForKey:@"dark"];
      context.message.themes = updatedThemes;
      break;
    }
    case BRZInAppMessageRawTypeModal:
    case BRZInAppMessageRawTypeFull:
    {
      NSMutableDictionary *updatedThemes = [context.message.themes mutableCopy];
      [updatedThemes removeObjectForKey:@"dark"];
      context.message.themes = updatedThemes;

      NSMutableArray *updatedButtons = [NSMutableArray arrayWithCapacity:context.message.buttons.count];
      for (BRZInAppMessageRawButton *button in context.message.buttons) {
        BRZInAppMessageRawButtonTheme *lightTheme = BRZInAppMessageRawButtonTheme.defaultLight;
        BRZInAppMessageRawButton *newButton = [button mutableCopy];
        newButton.textColor = lightTheme.textColor;
        newButton.backgroundColor = lightTheme.backgroundColor;
        newButton.borderColor = lightTheme.borderColor;
        [updatedButtons addObject:newButton];
      }
      context.message.buttons = updatedButtons;
      break;
    }
    default:
      break;
  }
}

앱 스토어 리뷰 프롬프트 사용자 지정

캠페인에서 인앱 메시지를 사용하여 사용자에게 앱 스토어 리뷰를 요청할 수 있습니다.

1단계: 인앱 메시지 위임자를 설정합니다

먼저, 앱에서 BrazeInAppMessageUIDelegate을 설정하세요.

2단계: 기본 App Store 리뷰 메시지 비활성화

다음으로, 기본 App Store 리뷰 메시지를 비활성화하기 위해 inAppMessage(_:displayChoiceForMessage:) 위임 메서드를 구현합니다.

1
2
3
4
5
6
7
8
9

func inAppMessage(_ ui: BrazeInAppMessageUI, displayChoiceForMessage message: Braze.InAppMessage) -> BrazeInAppMessageUI.DisplayChoice {
  if message.extras["AppStore Review"] != nil,
    let messageUrl = message.clickAction.url {
      UIApplication.shared.open(messageUrl, options: [:], completionHandler: nil)
      return .discard
  } else {
    return .now
  }
}

1
2
3
4
5
6
7
8
9

- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui
                            displayChoiceForMessage:(BRZInAppMessageRaw *)message {
  if (message.extras != nil && message.extras[@"AppStore Review"] != nil) {
    [[UIApplication sharedApplication] openURL:message.url options:@{} completionHandler:nil];
    return BRZInAppMessageUIDisplayChoiceDiscard;
  } else {
    return BRZInAppMessageUIDisplayChoiceNow;
  }
}

3단계: 딥링크를 생성합니다

딥링크 처리 코드에서 {YOUR-APP-SCHEME}:app-store-review 딥링크를 처리하기 위해 다음 코드를 추가합니다. StoreKit를 가져와서 SKStoreReviewController를 사용해야 합니다.

1
2
3
4
5
6
7
8

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
  let urlString = url.absoluteString.removingPercentEncoding
  if (urlString == "{YOUR-APP-SCHEME}:app-store-review") {
    SKStoreReviewController.requestReview()
    return true;
  }
  // Other deep link handling code…
}

1
2
3
4
5
6
7
8

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options {
  NSString *urlString = url.absoluteString.stringByRemovingPercentEncoding;
  if ([urlString isEqualToString:@"{YOUR-APP-SCHEME}:app-store-review"]) {
    [SKStoreReviewController requestReview];
    return YES;
  }
  // Other deep link handling code…
}

4단계: 커스텀 클릭 시 동작 설정

다음으로, 다음을 사용하여 인-앱 메시징 캠페인을 만드십시오:

  • 키-값 쌍 "AppStore Review" : "true"
  • 클릭 시 동작이 ‘앱으로 딥링크’로 설정되며 딥링크 {YOUR-APP-SCHEME}:app-store-review를 사용합니다.

Prerequisites

Before you can use this feature, you’ll need to integrate the Web Braze SDK.

Custom styles

Braze UI elements come with a default look and feel that create a neutral in-app message experience and aim for consistency with other Braze mobile platforms. The default Braze styles are defined in CSS within the Braze SDK.

Setting a default style

By overriding selected styles in your application, you can customize our standard in-app message types with your own background images, font families, styles, sizes, animations, and more.

For instance, the following is an example override that will cause an in-app message’s headers to appear italicized:

1
2
3

  body .ab-in-app-message .ab-message-header {
    font-style: italic;
  }

See the JSDocs for more information.

Customizing the z-index

By default, in-app messages are displayed using z-index: 9001. This is configurable using the inAppMessageZIndex initialization option in the scenario that your website styles elements with higher values than that.

1
2
3
4

braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT",
    inAppMessageZIndex: 12000
});

Customizing message dismissals

By default, when an in-app message is showing, pressing the escape button or a click on the grayed-out background of the page will dismiss the message. Configure the requireExplicitInAppMessageDismissal initialization option to true to prevent this behavior and require an explicit button click to dismiss messages.

1
2
3
4
5

import * as braze from "@braze/web-sdk";
braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT",
    requireExplicitInAppMessageDismissal: true
});

To set your in-app message links to open in a new tab, set the openInAppMessagesInNewTab option to true to force all links from in-app message clicks open in a new tab or window.

1

braze.initialize('api-key', { openInAppMessagesInNewTab: true} );

Prerequisites

Before you can use this feature, you’ll need to integrate the React Native Braze SDK.

Methods for logging

You can use these methods by passing your BrazeInAppMessage instance to log analytics and perform actions:

Handling message data

In most cases, you can use the Braze.addListener method to register event listeners to handle data coming from in-app messages.

Additionally, you can access the in-app message data in the JavaScript layer by calling the Braze.subscribeToInAppMessage method to have the SDKs publish an inAppMessageReceived event when an in-app message is triggered. Pass a callback to this method to execute your own code when the in-app message is triggered and received by the listener.

To customize how message data is handled, refer to the following implementation examples:

To enhance the default behavior, or if you don’t have access to customize the native iOS or Android code, we recommend that you disable the default UI while still receiving in-app message events from Braze. To disable the default UI, pass false to the Braze.subscribeToInAppMessage method and use the in-app message data to construct your own message in JavaScript. Note that you will need to manually log analytics on your messages if you choose to disable the default 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.
});

To include more advanced logic to determine whether or not to show an in-app message using the built-in UI, implement in-app messages through the native layer.

Implement the IInAppMessageManagerListener as described in our Android article on Custom Manager Listener. In your beforeInAppMessageDisplayed implementation, you can access the inAppMessage data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value.

For more on these values, see our Android documentation.

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

Overriding the default UI delegate

By default, BrazeInAppMessageUI is created and assigned when you initialize the braze instance. BrazeInAppMessageUI is an implementation of the BrazeInAppMessagePresenter protocol and comes with a delegate property that can be used to customize the handling of in-app messages that have been received.

  1. Implement the BrazeInAppMessageUIDelegate delegate as described in our iOS article here.

  2. In the inAppMessage(_:displayChoiceForMessage:) delegate method, you can access the inAppMessage data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value.

For more details on these values, see our iOS documentation.

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

To use this delegate, assign it to brazeInAppMessagePresenter.delegate after initializing the braze instance.

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

Overriding the default native UI

If you wish to fully customize the presentation of your in-app messages at the native iOS layer, conform to the BrazeInAppMessagePresenter protocol and assign your custom presenter following the sample below:

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;

표시 동작 사용자 지정

다음을 통해 런타임에 인앱 메시지의 표시 동작을 변경할 수 있습니다:

1
2
3
4
5
6
7
8

// Sets in-app messages to display immediately when triggered.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISPLAY_NOW);

// Sets in-app messages to display at a later time and be saved in a stack.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISPLAY_LATER);

// Sets in-app messages to be discarded after being triggered.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISCARD);

사용자 지정 리스너 설정

사용자가 인앱 메시지와 상호 작용하는 방식을 더 잘 제어해야 하는 경우 BrazeInAppMessageListener를 사용하여 Appboy.AppboyBinding.inAppMessageListener에 할당합니다. 사용하지 않으려는 위임의 경우 null로 남겨두면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

BrazeInAppMessageListener listener = new BrazeInAppMessageListener() {
  BeforeInAppMessageDisplayed = BeforeInAppMessageDisplayed,
  OnInAppMessageButtonClicked = OnInAppMessageButtonClicked,
  OnInAppMessageClicked       = OnInAppMessageClicked,
  OnInAppMessageHTMLClicked   = OnInAppMessageHTMLClicked,
  OnInAppMessageDismissed     = OnInAppMessageDismissed,
};
Appboy.AppboyBinding.inAppMessageListener = listener;

public void BeforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  // Executed before an in-app message is displayed.
}

public void OnInAppMessageButtonClicked(IInAppMessage inAppMessage, InAppMessageButton inAppMessageButton) {
  // Executed whenever an in-app message button is clicked.
}

public void OnInAppMessageClicked(IInAppMessage inAppMessage) {
  // Executed whenever an in-app message is clicked.
}

public void OnInAppMessageHTMLClicked(IInAppMessage inAppMessage, Uri uri) {
  // Executed whenever an HTML in-app message is clicked.
}

public void OnInAppMessageDismissed(IInAppMessage inAppMessage) {
  // Executed whenever an in-app message is dismissed without a click.
}
Github   GitHub 에서 이 페이지를 편집합니다.
New Stuff!