アプリ内メッセージのカスタマイズ
Braze SDKのアプリ内メッセージをカスタマイズする方法を学習。
前提条件
この機能を使用する前に、Android Braze SDKを統合する必要があります。 You’ll also need to set up push notifications.
Setting custom manager listeners
While the BrazeInAppMessageManager
listener can automatically handle the display and lifecycle of in-app messages, you’ll need to implement a custom manager listener if you’d like to fully customize your messages.
The Braze SDK has a default DefaultHtmlInAppMessageActionListener
class that is used if no custom listener is defined and takes appropriate action automatically. If you require more control over how a user interacts with different buttons inside a custom HTML in-app message, implement a custom IHtmlInAppMessageActionListener
class.
Step 1: Implement the custom manager listener
Step 1.1: Implement IInAppMessageManagerListener
Create a class that implements IInAppMessageManagerListener
.
The callbacks in your IInAppMessageManagerListener
will also be called at various points in the in-app message lifecycle. For example, if you set a custom manager listener when an in-app message is received from Braze, the beforeInAppMessageDisplayed()
method will be called. If your implementation of this method returns InAppMessageOperation.DISCARD
, that signals to Braze that the in-app message will be handled by the host app and should not be displayed by Braze. If InAppMessageOperation.DISPLAY_NOW
is returned, Braze will attempt to display the in-app message. This method should be used if you choose to display the in-app message in a customized manner.
IInAppMessageManagerListener
also includes delegate methods for message clicks and buttons, which can be used in cases like intercepting a message when a button or message is clicked for further processing.
Step 1.2: Hook into IAM view lifecycle methods (optional)
The IInAppMessageManagerListener
interface has in-app message view methods called at distinct points in the in-app message view lifecycle. These methods are called in the following order:
beforeInAppMessageViewOpened
: Called just before the in-app message is added to the activity’s view. The in-app message is not yet visible to the user at this time.afterInAppMessageViewOpened
: Called just after the in-app message is added to the activity’s view. The in-app message is now visible to the user at this time.beforeInAppMessageViewClosed
: Called just before the in-app message is removed from the activity’s view. The in-app message is still visible to the user at this time.afterInAppMessageViewClosed
: Called just after the in-app message is removed from the activity’s view. The in-app message is no longer visible to the user at this time.
Note that the time between afterInAppMessageViewOpened
and beforeInAppMessageViewClosed
is when the in-app message view is on screen, visible to the user.
Implementation of these methods is not required. They’re only provided to track and inform the in-app message view lifecycle. You can leave these method implementations empty.
Create a class that implements IHtmlInAppMessageActionListener
.
The callbacks in your IHtmlInAppMessageActionListener
will be called whenever the user initiates any of the following actions inside the HTML in-app message:
- Clicks on the close button
- Fires a custom event
- Clicks on a URL inside HTML in-app message
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
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 onNewsfeedClicked(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
Toast.makeText(mContext, "Newsfeed button pressed. Ignoring.", Toast.LENGTH_LONG).show();
BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false);
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
19
20
21
22
23
24
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 onNewsfeedClicked(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle): Boolean {
Toast.makeText(mContext, "Newsfeed button pressed. Ignoring.", Toast.LENGTH_LONG).show()
BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false)
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
}
}
Step 2: Instruct Braze to use the custom manager listener
After you create IInAppMessageManagerListener
, call BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener()
to instruct BrazeInAppMessageManager
to use your custom IInAppMessageManagerListener
instead of the default listener. Do this in your Application.onCreate()
before any other calls to Braze, so the custom listener is set before any in-app messages are displayed.
Altering in-app messages before display
When a new in-app message is received, and there is already an in-app message being displayed, the new message will be put onto the top of the stack and can be displayed at a later time.
However, if there is no in-app message being displayed, the following delegate method in IInAppMessageManagerListener
will be called:
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
}
The InAppMessageOperation()
return value can control when the message should be displayed. The suggested usage of this method would be to delay messages in certain parts of the app by returning DISPLAY_LATER
when in-app messages would be distracting to the user’s app experience.
InAppMessageOperation return value |
Behavior |
---|---|
DISPLAY_NOW |
The message will be displayed |
DISPLAY_LATER |
The message will be returned to the stack and displayed at the next available opportunity |
DISCARD |
The message will be discarded |
null |
The message will be ignored. This method should NOT return null |
See InAppMessageOperation.java
for more details.
If you choose to DISCARD
the in-app message and replace it with your in-app message view, you will need to log in-app message clicks and impressions manually.
On Android, this is done by calling logClick
and logImpression
on in-app messages and logButtonClick
on immersive in-app messages.
Once an in-app message has been placed on the stack, you can request for it to be retrieved and displayed at any time by calling BrazeInAppMessageManager.getInstance().requestDisplayInAppMessage()
. This method requests Braze to display the next available in-app message from the stack.
After your IHtmlInAppMessageActionListener
is created, call BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener()
to instruct BrazeInAppMessageManager
to use your custom IHtmlInAppMessageActionListener
instead of the default action listener.
We recommend setting your IHtmlInAppMessageActionListener
in your Application.onCreate()
before any other calls to Braze. This will set the custom action listener before any in-app message is displayed:
1
BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener(new CustomHtmlInAppMessageActionListener(context));
1
BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener(CustomHtmlInAppMessageActionListener(context))
Setting custom factories
You can override a number of defaults through custom factory objects. These can be registered with the Braze SDK as needed to achieve the desired results. However, if you decide to override a factory, you’ll likely need to explicitly defer to the default or reimplement the functionality provided by the Braze default. The following code snippet illustrates how to supply custom implementations of the IInAppMessageViewFactory
and the IInAppMessageViewWrapperFactory
interfaces.
In-app message types
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())
}
}
In-app message types
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 in-app message types are versatile enough to cover most custom use cases. However, if you want to fully define the visual appearance of your in-app messages instead of using a default type, Braze makes this possible by setting a custom view factory.
The BrazeInAppMessageManager
automatically handles placing the in-app message model into the existing activity view hierarchy by default using DefaultInAppMessageViewWrapper
. If you need to customize how in-app messages are placed into the view hierarchy, you should use a custom IInAppMessageViewWrapperFactory
.
In-app messages have preset animation behavior. Slideup
messages slide into the screen; full
and modal
messages fade in and out. If you want to define custom animation behaviors for your in-app messages, Braze makes this possible by setting up a custom animation factory.
Step 1: Implement the factory
Create a class that implements 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)
}
}
}
}
Create a class that implements IInAppMessageViewWrapperFactory
and returns an IInAppMessageViewWrapper
.
This factory is called immediately after the in-app message view is created. The easiest way to implement a custom IInAppMessageViewWrapper
is just to extend the default 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()
}
}
Create a class that implements 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
}
}
Step 2: Instruct Braze to use the factory
After your IInAppMessageViewFactory
is created, call BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory()
to instruct BrazeInAppMessageManager
to use your custom IInAppMessageViewFactory
instead of the default view factory.
We recommend setting your IInAppMessageViewFactory
in your Application.onCreate()
before any other calls to Braze. This will set the custom view factory before any in-app message is displayed.
How it works
The slideup
in-app message view implements IInAppMessageView
. The full
and modal
type message views implement IInAppMessageImmersiveView
. Implementing one of these classes allows Braze to add click listeners to your custom view where appropriate. All Braze view classes extend Android’s View
class.
Implementing IInAppMessageView
allows you to define a certain portion of your custom view as clickable. Implementing IInAppMessageImmersiveView
allows you to define message button views and a close button view.
After your IInAppMessageViewWrapper
is created, call BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory()
to instruct BrazeInAppMessageManager
to use your custom IInAppMessageViewWrapperFactory
instead of the default view wrapper factory.
We recommend setting your IInAppMessageViewWrapperFactory
in your Application.onCreate()
before any other calls to Braze. This will set the custom view wrapper factory before any in-app message is displayed:
1
BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(new CustomInAppMessageViewWrapper());
1
BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(CustomInAppMessageViewWrapper())
Once your IInAppMessageAnimationFactory
is created, call BrazeInAppMessageManager.getInstance().setCustomInAppMessageAnimationFactory()
to instruct BrazeInAppMessageManager
to use your custom IInAppMessageAnimationFactory
instead of the default animation factory.
We recommend setting your IInAppMessageAnimationFactory
in your Application.onCreate()
before any other calls to Braze. This will set the custom animation factory before any in-app message is displayed.
Custom styles
Braze UI elements come with a default look and feel that matches the Android standard UI guidelines and provides a seamless experience. This reference article covers custom in-app messaging styling for your Android or FireOS application.
Setting a default style
You can see default styles in the Braze SDK’s styles.xml
file:
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>
If you would prefer, you can override these styles to create a look and feel that better suits your app.
To override a style, copy it in its entirety to the styles.xml
file in your project and make modifications. The whole style must be copied over to your local styles.xml
file for all attributes to be correctly set. Note that these custom styles are for changes to individual UI elements, not wholesale changes to layouts. Layout-level changes need to be handled with custom views.
You can customize some colors directly in your Braze campaign without modifying the XML. Keep in mind, colors set in the Braze dashboard will override colors you set anywhere else.
Customizing the font
Braze allows setting a custom font using the font family guide. To use it, override the style for message text, headers, and button text and use the fontFamily
attribute to instruct Braze to use your custom font family.
For example, to update the font on your in-app message button text, override the Braze.InAppMessage.Button
style and reference your custom font family. The attribute value should point to a font family in your res/font
directory.
Here is a truncated example with a custom font family, my_custom_font_family
, referenced on the last line:
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>
Aside from the Braze.InAppMessage.Button
style for button text, the style for message text is Braze.InAppMessage.Message
and the style for message headers is Braze.InAppMessage.Header
. If you want to use your custom font family across all possible in-app message text, you can set your font family on the Braze.InAppMessage
style, which is the parent style for all in-app messages.
As with other custom styles, the entire style must be copied over to your local styles.xml
file for all attributes to be correctly set.
Message dismissals
Disabling back button dismissals
By default, the hardware back button dismisses Braze in-app messages. This behavior can be disabled on a per-message basis via BrazeInAppMessageManager.setBackButtonDismissesInAppMessageView()
.
In the following example, disable_back_button
is a custom key-value pair set on the in-app message that signifies whether the message should allow for the back button to dismiss the message:
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)
}
})
Note that if this functionality is disabled, the host activity’s hardware back button default behavior will be used instead. This may lead to the back button closing the application instead of the displayed in-app message.
Enabling outside tap dismissals
By default, dismissing the modal using an outside tap is set to false
. Setting this value to true
will result in the modal in-app message being dismissed when the user taps outside of the in-app message. This behavior can be toggled on by calling:
1
BrazeInAppMessageManager.getInstance().setClickOutsideModalViewDismissInAppMessageView(true)
Customizing the orientation
To set a fixed orientation for an in-app message, first set a custom in-app message manager listener. Then, call setOrientation()
on the IInAppMessage
object in the beforeInAppMessageDisplayed()
delegate method:
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
}
For tablet devices, in-app messages will appear in the user’s preferred orientation style regardless of actual screen orientation.
Disabling dark theme
By default, IInAppMessageManagerListener
’s beforeInAppMessageDisplayed()
checks the system settings and conditionally enables dark theme styling on the message with the following code:
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
}
To change this, you can call enableDarkTheme
at any step in the pre-display process to implement your own conditional logic.
Customizing the Google Play review prompt
Due to the limitations and restrictions set by Google, custom Google Play review prompts are not currently supported by Braze. While some users have been able to integrate these prompts successfully, others have shown low success rates due to Google Play quotas. Integrate at your own risk. Refer to documentation on Google Play in-app review prompts.
前提条件
この機能を使用する前に、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
オブジェクトを割り当てます
delegate
オブジェクトをBrazeInAppMessageUI
インスタンスに割り当ててから、このアプリ内メッセージUI をinAppMessagePresenter
として割り当てます。
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;
パラメータが言語ランタイムと互換性がないため、すべてのデリゲートメソッドを Objective-C で使用できるわけではありません。
アプリ内メッセージ UI デリゲートの段階的な実装については、このチュートリアルを参照してください。
オン・クリック動作
各Braze.InAppMessage
オブジェクトには対応する ClickAction
が含まれ、これによってクリック時の動作が定義されます。
クリックアクションのタイプ
Braze.InAppMessage
のclickAction
プロパティは .none
にデフォルト設定されていますが、次のうちいずれかの値に設定できます。
ClickAction |
クリック時動作 |
---|---|
.url(URL, useWebView: Bool) |
指定されたURLを外部ブラウザで開く。useWebView がtrue に設定されていれば、ウェブビューで開く。 |
.newsFeed |
メッセージがクリックされるとニュースフィードが表示され、メッセージは解除される。 注:ニュースフィードは非推奨になります。詳しくはマイグレーション・ガイドをチェックしてほしい。 |
.none |
クリックするとメッセージが却下されます。 |
ボタンを含むアプリ内メッセージの場合、ボタンテキストを追加する前にクリックアクションが追加されると、メッセージ clickAction
も最終ペイロードに含まれます。
クリック時の動作をカスタマイズする
この動作をカスタマイズするために、以下のサンプルを参照して 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
プロパティを変更できます。
たとえば、モーダル画像のアプリ内メッセージに対してこの機能を有効にする場合は、以下を設定します。
1
BrazeInAppMessageUI.ModalImageView.Attributes.defaults.dismissOnBackgroundTap = true
Attributes
によるカスタマイズは Objective-C では使用できません。
デフォルト値は false
です。これにより、ユーザーがアプリ内メッセージの外側をタップしたときにモーダルアプリ内メッセージが閉じられるかどうかが決まります。
DismissModalOnOutsideTap |
説明 |
---|---|
true |
モーダルアプリ内メッセージは、外部タップで閉じられます。 |
false |
デフォルトでは、モーダルアプリ内メッセージは外部タップをしても閉じられません。 |
アプリ内メッセージのカスタマイズの詳細については、こちらの記事を参照してください。
メッセージの方向をカスタマイズする
アプリ内メッセージの向きをカスタマイズできます。すべてのメッセージに新しいデフォルトの方向を設定したり、1 つのメッセージにカスタムの方向を設定したりできます。
すべてのアプリ内メッセージのデフォルトの方向を選択するには、inAppMessage(_:prepareWith:)
メソッドを使用して、preferredOrientation
プロパティをPresentationContext
に設定します。
たとえば、縦向きをデフォルトの方向に設定するには、次のようにします。
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のターゲットの設定の [導入情報] セクションで、アプリケーションでサポートされているインターフェイスの向きにその向きが含まれている場合に限られます。
向きはメッセージの表示にのみ適用されます。デバイスの向きが変わると、メッセージビューでサポートされている向きのいずれかが採用されます。小型のデバイス (iPhone、iPod Touch) では、モーダルアプリ内メッセージやフルアプリ内メッセージを横向きに設定すると、コンテンツが切り捨てられることがあります。
表示タイミングのカスタマイズ
利用可能なアプリ内メッセージをユーザーエクスペリエンスの特定のポイントで表示するかどうかをコントロールできます。全画面でのゲーム中や読み込み画面など、アプリ内メッセージを表示させたくない状況がある場合は、保留中のアプリ内メッセージを遅延させるか、破棄することができます。アプリ内メッセージのタイミングをコントロールするには、inAppMessage(_:displayChoiceForMessage:)
デリゲートメソッドを使用して 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
を設定します。
ディスプレイの選択 | 動作 |
---|---|
.now |
メッセージはすぐに表示される。これはデフォルト値です。 |
.reenqueue |
メッセージは表示されず、スタックの一番上に戻される。 |
.later |
メッセージは表示されず、スタックの一番上に戻される。(非推奨、.reenqueue を使用してください) |
.discard |
メッセージは破棄され、表示されない。 |
InAppMessageUI
のサンプルについては、Swift Braze SDK リポジトリ およびObjective-C を確認してください。
ステータスバーの非表示
Full
、FullImage
、および HTML
アプリ内メッセージについて、SDK ではステータスバーがデフォルトで非表示になります。他の種類のアプリ内メッセージでは、ステータスバーは変更されません。この動作を設定するには、inAppMessage(_:prepareWith:)
デリゲートメソッドを使用して PresentationContext
で statusBarHideBehavior
プロパティを設定します。このフィールドの値は次のうちいずれかになります。
ステータスバー非表示の動作 | 説明 |
---|---|
.auto |
メッセージ・ビューはステータス・バーの非表示状態を決定する。 |
.hidden |
ステータスバーは常に隠す。 |
.visible |
常にステータスバーを表示する。 |
ダークモードを無効にする
ユーザーデバイスでダークモードが有効になっているときにアプリ内メッセージでダークモードスタイルが採用されないようにするには、inAppMessage(_:prepareWith:)
デリゲートメソッドを実装します。メソッドに渡される PresentationContext
には、表示される InAppMessage
オブジェクトの参照が含まれます。各 InAppMessage
に、dark
と light
のモードテーマを含む themes
プロパティがあります。themes.dark
プロパティを nil
に設定すると、Braze では自動的にライトテーマを使用してアプリ内メッセージが表示されます。
ボタンがあるアプリ内メッセージの種類では、buttons
プロパティに追加の themes
オブジェクトがあります。ボタンでダークモードのスタイルが採用されないようにするには、map(_:)
を使用して dark
テーマがない light
テーマのボタンの新しい配列を作成できます。
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;
}
}
App Store レビュープロンプトのカスタマイズ
キャンペーンでアプリ内メッセージを使用して、App Store レビューをユーザーに依頼できます。
このプロンプトの例は Braze のデフォルト動作をオーバーライドするため、これが実装されるとインプレッションを自動的に追跡できません。 独自の分析 を記録する必要があります。
ステップ1:アプリ内メッセージデリゲートの設定
まず、アプリで BrazeInAppMessageUIDelegate
を設定します。
ステップ 2:デフォルトの App Store レビューメッセージを無効にする
次に、inAppMessage(_:displayChoiceForMessage:)
デリゲートメソッドを実装して、デフォルトの App Store レビューメッセージを無効にします。
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
ディープリンクを処理します。SKStoreReviewController
を使用するには StoreKit
をインポートする必要があることに注意してください。
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
を使用して、クリック時動作を [アプリにディープリンクする] に設定します。
Appleは、App Store のレビュープロンプトをユーザーごとに年間最大3回に制限しているため、キャンペーンのレートはユーザーごとに年間3回に制限する必要があります。
ユーザーは、App Store のレビュープロンプトをオフにできます。そのため、カスタムレビュープロンプトでは、App Store のネイティブレビュープロンプトが表示されることを約束したり、直接のレビューを求めたりしないでください。
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
});
This feature is only available for Web Braze SDK v3.3.0 and later.
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
});
Opening links in a new tab
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:
Method | Description |
---|---|
logInAppMessageClicked(inAppMessage) |
Logs a click for the provided in-app message data. |
logInAppMessageImpression(inAppMessage) |
Logs an impression for the provided in-app message data. |
logInAppMessageButtonClicked(inAppMessage, buttonId) |
Logs a button click for the provided in-app message data and button ID. |
hideCurrentInAppMessage() |
Dismisses the currently displayed in-app message. |
performInAppMessageAction(inAppMessage) |
Performs the action for an in-app message. |
performInAppMessageButtonAction(inAppMessage, buttonId) |
Performs the action for an in-app message button. |
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.
Since this is an advanced customization option, note that overriding the default Braze implementation will also nullify the logic to emit in-app message events to your JavaScript listeners. If you wish to still use Braze.subscribeToInAppMessage
or Braze.addListener
as described in Accessing in-app message data, you will need to handle publishing the events yourself.
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.
-
Implement the
BrazeInAppMessageUIDelegate
delegate as described in our iOS article here. -
In the
inAppMessage(_:displayChoiceForMessage:)
delegate method, you can access theinAppMessage
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.
BrazeUI
can only be imported in Objective-C or Swift. If you are using Objective-C++, you will need to handle this in a separate file.
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.
}