Skip to content

アプリ内メッセージのカスタマイズ

Braze SDKのアプリ内メッセージをカスタマイズする方法を学習。高度なスタイリング・テクニックについては、キーと値のペアを使ってメッセージ・スタイリングをカスタマイズするチュートリアルを参照されたい。

前提条件

この機能を使用する前に、Web Braze SDKを統合する必要がある。

顧客スタイル

BrazeのUI要素はデフォルトの外観と操作感を備えており、ニュートラルなアプリ内メッセージ体験を提供し、他のBrazeモバイルプラットフォームとの一貫性を目指しています。デフォルトのBrazeスタイルは、Braze SDK内のCSSで定義されている。

デフォルトスタイルの設定

アプリケーションで選択したスタイルを上書きすることで、独自の背景画像、フォントファミリ、スタイル、サイズ、アニメーションなどを使用して標準アプリ内メッセージタイプをカスタマイズできます。

たとえば、次の例はアプリ内メッセージのヘッダーをイタリックで表示する上書きを示しています。

1
2
3

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

詳細についてはJSDocsを参照してください。

z-indexをカスタマイズする

デフォルトでは、アプリ内メッセージは z-index: 9001 を使用して表示されます。これは、inAppMessageZIndex 初期化オプションを使用して構成可能であり、あなたのWeb サイトがそれよりも高い値で要素をスタイルするシナリオで使用されます。

1
2
3
4

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

メッセージの破棄をカスタマイズする

デフォルトでは、アプリ内メッセージが表示されている場合、エスケープボタンを押すか、ページのグレーアウトした背景をクリックすると、メッセージが表示されなくなる。requireExplicitInAppMessageDismissal 初期化オプションをtrueに設定して、この動作を防ぎ、メッセージを消去するために明示的なボタンをクリックする必要があります。

1
2
3
4
5

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

リンクを新しいタブで開封する

新しいタブでアプリ内メッセージのリンクが開くように設定するには、openInAppMessagesInNewTab オプションを true に設定して、アプリ内メッセージでのクリックによるすべてのリンク先が新しいタブまたはウィンドウで開くように強制します。

1

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

前提条件

この機能を使用する前に、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 ビュークラスは Android の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に設定した場合、ユーザーがアプリ内メッセージの外側をタップすると、モーダルアプリ内メッセージが閉じられます。この動作は、以下を呼び出すことで切り替えることができます。

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 によって設定された制限事項と制約のため、カスタムの Google Play レビュープロンプトは現在 Braze でサポートされていません。これらのプロンプトをうまく統合できたユーザーもいれば、Google Play のクォータによって成功率が低いユーザーもいます。ご自身の責任において統合してください。Google Play アプリ内レビュープロンプトのドキュメントを参照してください。

前提条件

この機能を使う前に、Swift Braze SDKを統合する必要がある。

UI デリゲートの設定(必須)

アプリ内メッセージの表示をカスタマイズし、さまざまなライフサイクルイベントに対応するには、BrazeInAppMessageUIDelegate を設定する必要があります。これは、トリガーのアプリ内メッセージ有料読み込むsの受信と処理、ディスプレイライフサイクルイベントの受信、およびディスプレイタイミングのコントロールに使用されるデリゲートプロトコルです。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;

オン・クリック動作

各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 プロパティを変更できます。

たとえば、モーダル画像のアプリ内メッセージに対してこの機能を有効にする場合は、以下を設定します。

1

BrazeInAppMessageUI.ModalImageView.Attributes.defaults.dismissOnBackgroundTap = true

Attributes によるカスタマイズは Objective-C では使用できません。

デフォルト値は false です。これにより、ユーザーがアプリ内メッセージの外側をタップしたときにモーダルアプリ内メッセージが閉じられるかどうかが決まります。

アプリ内メッセージのカスタマイズの詳細については、こちらの記事を参照してください。

メッセージの方向をカスタマイズする

アプリ内メッセージの向きをカスタマイズできます。すべてのメッセージに新しいデフォルトの向きを設定したり、1つのメッセージにカスタムの向きを設定したりできます。

すべてのアプリ内メッセージ s のデフォルト方向を選択するには、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;
}

単一のメッセージの方向を設定するには、orientation プロパティのBraze.InAppMessage を変更します。

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のターゲットの設定の [導入情報] セクションで、アプリケーションでサポートされているインターフェイスの向きにその向きが含まれている場合に限られます。

Xコードでサポートされる方向。

表示タイミングのカスタマイズ

利用可能なアプリ内メッセージをユーザーエクスペリエンスの特定のポイントで表示するかどうかをコントロールできます。全画面でのゲーム中や読み込み画面など、アプリ内メッセージを表示させたくない状況がある場合は、保留中のアプリ内メッセージを遅延させるか、破棄することができます。アプリ内メッセージのタイミングをコントロールするには、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 を設定します。

ステータス棒を非表示にする

Full、FullImage、および HTML アプリ内メッセージについて、SDK ではステータスバーがデフォルトで非表示になります。他の種類のアプリ内メッセージでは、ステータスバーは変更されません。この動作を設定するには、inAppMessage(_:prepareWith:) デリゲートメソッドを使用して PresentationContext で statusBarHideBehavior プロパティを設定します。このフィールドの値は次のうちいずれかになります。

ダークモードを無効にする

ユーザーデバイスでダークモードが有効になっているときにアプリ内メッセージでダークモードスタイルが採用されないようにするには、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;
  }
}

アプリストアレビュープロンプトのカスタマイズ

キャンペーンでアプリ内メッセージ s を使用して、ユーザー s にアプリストアの確認を依頼できます。

ステップ 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 を使用して、クリック時動作を [アプリにディープリンクする] に設定します。

前提条件

この機能を使う前に、React Native Braze SDKを統合する必要がある。

ロギングの方法

これらのメソッドを使用するには、BrazeInAppMessage インスタンスを渡して分析をログに記録し、アクションを実行します。

メッセージデータを扱う

ほとんどの場合、Braze.addListener メソッドを使用して、アプリ内メッセージからのデータを処理するイベントリスナーを登録できます。
さらに、Braze.subscribeToInAppMessage メソッドを呼び出して、アプリ内メッセージがトリガーされたときに SDK に inAppMessageReceived イベントを発行させることで、JavaScript レイヤーのアプリ内メッセージデータにアクセスできます。 アプリ内メッセージがトリガーされてリスナーによって受信されたときに独自のコードを実行するには、このメソッドにコールバックを渡します。

メッセージデータの扱い方をカスタマイズするには、以下の実装例を参照のこと：

デフォルトの行動を強化するため、またはiOSやAndroidのネイティブコードをカスタマイズするアクセス権がない場合は、デフォルトのUIを無効にしながら、アプリ内メッセージイベントをBrazeから受信することをお勧めします。デフォルトの UI を無効にするには、false を Braze.subscribeToInAppMessage メソッドに渡し、アプリ内メッセージデータを使用して JavaScript で独自のメッセージを作成します。デフォルトのUIを無効にする場合は、メッセージングの分析を手動で行う必要がある。

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

import Braze from "@braze/react-native-sdk";

// Option 1: Listen for the event directly via `Braze.addListener`.
//
// You may use this method to accomplish the same thing if you don't
// wish to make any changes to the default Braze UI.
Braze.addListener(Braze.Events.IN_APP_MESSAGE_RECEIVED, (event) => {
  console.log(event.inAppMessage);
});

// Option 2: Call `subscribeToInAppMessage`.
//
// Pass in `false` to disable the automatic display of in-app messages.
Braze.subscribeToInAppMessage(false, (event) => {
  console.log(event.inAppMessage);
  // Use `event.inAppMessage` to construct your own custom message UI.
});

組み込み UI を使用してアプリ内メッセージを表示するかどうかを決定するためのより高度なロジックを組み込むには、ネイティブレイヤーを介してアプリ内メッセージを実装します。

カスタムマネージャーリスナーに関する Android の記事で説明されているように、IInAppMessageManagerListener を実装します。beforeInAppMessageDisplayed 実装では、inAppMessage データにアクセスして JavaScript レイヤーに送信し、戻り値に基づいてネイティブメッセージを表示するかどうかを決定できます。

これらの値の詳細については、Android のドキュメントを参照してください。

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

// In-app messaging
@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
    WritableMap parameters = new WritableNativeMap();
    parameters.putString("inAppMessage", inAppMessage.forJsonPut().toString());
    getReactNativeHost()
        .getReactInstanceManager()
        .getCurrentReactContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("inAppMessageReceived", parameters);
    // Note: return InAppMessageOperation.DISCARD if you would like
    // to prevent the Braze SDK from displaying the message natively.
    return InAppMessageOperation.DISPLAY_NOW;
}

デフォルトの UI デリゲートをオーバーライドする

既定では、braze インスタンスを初期化すると、BrazeInAppMessageUI が作成されて割り当てられます。BrazeInAppMessageUI は BrazeInAppMessagePresenter プロトコルの実装であり、受信したアプリ内メッセージの処理をカスタマイズするために使用できる delegate プロパティが付属しています。

  1. こちらの iOS の記事で説明されているように、BrazeInAppMessageUIDelegate デリゲートを実装します。

  2. inAppMessage(_:displayChoiceForMessage:) デリゲートメソッドでは、inAppMessage データにアクセスして JavaScript レイヤーに送信し、戻り値に基づいてネイティブメッセージを表示するかどうかを決定できます。

これらの値の詳細については、iOS のドキュメントを参照してください。

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

- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui
                            displayChoiceForMessage:(BRZInAppMessageRaw *)message {
  // Convert the message to a JavaScript representation.
  NSData *inAppMessageData = [message json];
  NSString *inAppMessageString = [[NSString alloc] initWithData:inAppMessageData encoding:NSUTF8StringEncoding];
  NSDictionary *arguments = @{
    @"inAppMessage" : inAppMessageString
  };

  // Send to JavaScript.
  [self sendEventWithName:@"inAppMessageReceived" body:arguments];

  // Note: Return `BRZInAppMessageUIDisplayChoiceDiscard` if you would like
  // to prevent the Braze SDK from displaying the message natively.
  return BRZInAppMessageUIDisplayChoiceNow;
}

このデリゲートを使用するには、braze インスタンスを初期化した後に brazeInAppMessagePresenter.delegate に割り当てます。

1
2
3
4
5
6
7
8

@import BrazeUI;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
  Braze *braze = [BrazeReactBridge initBraze:configuration];
  ((BrazeInAppMessageUI *)braze.inAppMessagePresenter).delegate = [[CustomDelegate alloc] init];
  AppDelegate.braze = braze;
}

デフォルトのネイティブ UI をオーバーライドする

ネイティブ iOS レイヤーでアプリ内メッセージの表示を完全にカスタマイズしたい場合は、BrazeInAppMessagePresenter プロトコルに従い、以下のサンプルに従ってカスタムプレゼンターを割り当てます。

1
2
3
4

BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
Braze *braze = [BrazeReactBridge initBraze:configuration];
braze.inAppMessagePresenter = [[MyCustomPresenter alloc] init];
AppDelegate.braze = braze;

表示動作をカスタマイズする

アプリ内メッセージの表示動作は、以下の方法で実行時に変更できる：

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!