Skip to content

Personnaliser les messages in-app

Découvrez comment personnaliser les messages in-app pour le SDK de Braze. Pour découvrir des techniques de mise en forme avancées, veuillez consulter notre tutoriel sur la personnalisation de la mise en forme 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. Il vous sera également nécessaire de configurer les messages in-app.

Configuration des écouteurs personnalisés du gestionnaire

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

Le SDK Braze dispose d’une classe DefaultHtmlInAppMessageActionListener par défaut, utilisée lorsqu’aucun écouteur personnalisé n’est défini. Elle prend automatiquement les mesures appropriées. Si vous avez besoin de davantage de contrôle sur la manière dont un utilisateur interagit avec les différents boutons d’un message in-app HTML personnalisé, implémentez une classe IHtmlInAppMessageActionListener personnalisée.

Cet écouteur s’applique aux deux types de messages : ceux créés avec du HTML personnalisé et ceux créés à l’aide de l’éditeur par glisser-déposer (DnD). Il ne s’applique pas aux IAM traditionnels. Les IAM traditionnels sont les types de messages intégrés de Braze, rendus par le SDK (par exemple, contextuel, fenêtre modale et plein écran), créés dans le compositeur de messages in-app d’origine à l’aide de dispositions prédéfinies. Contrairement aux IAM HTML personnalisés et DnD, ils ne passent pas par le flux de l’écouteur d’actions HTML.

Si vous définissez un IHtmlInAppMessageActionListener personnalisé, sa logique remplacera le comportement de clic par défaut pour tous les messages DnD. Assurez-vous que votre équipe marketing en est informée, car cela peut affecter leurs campagnes de manière inattendue.

Étape 1 : Implémenter l’écouteur de gestionnaire personnalisé

Étape 1.1 : Implémenter IInAppMessageManagerListener

Créez une classe qui implémente IInAppMessageManagerListener.

Les rappels de votre IInAppMessageManagerListener seront également appelés à différents moments du cycle de vie des messages in-app. Par exemple, si vous définissez un écouteur de gestionnaire personnalisé 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.DISCARD, cela indique à Braze que le message in-app sera traité par l’application hôte et ne doit pas être affiché par Braze. Si la valeur InAppMessageOperation.DISPLAY_NOW est renvoyée, Braze tentera d’afficher le message in-app. Utilisez cette méthode si vous choisissez d’afficher le message in-app de manière personnalisée.

IInAppMessageManagerListener comprend également des méthodes déléguées pour les clics sur les messages et les boutons, utiles par exemple pour intercepter un message lorsqu’un bouton ou un message est cliqué afin d’effectuer un traitement supplémentaire.

Étape 1.2 : S’intégrer aux méthodes du cycle de vie de la vue IAM (facultatif)

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

  1. beforeInAppMessageViewOpened : Appelée juste avant l’ajout du message in-app à la vue de l’activité. Le message in-app n’est pas encore visible pour l’utilisateur à ce moment-là.
  2. afterInAppMessageViewOpened : Appelée juste après l’ajout du message in-app à la vue de l’activité. Le message in-app est désormais visible pour l’utilisateur.
  3. beforeInAppMessageViewClosed : Appelée juste avant la suppression du message in-app de la vue de l’activité. Le message in-app est toujours visible pour l’utilisateur à ce moment-là.
  4. afterInAppMessageViewClosed : Appelée juste après la suppression du message in-app de la vue de l’activité. Le message in-app n’est plus visible pour l’utilisateur.

Notez que la période entre afterInAppMessageViewOpened et beforeInAppMessageViewClosed correspond au moment où le message in-app est affiché à l’écran et visible par l’utilisateur.

Créez une classe qui implémente IHtmlInAppMessageActionListener.

Les rappels de votre IHtmlInAppMessageActionListener seront appelés lorsque l’utilisateur effectue l’une des actions suivantes dans le message in-app HTML :

  • Clic sur le bouton de fermeture
  • Déclenchement d’un événement personnalisé
  • Clic 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 : Indiquer à Braze d’utiliser l’écouteur de gestionnaire personnalisé

Après avoir créé votre IInAppMessageManagerListener, appelez BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener() pour indiquer à BrazeInAppMessageManager d’utiliser votre IInAppMessageManagerListener personnalisé au lieu de l’écouteur par défaut. Effectuez cette opération dans votre Application.onCreate() avant tout autre appel à Braze, afin que l’écouteur personnalisé soit défini 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 alors qu’un autre est déjà affiché, le nouveau message est placé en haut de la pile et pourra être affiché ultérieurement.

En revanche, si aucun message in-app n’est actuellement affiché, la méthode déléguée suivante de 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 de InAppMessageOperation() permet de contrôler le moment où le message doit être affiché. L’utilisation recommandée de cette méthode consiste à retarder les messages dans certaines parties de l’application en renvoyant DISPLAY_LATER lorsque les messages in-app perturberaient l’expérience sur l’application de l’utilisateur.

Pour plus de détails, consultez InAppMessageOperation.

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

Une fois votre IHtmlInAppMessageActionListener créé, appelez BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener() pour indiquer à BrazeInAppMessageManager d’utiliser votre IHtmlInAppMessageActionListener personnalisé à la place 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 de configurer 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))

Configuration de fabriques personnalisées

Il est possible de remplacer un certain nombre de comportements par défaut à l’aide d’objets de fabriques personnalisés. Ces derniers peuvent être enregistrés auprès du SDK Braze selon vos besoins pour obtenir les résultats souhaités. Toutefois, si vous décidez de remplacer une fabrique, vous devrez probablement déléguer explicitement au comportement par défaut ou réimplémenter la fonctionnalité fournie par défaut par 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 entièrement l’apparence visuelle de vos messages in-app au lieu d’utiliser un type par défaut, Braze vous permet de le faire en définissant une fabrique de vues personnalisée.

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

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

Étape 1 : Implémenter la fabrique

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 du 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 : Indiquer à Braze d’utiliser la fabrique

Une fois votre IInAppMessageViewFactory créée, appelez BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory() pour indiquer à BrazeInAppMessageManager d’utiliser votre IInAppMessageViewFactory personnalisée au lieu de la fabrique de vues par défaut.

Fonctionnement

La vue des messages in-app de type slideup implémente IInAppMessageView. Les vues des messages de type full et modal implémentent IInAppMessageImmersiveView. L’implémentation de l’une de ces classes permet à Braze d’ajouter des écouteurs 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 vous permet de définir une partie de votre vue personnalisée comme cliquable. Implémenter IInAppMessageImmersiveView vous permet de définir des vues de boutons de message et un bouton de fermeture.

Une fois votre IInAppMessageViewWrapper créé, appelez BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory() pour indiquer à BrazeInAppMessageManager d’utiliser votre IInAppMessageViewWrapperFactory personnalisée à la place de la fabrique de wrapper de vues par défaut.

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

1

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

1

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

Une fois votre IInAppMessageAnimationFactory créée, appelez BrazeInAppMessageManager.getInstance().setCustomInAppMessageAnimationFactory() pour indiquer à 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. Cela permet de définir la fabrique d’animation personnalisée avant l’affichage de tout message in-app.

Styles personnalisés

Les éléments d’interface de Braze sont dotés d’un aspect par défaut conforme aux directives de l’interface standard d’Android, offrant ainsi une expérience fluide. Cet article de référence décrit les styles personnalisés pour les messages in-app de votre application Android ou FireOS.

Définition d’un style par défaut

Vous pouvez consulter les 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 le souhaitez, vous pouvez remplacer ces styles pour créer un aspect mieux adapté à votre application.

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

Personnalisation de la police

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

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

Voici un exemple tronqué avec une famille de polices personnalisée my_custom_font_family, référencée 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>

Outre le style Braze.InAppMessage.Button pour le texte des boutons, le style du texte du message est Braze.InAppMessage.Message et celui des en-têtes est Braze.InAppMessage.Header. Si vous souhaitez utiliser votre famille de polices personnalisée pour l’ensemble du texte des messages in-app, vous pouvez définir votre famille de polices sur le style Braze.InAppMessage, qui est le style parent de tous les messages in-app.

Fermeture des messages

Balayer pour fermer les messages contextuels

Par défaut, les messages in-app contextuels peuvent être fermés d’un geste de balayage. La direction du balayage dépend de la position du message contextuel :

  • Balayage vers la gauche ou la droite : ferme le message contextuel, quelle que soit sa position.
  • Message contextuel depuis le bas : un balayage de haut en bas ferme le message. Un balayage de bas en haut ne le ferme pas.
  • Message contextuel depuis le haut : un balayage de bas en haut ferme le message. Un balayage de haut en bas ne le ferme pas.

Ce comportement de balayage est intégré au DefaultInAppMessageViewWrapper par défaut et s’applique uniquement aux messages in-app contextuels. Les messages in-app modaux et plein écran ne prennent pas en charge le balayage pour fermer. Pour personnaliser ce comportement, vous pouvez implémenter une fabrique de wrappers de vues personnalisée.

Désactiver la fermeture via le bouton Retour

Par défaut, le bouton Retour matériel ferme les messages in-app de Braze. Ce comportement peut être désactivé message par message via BrazeInAppMessageManager.setBackButtonDismissesInAppMessageView().

Dans l’exemple suivant, disable_back_button est une paire clé-valeur personnalisée définie sur le message in-app qui indique si le bouton Retour doit pouvoir fermer 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)
  }
})

Activer la fermeture par appui en dehors du message

Par défaut, la fermeture de la fenêtre modale par un appui en dehors de celle-ci est définie sur false. Définir cette valeur sur true entraînera la fermeture du message in-app modal lorsque l’utilisateur appuie en dehors du message. Ce comportement peut être activé en appelant :

1

BrazeInAppMessageManager.getInstance().setClickOutsideModalViewDismissInAppMessageView(true)

Personnalisation de l’orientation

Pour définir une orientation fixe pour un message in-app, commencez par définir un écouteur de gestionnaire personnalisé pour les messages in-app. Ensuite, mettez à jour l’orientation de l’objet IInAppMessage dans la méthode déléguée 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
}

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

Désactiver le thème sombre

Par défaut, la méthode beforeInAppMessageDisplayed() de IInAppMessageManagerListener vérifie les paramètres système et active conditionnellement le thème sombre sur le message à l’aide du 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 ce comportement, vous pouvez appeler enableDarkTheme à n’importe quelle étape du processus de pré-affichage afin d’implémenter votre propre logique conditionnelle.

Personnalisation de l’invite d’évaluation Google Play

En raison des limitations et restrictions imposées par Google, les invites d’évaluation Google Play personnalisées ne sont actuellement pas prises en charge par Braze. Si certains utilisateurs ont réussi à intégrer ces invites, d’autres ont constaté de faibles taux de réussite en raison des quotas de Google Play. L’intégration se fait à vos risques et périls. Consultez la documentation sur les invites d’évaluation in-app de Google Play.

Conditions préalables

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

Configuration du délégué UI (obligatoire)

Pour personnaliser la présentation des messages in-app et réagir à divers événements du cycle de vie, il est nécessaire de configurer BrazeInAppMessageUIDelegate. Il s’agit d’un protocole délégué utilisé pour recevoir et traiter les charges utiles des messages in-app déclenchés, recevoir les événements du cycle de vie de l’affichage et contrôler la synchronisation de l’affichage. Pour utiliser ce serviceBrazeInAppMessageUIDelegate, il est nécessaire de :

  • Veuillez utiliser l’implémentationBrazeInAppMessageUI par défaut comme votre inAppMessagePresenter.
  • Veuillez inclure laBrazeUIbibliothèque dans votre projet.

Étape 1 : Mettre en œuvre leBrazeInAppMessageUIDelegateprotocole

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 : Veuillez attribuer l’objetdelegate

Veuillez attribuer delegatel’objet à BrazeInAppMessageUIl’instance avant d’attribuer cette interface utilisateur de message in-app à votre 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 :

Personnalisation du comportement au 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 déléguéeBrazeInAppMessageUIDelegate suivante est appelée lorsqu’un utilisateur clique sur un message in-app. Ce rappel est déclenché lorsque l’utilisateur clique sur les boutons de message in-app et les boutons de message HTML in-app (liens). Un ID de bouton est fourni en tant que paramètre facultatif pour ces interactions. Ce rappel n’est pas invoqué pour les clics programmatiques déclenchés via un déclencheurbrazeBridge.logClick().

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

Glisser pour fermer les messages contextuels

Par défaut, les messages in-app contextuels peuvent être supprimés d’un simple geste du doigt. La direction du balayage dépend de la position contextuelle de glissement vers le haut :

  • Balayage vers la gauche ou vers la droite : Rejette le contexteuel, quelle que soit sa position.
  • Contextuel : faire glisser vers le haut depuis le bas : Balayer l’écran de haut en bas permet de fermer le message. Balayer de bas en haut ne permet pas de le fermer.
  • Contextuel : glisser vers le haut depuis le haut : Balayer l’écran de bas en haut permet de fermer le message. Balayer l’écran de haut en bas ne permet pas de le fermer.

Ce comportement de balayage est créé par défaut BrazeInAppMessageUISlideupViewet s’applique uniquement aux messages in-app contextuels. Les messages in-app modaux et complets ne prennent pas en charge la fonctionnalité « balayer pour fermer ». Pour personnaliser davantage l’affichage contextuel, y compris le comportement de balayage, vous pouvez modifier leSlideupView.Attributes ou fournir un affichage personnalisé via la sous-classification.

Personnalisation des fermetures de fenêtres modales/boîtes de dialogue modales, 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 sélectionner une orientation par défaut pour tous les messages in-app, veuillez utiliser lainAppMessage(_:prepareWith:)méthode pour définir lapreferredOrientationpropriété sur PresentationContext.

Par exemple, pour définir le mode 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 message unique, veuillez modifier laorientationpropriété 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 cela soit pris en charge par la configuration orientationdu message).

L’orientation de l’appareil doit également être prise en charge par la propriété orientationdu 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 l’App Store

Vous pouvez utiliser les messages in-app dans une campagne pour solliciter les utilisateurs afin qu’ils laissent 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!