Skip to content

Personnaliser les messages in-app

Découvrez comment personnaliser les messages in-app pour le SDK de Braze. Pour des techniques de style avancées, consultez notre tutoriel sur la personnalisation du style des messages à l’aide de paires clé-valeur.

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devez intégrer le SDK de Braze.

Styles personnalisés

Les éléments de l’IU de Braze sont dotés d’un aspect et d’une convivialité par défaut qui créent une expérience de message in-app neutre et visent à assurer la cohérence avec d’autres plateformes mobiles Braze. Les styles par défaut de Braze sont définis en CSS dans le SDK de Braze.

Définition d’un style par défaut

En écrasant des styles sélectionnés dans votre application, vous pouvez personnaliser nos types de messages in-app standard avec vos propres images de fond, des familles de polices, des styles, des tailles, des animations, et bien plus encore.

Par exemple, ce qui suit est un exemple de remplacement qui entraînera la mise en italique des en-têtes d’un message in-app :

1
2
3

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

Consultez les JSDocs pour plus d’informations.

Personnaliser le z-index

Par défaut, les messages in-app sont affichés en utilisant z-index: 9001. Ceci est configurable en utilisant l’option d’initialisation inAppMessageZIndex initiale dans le cas où votre site web stylise des éléments avec des valeurs plus élevées que cela.

1
2
3
4

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

Personnalisation des envois de messages

Par défaut, lorsqu’un message in-app s’affiche, le message peut être supprimé en appuyant sur la touche Échap ou en cliquant sur l’arrière-plan grisé de la page. Configurez l’option d’initialisation requireExplicitInAppMessageDismissal sur true pour éviter ce comportement et exiger un clic de bouton explicite pour rejeter les messages.

1
2
3
4
5

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

Ouverture des liens dans un nouvel onglet

Pour configurer les liens de messages in-app pour qu’ils s’ouvrent dans un nouvel onglet, définissez l’option openInAppMessagesInNewTab sur true pour forcer tous les liens du message in-app à s’ouvrir dans un nouvel onglet ou une nouvelle fenêtre.

1

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

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Android Braze. Vous devrez également configurer les messages in-app.

Gérer les paramètres des gestionnaires personnalisés

Bien que l’écouteur BrazeInAppMessageManager puisse gérer automatiquement l’affichage et le cycle de vie des messages in-app, vous devrez mettre en œuvre un écouteur de gestionnaire personnalisé si vous souhaitez personnaliser entièrement vos messages.

Le SDK Braze a une classe DefaultHtmlInAppMessageActionListener par défaut utilisée si aucun écouteur personnalisé n’est défini et entreprend automatiquement l’action appropriée. Si vous avez besoin d’un contrôle plus important sur la manière dont un utilisateur interagit avec différents boutons à l’intérieur d’un message in-app HTML personnalisé, implémentez une classe IHtmlInAppMessageActionListener personnalisée.

Étape 1 : Mise en œuvre de l’écouteur du gestionnaire personnalisé

Étape 1.1 : Mettre en œuvre IInAppMessageManagerListener

Créez une classe qui implémente IInAppMessageManagerListener.

Les rappels de votre site IInAppMessageManagerListener seront également appelés à différents moments du cycle de vie des messages in-app. Par exemple, si vous définissez un gestionnaire personnalisé listener lorsqu’un message in-app est reçu de Braze, la méthode beforeInAppMessageDisplayed() sera appelée. Si votre implémentation de cette méthode renvoie InAppMessageOperation.DISCARDcela indique à Braze que le message in-app sera traité par l’application hôte et ne doit pas être affiché par Braze. Si le message InAppMessageOperation.DISPLAY_NOW est renvoyé, Braze tentera d’afficher le message in-app. Cette méthode doit être utilisée si vous choisissez d’afficher le message in-app de manière personnalisée.

IInAppMessageManagerListener comprend également des méthodes de délégation pour les clics sur les messages et les boutons, qui peuvent être utilisées dans des cas tels que l’interception d’un message lorsqu’un bouton ou un message est cliqué en vue d’un traitement ultérieur.

Étape 1.2 : Accrocher les méthodes de cycle de vie des vues IAM (facultatif)

L’interface IInAppMessageManagerListener comporte des méthodes d’affichage de messages in-app appelées à des moments distincts du cycle de vie de l’affichage de messages in-app. Ces méthodes sont appelées dans l’ordre suivant :

  1. beforeInAppMessageViewOpened: Appelé juste avant que le message in-app ne soit ajouté à la vue de l’activité. Le message in-app n’est pas encore visible pour l’utilisateur à ce moment-là.
  2. afterInAppMessageViewOpened: Appelé juste après l’ajout du message in-app à la vue de l’activité. Le message in-app est maintenant visible pour l’utilisateur.
  3. beforeInAppMessageViewClosed: Appelé juste avant que le message in-app ne soit supprimé de la vue de l’activité. Le message in-app est toujours visible pour l’utilisateur à ce moment-là.
  4. afterInAppMessageViewClosed: Appelé juste après que le message in-app a été supprimé de la vue de l’activité. Le message in-app n’est plus visible pour l’utilisateur à ce moment-là.

Notez que le temps entre afterInAppMessageViewOpened et beforeInAppMessageViewClosed est le moment où l’envoi de messages in-app est à l’écran, visible par l’utilisateur.

Créez une classe qui implémente IHtmlInAppMessageActionListener.

Les fonctions de rappel dans votre IHtmlInAppMessageActionListener seront appelées lorsque l’utilisateur initie l’une des actions suivantes dans le message in-app HTML :

  • Clique sur le bouton Fermer
  • Déclenche un événement personnalisé
  • Clique sur une URL dans le message in-app HTML
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
    }
}

Étape 2 : Demandez à Braze d’utiliser l’écouteur personnalisé du gestionnaire.

Après avoir créé IInAppMessageManagerListener, appelez BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener() pour demander BrazeInAppMessageManager d’utiliser votre IInAppMessageManagerListener personnalisé au lieu de l’écouteur par défaut. Faites-le dans votre Application.onCreate() avant tout autre appel à Braze, afin que l’écouteur personnalisé soit activé avant l’affichage de tout message in-app.

Modifier les messages in-app avant l’affichage

Lorsqu’un nouveau message in-app est reçu et qu’il y a déjà un message in-app affiché, le nouveau message sera placé sur la partie supérieure de la pile et peut être affiché ultérieurement.

Cependant, s’il n’y a pas de message in-app affiché, la méthode de délégation suivante dans IInAppMessageManagerListener sera appelée :

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
}

La valeur de retour InAppMessageOperation() peut contrôler quand le message doit être affiché. L’utilisation suggérée de cette méthode serait de retarder les messages dans certaines parties de l’application en retournant DISPLAY_LATER lorsque les messages in-app perturberaient l’expérience sur l’application de l’utilisateur.

Pour plus de détails, voir InAppMessageOperation.

Sur Android, cela est fait en appelant logClick et logImpression sur les messages in-app et logButtonClick sur des messages in-app immersifs.

Une fois votre IHtmlInAppMessageActionListener créé, appelez BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener() pour demander à BrazeInAppMessageManager d’utiliser votre IHtmlInAppMessageActionListener personnalisé au lieu de l’écouteur d’action par défaut.

Nous vous recommandons de définir votre IHtmlInAppMessageActionListener dans votre Application.onCreate() avant tout autre appel à Braze. Cela permet d’activer l’écouteur d’action personnalisé avant l’affichage de tout message in-app :

1

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

1

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

Définition des usines personnalisées

Vous pouvez remplacer un certain nombre de valeurs par défaut au moyen d’objets personnalisés. Ces derniers peuvent être enregistrés avec le SDK Braze, selon les besoins, pour obtenir les résultats souhaités. Toutefois, si vous décidez de remplacer une fabrique, vous devrez probablement vous référer explicitement à la fabrique par défaut ou réimplémenter la fonctionnalité fournie par la fabrique par défaut de Braze. L’extrait de code suivant illustre comment fournir des implémentations personnalisées des interfaces IInAppMessageViewFactory et IInAppMessageViewWrapperFactory.

Types de messages in-app

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())
  }
}

Types de messages in-app

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

Les types de messages in-app de Braze sont suffisamment polyvalents pour couvrir la plupart des cas d’utilisation personnalisés. Cependant, si vous souhaitez définir complètement l’apparence visuelle de vos messages in-app au lieu d’utiliser un type par défaut, Braze rend cela possible en définissant une fabrique de vue personnalisée.

Le BrazeInAppMessageManager gère automatiquement le positionnement du modèle de message in-app dans la hiérarchie de vue d’activité existante par défaut en utilisant DefaultInAppMessageViewWrapper. Si vous devez personnaliser la manière dont les messages in-app sont placés dans la hiérarchie de vue, vous devez utiliser une IInAppMessageViewWrapperFactory personnalisée.

Les messages in-app ont un comportement d’animation prédéfini. Les messages Slideup glissent dans l’écran et les messages full et modal arrivent et disparaissent en fondu. Si vous souhaitez définir des comportements d’animation personnalisés pour vos messages in-app, Braze le rend possible en configurant une fabrique d’animation personnalisée.

Étape 1 : Implémenter l’usine

Créez une classe qui implémente 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)
      }
    }
  }
}

Créez une classe qui implémente IInAppMessageViewWrapperFactory et qui renvoie un IInAppMessageViewWrapper.

Cette fabrique est appelée immédiatement après la création de la vue de message in-app. La façon la plus simple d’implémenter un IInAppMessageViewWrapper personnalisé est d’étendre le DefaultInAppMessageViewWrapper par défaut :

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()
  }
}

Créez une classe qui implémente 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
  }
}

Étape 2 : Demander à Braze d’utiliser l’usine

Une fois que votre IInAppMessageViewFactory a été créé, appelez BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory() pour donner des instructions. BrazeInAppMessageManager d’utiliser votre IInAppMessageViewFactory personnalisée au lieu de la fabrique de vue par défaut.

Fonctionnement

L’affichage des messages in-app de slideup met en œuvre les éléments suivants IInAppMessageView. Les vues des messages de type full et modal mettent en œuvre IInAppMessageImmersiveView. La mise en œuvre de l’une de ces classes permet à Braze d’ajouter des récepteurs de clics à votre vue personnalisée, le cas échéant. Toutes les classes de vues de Braze étendent la classe View d’Android.

Implémenter IInAppMessageView permet de définir une partie de votre vue personnalisée comme étant cliquable. L’implémentation de IInAppMessageImmersiveView vous permet de définir des vues de boutons de messages et de boutons de fermeture.

Après la création de votre IInAppMessageViewWrapper est créé, appelez BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory() afin d’indiquer à BrazeInAppMessageManager d’utiliser votre IInAppMessageViewWrapperFactory au lieu de l’usine de wrapper de vue par défaut.

Nous vous recommandons de définir votre IInAppMessageViewWrapperFactory dans votre Application.onCreate() avant tout autre appel à Braze. Cette opération permet de définir la fabrique de wrapper de vue personnalisée avant l’affichage de tout message in-app :

1

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

1

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

Une fois que votre IInAppMessageAnimationFactory est créé, appelez BrazeInAppMessageManager.getInstance().setCustomInAppMessageAnimationFactory() pour demander à BrazeInAppMessageManager d’utiliser votre IInAppMessageAnimationFactory personnalisée au lieu de la fabrique d’animation par défaut.

Nous vous recommandons de définir votre IInAppMessageAnimationFactory dans votre Application.onCreate() avant tout autre appel à Braze. Cette opération permet de définir la fabrique d’animation personnalisée avant l’affichage de tout message in-app.

Styles personnalisés

Les éléments de l’IU de Braze sont dotés d’un aspect et d’une convivialité par défaut qui correspondent aux directives de l’IU standard d’Android et offrent une expérience transparente. Cet article de référence décrit les styles de messagerie in-app personnalisés pour votre application Android ou FireOS.

Définition d’un style par défaut

Vous pouvez voir ces styles par défaut dans le fichier styles.xml du SDK Braze :

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>

Si vous préférez, vous pouvez écraser ces styles pour créer un aspect et une convivialité qui conviennent mieux à votre application.

Pour remplacer un style, copiez-le dans son intégralité dans le fichier styles.xml dans votre projet et apportez des modifications. Le style entier doit être copié sur votre fichier styles.xml local pour que tous les attributs soient correctement définis. Notez que ces styles personnalisés sont destinés aux modifications apportées à des éléments individuels de l’IU et non à des modifications globales sur les mises en page. Les modifications au niveau de la disposition doivent être gérées avec des vues personnalisées.

Personnalisation de la police de caractères

Vous pouvez définir une police personnalisée en l’emplacement/localisation de la police dans le répertoire res/font. Pour l’utiliser, remplacez le style du texte du message, des en-têtes et du texte du bouton et utilisez l’attribut fontFamily pour indiquer à Braze d’utiliser votre famille de polices personnalisée.

Par exemple, pour mettre à jour la police sur le texte du bouton du message in-app, remplacez le style Braze.InAppMessage.Button et faites référence à votre famille de polices personnalisée. La valeur d’attribut doit pointer vers une famille de polices dans votre répertoire res/font.

Voici un exemple tronqué avec une famille de polices personnalisées my_custom_font_family, référencé sur la dernière ligne :

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>

Mis à part le style Braze.InAppMessage.Button pour le texte du bouton, le style du texte du message est Braze.InAppMessage.Message et le style pour les en-têtes de messages est Braze.InAppMessage.Header. Si vous souhaitez utiliser votre famille de polices personnalisée pour l’ensemble du texte du message in-app, vous pouvez configurer votre famille de polices sur le style Braze.InAppMessage, qui est le style parent pour tous les messages in-app.

Envois de messages

Désactivation des renvois par le bouton de retour

Par défaut, le bouton de retour arrière du matériel rejette les messages in-app de Braze. Ce comportement peut être désactivé au niveau de chaque message via l’option BrazeInAppMessageManager.setBackButtonDismissesInAppMessageView().

Dans l’exemple suivant, disable_back_button est une paire clé-valeur personnalisée définie pour le message in-app qui indique si le message doit autoriser le bouton de retour arrière à rejeter le 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)
  }
})

Permettre les licenciements en dehors des robinets

Par défaut, le rejet de la fenêtre modale à l’aide d’une touche extérieure est réglé sur false. Définir cette valeur sur true entraînera le rejet du message in-app modal lorsque l’utilisateur touche en dehors du message in-app. Ce comportement peut être activé en appelant :

1

BrazeInAppMessageManager.getInstance().setClickOutsideModalViewDismissInAppMessageView(true)

Personnaliser l’orientation

Pour définir une orientation fixe pour un message in-app, définissez d’abord un écouteur personnalisé de gestionnaire de messages in-app. Ensuite, mettez à jour l’orientation de l’objet IInAppMessage dans la méthode de délégation beforeInAppMessageDisplayed():

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
}

Pour les tablettes, les messages in-app apparaissent dans le style d’orientation préféré de l’utilisateur, quelle que soit l’orientation réelle de l’écran.

Désactivation du thème sombre

Par défaut, IInAppMessageManagerListener’s beforeInAppMessageDisplayed() vérifie les paramètres du système et active de manière conditionnelle le style “dark theme” sur le message avec le code suivant :

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
}

Pour modifier cela, vous pouvez appeler enableDarkTheme à n’importe quelle étape du processus de pré-affichage pour mettre en œuvre votre propre logique conditionnelle.

Personnalisation de l’invite d’évaluation de Google Play

En raison des limitations et des restrictions définies par Google, les demandes de critique de Google Play personnalisées ne sont actuellement pas prises en charge par Braze. Si certains utilisateurs ont réussi à intégrer ces invites avec succès, d’autres ont affiché de faibles taux de réussite en raison des quotas de Google Play. Intégrez à vos risques et périls. Reportez-vous à la documentation sur les invites de révision in-app de Google Play.

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Swift Braze.

Mise en place du délégué à l’interface utilisateur (obligatoire)

Pour personnaliser la présentation des messages in-app et réagir à divers événements du cycle de vie, vous devrez configurer des . BrazeInAppMessageUIDelegate. Il s’agit d’un protocole délégué utilisé pour la réception et le traitement des messages in-app déclenchés, la réception des événements du cycle de vie de l’affichage et le contrôle de la synchronisation de l’affichage. Pour utiliser BrazeInAppMessageUIDelegate, vous devez

  • Utilisez l’implémentation par défaut BrazeInAppMessageUI comme inAppMessagePresenter.
  • Incluez la bibliothèque BrazeUI dans votre projet.

Étape 1 : Mettre en œuvre le protocole BrazeInAppMessageUIDelegate

Tout d’abord, implémentez le protocole BrazeInAppMessageUIDelegate et toutes les méthodes correspondantes que vous souhaitez. Dans l’exemple ci-dessous, nous implémentons ce protocole dans la classe AppDelegate de notre application.

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

Étape 2 : Attribuer l’objet delegate

Attribuez l’objet delegate à l’instance BrazeInAppMessageUI avant d’attribuer ce message in-app à l’interface utilisateur 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;

Comportement lors du clic

Chaque objet Braze.InAppMessage contient une ClickAction correspondante qui définit le comportement en cas de clic.

Cliquez sur les types d’action

La propriété clickAction de votre Braze.InAppMessage est par défaut .none mais peut être définie sur l’une des valeurs suivantes :

Personnaliser le comportement du clic

Pour personnaliser ce comportement, vous pouvez modifier la propriété clickAction en vous référant à l’exemple suivant :

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

La méthode inAppMessage(_:prepareWith:) n’est pas disponible en Objective-C.

Gestion du comportement personnalisé

La méthode de délégation BrazeInAppMessageUIDelegate suivante est appelée en cas de clic sur un message in-app. Pour les clics sur les boutons de messages in-app et les boutons de messages in-app HTML (liens), un ID de bouton est fourni en tant que paramètre facultatif.

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;

Cette méthode renvoie une valeur booléenne indiquant si Braze doit continuer à exécuter l’action de clic.

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

Personnalisation des fenêtres modales/boîtes de dialogue, etc.

Pour activer les rejets par touché extérieur, vous pouvez modifier la propriété dismissOnBackgroundTap de la structure Attributes du type de message in-app que vous souhaitez personnaliser.

Par exemple, si vous souhaitez activer cette fonctionnalité pour les messages in-app de type fenêtre modale, vous pouvez configurer ce qui suit :

1

BrazeInAppMessageUI.ModalImageView.Attributes.defaults.dismissOnBackgroundTap = true

La personnalisation via Attributes n’est pas disponible en Objective-C.

La valeur par défaut est false. Cela détermine si le message in-app modal sera rejeté lorsque l’utilisateur touche à l’extérieur du message in-app.

Pour plus de détails sur la personnalisation des messages in-app, consultez cet article.

Personnalisation de l’orientation des messages

Vous pouvez personnaliser l’orientation de vos messages in-app. Vous pouvez définir une nouvelle orientation par défaut pour tous les messages ou définir une orientation personnalisée pour un seul message.

Pour choisir une orientation par défaut pour tous les messages in-app, utilisez la méthode inAppMessage(_:prepareWith:) pour définir la propriété preferredOrientation sur le site PresentationContext.

Par exemple, pour définir le portrait comme orientation par défaut :

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

Pour définir l’orientation d’un seul message, modifiez la propriété orientation de 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;

Une fois le message in-app affiché, tout changement d’orientation de l’appareil pendant que le message est encore affiché entraînera la rotation du message avec l’appareil (à condition que la configuration du message orientation le permette).

L’orientation de l’appareil doit également être prise en charge par la propriété orientation du message in-app pour que le message s’affiche. En outre, le paramètre preferredOrientation ne sera respecté que s’il est inclus dans les orientations d’interface prises en charge par votre application, dans la section Informations sur le déploiement des paramètres de votre cible dans Xcode.

Orientations prises en charge dans Xcode.

Personnalisation de la durée d’affichage

Vous pouvez contrôler si un message in-app disponible s’affichera à certains moments de votre expérience sur communication. Si, dans certaines situations, vous ne souhaitez pas que le message in-app apparaisse, par exemple pendant un jeu en plein écran ou sur un écran de chargement, vous pouvez retarder ou supprimer les messages in-app en attente. Pour contrôler le moment de l’envoi du message in-app, utilisez la méthode de délégué inAppMessage(_:displayChoiceForMessage:) pour définir la propriété 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

Configurez BrazeInAppMessageUI.DisplayChoice pour qu’il renvoie l’une des valeurs suivantes :

Masquer la barre d’état

Pour les messages in-app Full, FullImage et HTML, le SDK masque la barre d’état par défaut. Pour les autres types de messages in-app, la barre d’état reste intacte. Pour configurer ce comportement, utilisez la méthode de délégué inAppMessage(_:prepareWith:) pour définir la propriété statusBarHideBehavior sur le PresentationContext. Ce champ prend l’une des valeurs suivantes :

Désactivation du mode sombre

Pour empêcher les messages in-app d’adopter le style du mode sombre lorsque l’appareil de l’utilisateur a activé le mode sombre, implémentez la méthode de délégué inAppMessage(_:prepareWith:). Le PresentationContext transmis à la méthode contient une référence à l’objet InAppMessage à présenter. Chaque InAppMessage possède une propriété themes contenant un thème de mode dark et light. Si vous définissez la propriété themes.dark sur la valeur nil, Braze présentera automatiquement le message in-app à l’aide de son thème lumineux.

Les types de messages in-app avec boutons ont un objet themes supplémentaire sur leur propriété buttons. Pour empêcher les boutons d’adopter le style du mode sombre, vous pouvez utiliser l’option map(_:) pour créer un nouveau tableau de boutons avec un thème light et sans thème dark.

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

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

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

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

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

Personnalisation de l’invite d’évaluation de la boutique d’applications

Vous pouvez utiliser des messages in-app dans le cadre d’une campagne pour demander aux utilisateurs de rédiger un avis sur l’App Store.

Étape 1 : Définir le délégué du message in-app

Tout d’abord, définissez l’élément BrazeInAppMessageUIDelegate dans votre application.

Étape 2 : Désactiver le message par défaut d’évaluation de l’App Store

Ensuite, implémentez la inAppMessage(_:displayChoiceForMessage:) méthode de délégation pour désactiver le message par défaut d’évaluation de l’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;
  }
}

Étape 3 : Créer un lien profond

Dans votre code de traitement de liaison profonde, ajoutez le code suivant pour traiter le lien profond {YOUR-APP-SCHEME}:app-store-review. Notez que vous devrez importer StoreKit pour utiliser SKStoreReviewController :

1
2
3
4
5
6
7
8

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

1
2
3
4
5
6
7
8

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

Étape 4 : Définir un comportement personnalisé au clic

Créez ensuite une campagne de communication in-app avec les éléments suivants :

  • La paire clé-valeur "AppStore Review" : "true"
  • Le comportement en cours défini sur « Deep Link Into App », en utilisant le lien profond {YOUR-APP-SCHEME}:app-store-review.

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK React Native Braze.

Méthodes d’enregistrement

Vous pouvez utiliser ces méthodes en passant votre instance BrazeInAppMessage pour enregistrer des analyses et effectuer des actions :

Envoi de données de messages

Dans la plupart des cas, vous pouvez utiliser la méthode Braze.addListener pour enregistrer des récepteurs d’événements afin de gérer les données provenant des messages in-app.

En outre, vous pouvez accéder aux données des messages in-app dans la couche JavaScript en appelant la méthode Braze.subscribeToInAppMessage pour que les SDK publient un événement inAppMessageReceived lorsqu’un message in-app est déclenché. Transmettez un rappel à cette méthode pour exécuter votre propre code lorsque le message in-app est déclenché et reçu par l’auditeur.

Pour personnaliser l’envoi des données des messages, reportez-vous aux exemples de mise en œuvre suivants :

Pour améliorer le comportement par défaut, ou si vous n’avez pas accès à la personnalisation du code iOS ou Android natif, nous vous recommandons de désactiver l’interface utilisateur par défaut tout en continuant à recevoir des événements de messages in-app de Braze. Pour désactiver l’interface utilisateur par défaut, transmettez false à la méthode Braze.subscribeToInAppMessage et utilisez les données du message in-app pour élaborer votre propre message en JavaScript. Notez que vous devrez procéder manuellement à l’analyse/analytique de vos messages si vous choisissez de désactiver l’interface utilisateur par défaut.

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

Pour inclure une logique plus avancée permettant de déterminer s’il faut ou non afficher un message in-app à l’aide de l’interface utilisateur intégrée, mettez en œuvre les messages in-app par le biais de la couche native.

Implémentez le IInAppMessageManagerListener comme décrit dans notre article Android Auditeur de gestionnaire personnalisé. Dans votre implémentation de beforeInAppMessageDisplayed, vous pouvez accéder aux données inAppMessage, les envoyer à la couche Javascript et décider d’afficher ou non le message natif en fonction de la valeur de retour.

Pour en savoir plus sur ces valeurs, consultez notre documentation 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;
}

Remplacer le délégué de l’interface utilisateur par défaut

Par défaut, BrazeInAppMessageUI est créée et attribuée lorsque vous initialisez l’instance braze. BrazeInAppMessageUI est une implémentation du protocole BrazeInAppMessagePresenter et dispose d’une propriété delegate qui peut être utilisée pour personnaliser la gestion des messages in-app qui ont été reçus.

  1. Implémentez le délégué BrazeInAppMessageUIDelegate comme décrit dans notre article iOS ici.

  2. Dans la méthode de délégation inAppMessage(_:displayChoiceForMessage:), vous pouvez accéder aux données inAppMessage, les envoyer à la couche Javascript et décider d’afficher ou non le message natif en fonction de la valeur de retour.

Pour plus de détails sur ces valeurs, consultez notre documentation 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;
}

Pour utiliser ce délégué, affectez-le à brazeInAppMessagePresenter.delegate après avoir initialisé l’instance braze.

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

Remplacer l’interface utilisateur native par défaut

Si vous souhaitez personnaliser entièrement la présentation de vos messages in-app au niveau de la couche native d’iOS, conformez-vous au protocole BrazeInAppMessagePresenter et attribuez votre présentateur personnalisé en suivant l’exemple ci-dessous :

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;

Personnaliser le comportement des clients

Vous pouvez modifier le comportement d’affichage des messages in-app au moment de l’exécution en procédant comme suit :

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

Mise en place d’un écouteur personnalisé

Si vous avez besoin de plus de contrôle sur la façon dont un utilisateur interagit avec les messages in-app, utilisez un BrazeInAppMessageListener et attribuez-le à Appboy.AppboyBinding.inAppMessageListener. Concernant les délégués que vous ne souhaitez pas utiliser, vous pouvez simplement les laisser définis comme 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   Modifier cette page sur GitHub
New Stuff!