Skip to content

Déclencher des messages in-app

Découvrez comment déclencher des messages in-app grâce au SDK de Braze.

Déclencheurs et réception/distribution de messages

Les messages in-app sont déclenchés lorsque le SDK enregistre l’un des types d’événements personnalisés suivants : Session Start, Push Click, Any Purchase, Specific Purchase et Custom Event (les deux derniers contenant des filtres de propriétés robustes).

Au début de la session d’un utilisateur, Braze enverra tous les messages in-app éligibles à son appareil, tout en préchargeant simultanément les ressources pour minimiser la latence d’affichage. Si l’événement déclencheur comporte plusieurs messages in-app éligibles, seul le message ayant la priorité la plus élevée sera délivré. Pour plus d’informations, voir Cycle de vie des sessions.

Types de messages in-app

Braze envoie les types de messages in-app suivants aux appareils des utilisateurs au début de la session : inapp et templated_iam. En tant qu’utilisateur du tableau de bord, vous ne voyez pas les différents types, mais Braze les traite différemment en fonction de la configuration et du contenu.

inapp (standard)

Un message in-app inapp (ou « standard ») est déjà modélisé avec les informations nécessaires, telles que les attributs personnalisés que Braze connaît déjà. En général, lorsque le message in-app est téléchargé sur l’appareil, l’événement déclencheur amène le SDK à afficher le message in-app inapp même lorsque l’appareil est hors ligne ou en mode avion.

templated_iam (modélisé)

Un message in-app templated_iam (ou « modélisé ») n’est pas encore modélisé avec les informations nécessaires. Braze doit effectuer une autre requête pour récupérer les informations avant que le message puisse apparaître.

Les messages in-app sont délivrés sous forme de messages in-app modélisés lorsque l’option Réévaluer l’éligibilité de la campagne avant l’affichage est sélectionnée ou si l’une des étiquettes Liquid suivantes est présente dans le message :

  • canvas_entry_properties
  • connected_content
  • Les variables SMS telles que {sms.${*}}
  • catalog_items
  • catalog_selection_items
  • event_properties

Cela signifie qu’au démarrage de la session, l’appareil recevra uniquement le déclencheur de ce message in-app, et non le message complet. Lorsque l’utilisateur déclenche le message in-app, son appareil effectue une requête réseau pour récupérer le message réel.

Paires clé-valeur

Lorsque vous créez une campagne dans Braze, vous pouvez définir des paires clé-valeur en tant qu’extras, que l’objet de message in-app peut utiliser pour envoyer des données à votre application.

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

import * as braze from "@braze/web-sdk";

braze.subscribeToInAppMessage(function(inAppMessage) {
  // control group messages should always be "shown"
  // this will log an impression and not show a visible message
  if (inAppMessage instanceof braze.ControlMessage) {
    return braze.showInAppMessage(inAppMessage);
  }


  if (inAppMessage instanceof braze.InAppMessage) {
    const extras = inAppMessage.extras;
    if (extras) {
      for (const key in extras) {
        console.log("key: " + key + ", value: " + extras[key]);
      }
    }
  }
  braze.showInAppMessage(inAppMessage);
});

1

Map<String, String> getExtras()

1

extras: Map<String, String>

L’exemple suivant utilise une logique personnalisée pour définir la présentation d’un message in-app en fonction de ses paires clé-valeur dans extras. Pour un exemple de personnalisation complète, consultez notre exemple d’application.

1
2
3
4

let customization = message.extras["custom-display"] as? String
if customization == "colorful-slideup" {
  // Perform your custom logic.
}

1
2
3
4
5
6

if ([message.extras[@"custom-display"] isKindOfClass:[NSString class]]) {
  NSString *customization = message.extras[@"custom-display"];
  if ([customization isEqualToString:@"colorful-slideup"]) {
    // Perform your custom logic.
  }
}

Désactivation des déclencheurs automatiques

Par défaut, les messages in-app se déclenchent automatiquement. Pour désactiver cette fonction :

Supprimez l’appel à braze.automaticallyShowInAppMessages() dans votre extrait de code de chargement, puis créez une logique personnalisée pour gérer l’affichage ou non d’un message in-app.

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

braze.subscribeToInAppMessage(function(inAppMessage) {
  // control group messages should always be "shown"
  // this will log an impression and not show a visible message

  if (inAppMessage.isControl) { // v4.5.0+, otherwise use  `inAppMessage instanceof braze.ControlMessage`
     return braze.showInAppMessage(inAppMessage);
  }

  // Display the in-app message. You could defer display here by pushing this message to code within your own application.
  // If you don't want to use the display capabilities in Braze, you could alternatively pass the in-app message to your own display code here.

  if ( should_show_the_message_according_to_your_custom_logic ) {
      braze.showInAppMessage(inAppMessage);
  } else {
      // do nothing
  }
});

Pour un contrôle plus avancé du timing des messages, y compris le report et la restauration des messages déclenchés, veuillez vous référer à notre tutoriel : Report et restauration des messages déclenchés.

  1. Implémentez IInAppMessageManagerListener pour définir un écouteur personnalisé.
  2. Mettez à jour votre méthode beforeInAppMessageDisplayed() afin qu’elle renvoie InAppMessageOperation.DISCARD.

Pour un contrôle plus avancé du timing des messages, y compris l’affichage différé et la remise en file d’attente, veuillez consulter notre page Personnalisation des messages.

  1. Implémentez le délégué BrazeInAppMessageUIDelegate dans votre application. Pour un guide complet, veuillez vous référer au tutoriel : Interface utilisateur des messages in-app.
  2. Mettez à jour votre méthode de délégué inAppMessage(_:displayChoiceForMessage:) pour qu’elle retourne .discard.

Pour un contrôle plus avancé du timing des messages, y compris le report et la restauration des messages déclenchés, veuillez vous référer à notre tutoriel : Report et restauration des messages déclenchés.

  1. Vérifiez que vous utilisez l’initialisateur d’intégration automatique, qui est activé par défaut dans les versions 2.2.0 et ultérieures.
  2. Définissez l’opération par défaut de message in-app sur DISCARD en ajoutant la ligne suivante à votre fichier braze.xml. 
    1

     <string name="com_braze_flutter_automatic_integration_iam_operation">DISCARD</string>

Pour Android, désélectionnez Automatically Display In-App Messages dans l’éditeur de configuration de Braze. Vous pouvez également définir com_braze_inapp_show_inapp_messages_automatically sur false dans le fichier braze.xml de votre projet Unity.

Le fonctionnement initial de l’affichage des messages in-app peut être défini dans la configuration de Braze à l’aide de « In App Message Manager Initial Display Operation ».

Pour iOS, définissez les écouteurs d’objets de jeu dans l’éditeur de configuration de Braze et assurez-vous que Braze Displays In-App Messages n’est pas sélectionné.

Le fonctionnement initial de l’affichage des messages in-app peut être défini dans la configuration de Braze à l’aide de « In App Message Manager Initial Display Operation ».

Enchaîner deux messages in-app au cours d’une même session

Vous pouvez déclencher un message in-app au démarrage de la session, puis déclencher un second message in-app après l’appui sur un bouton du premier. Pour ce faire, enregistrez un événement personnalisé pour le clic sur le bouton qui déclenchera le second message. Le déclencheur du second message doit déjà être présent sur l’appareil (l’utilisateur doit déjà être éligible au second message) et se produire côté appareil (le SDK Braze ne prendra pas en compte les modifications d’attributs personnalisés effectuées sur les serveurs de Braze). Le délai de refroidissement par défaut de 30 secondes entre les déclenchements de messages in-app doit être modifié pour afficher plusieurs messages in-app en succession rapide. Pour la configuration spécifique à chaque plateforme, voir Remplacement de la limite de débit par défaut.

Remplacement de la limite de débit par défaut

Par défaut, le SDK limite le débit des messages in-app déclenchés à une fois toutes les 30 secondes. Pour remplacer ce comportement, ajoutez la propriété suivante à votre fichier de configuration avant l’initialisation de l’instance de Braze. Cette valeur sera utilisée comme nouvelle limite de débit en secondes.

Pour les applications en production, ne définissez pas cette valeur en dessous de 10 secondes, afin que les utilisateurs ne soient pas submergés par des messages in-app successifs. Pour les tests et les flux d’applications de démonstration, 5 secondes est un réglage courant.

Vous pouvez définir cet intervalle sur 0 pour les tests. Cependant, un intervalle de 0 seconde ne force pas l’affichage simultané de plusieurs messages in-app. Si un message in-app est déjà visible, un autre message déclenché ne s’affichera pas tant que le message actuel n’aura pas été fermé.

1
2

// Sets the minimum time interval between triggered in-app messages to 5 seconds instead of the default 30
braze.initialize('YOUR-API-KEY', { minimumIntervalBetweenTriggerActionsInSeconds: 5 })

1

<integer name="com_braze_trigger_action_minimum_time_interval_seconds">5</integer>

1
2
3
4
5
6
7
8

let configuration = Braze.Configuration(
  apiKey: "YOUR-APP-IDENTIFIER-API-KEY",
  endpoint: "YOUR-BRAZE-ENDPOINT"
)
// Sets the minimum trigger time interval to 5 seconds
configuration.triggerMinimumTimeInterval = 5
let braze = Braze(configuration: configuration)
AppDelegate.braze = braze

1
2
3
4
5
6
7

BRZConfiguration *configuration =
    [[BRZConfiguration alloc] initWithApiKey:@"<BRAZE_API_KEY>"
                                    endpoint:@"<BRAZE_ENDPOINT>"];
// Sets the minimum trigger time interval to 5 seconds
configuration.triggerMinimumTimeInterval = 5;
Braze *braze = [BrazePlugin initBraze:configuration];
AppDelegate.braze = braze;

Déclenchement manuel des messages

Par défaut, les messages in-app sont automatiquement déclenchés lorsque le SDK enregistre un événement personnalisé. Toutefois, vous pouvez également déclencher manuellement des messages à l’aide des méthodes suivantes.

Utilisation d’un événement côté serveur

À l’heure actuelle, le SDK Web de Braze ne prend pas en charge le déclenchement manuel de messages à l’aide d’événements côté serveur.

Pour déclencher un message in-app à l’aide d’un événement envoyé par le serveur, envoyez une notification push silencieuse à l’appareil, ce qui permet à un rappel push personnalisé d’enregistrer un événement basé sur le SDK. Cet événement déclenchera alors le message in-app destiné à l’utilisateur.

Étape 1 : Créer un rappel push pour recevoir la notification push silencieuse

Enregistrez votre rappel push personnalisé pour écouter une notification push silencieuse spécifique. Pour plus d’informations, veuillez vous référer à la section Configuration des notifications push.

Deux événements seront enregistrés pour que le message in-app soit livré, un par le serveur et l’autre à partir de votre rappel push personnalisé. Pour vous assurer que le même événement n’est pas dupliqué, l’événement enregistré dans votre rappel push doit suivre une convention de dénomination générique, par exemple « événement déclencheur de message in-app », et ne pas porter le même nom que l’événement envoyé par le serveur. Si cela n’est pas fait, la segmentation et les données utilisateur peuvent être affectées par des événements enregistrés en double pour une seule action utilisateur.

1
2
3
4
5
6
7
8
9
10
11

Braze.getInstance(context).subscribeToPushNotificationEvents(event -> {
  final Bundle kvps = event.getNotificationPayload().getBrazeExtras();
  if (kvps.containsKey("IS_SERVER_EVENT")) {
    BrazeProperties eventProperties = new BrazeProperties();

    // The campaign name is a string extra that clients can include in the push
    String campaignName = kvps.getString("CAMPAIGN_NAME");
    eventProperties.addProperty("campaign_name", campaignName);
    Braze.getInstance(context).logCustomEvent("IAM Trigger", eventProperties);
  }
});

1
2
3
4
5
6
7
8
9
10
11

Braze.getInstance(applicationContext).subscribeToPushNotificationEvents { event ->
    val kvps = event.notificationPayload.brazeExtras
    if (kvps.containsKey("IS_SERVER_EVENT")) {
        val eventProperties = BrazeProperties()

        // The campaign name is a string extra that clients can include in the push
        val campaignName = kvps.getString("CAMPAIGN_NAME")
        eventProperties.addProperty("campaign_name", campaignName)
        Braze.getInstance(applicationContext).logCustomEvent("IAM Trigger", eventProperties)
    }
}

Étape 2 : Créer une campagne de notification push

Créez une campagne de push silencieuse déclenchée par l’événement envoyé par le serveur.

La campagne de notification push doit inclure des extras de paires clé-valeur qui indiquent que cette campagne de notification push est envoyée pour enregistrer un événement personnalisé SDK. Cet événement sera utilisé pour déclencher le message in-app.

Deux ensembles de paires clé-valeur : IS_SERVER_EVENT défini sur « true » et CAMPAIGN_NAME défini sur « nom de campagne à titre d'exemple ».

Le code exemple de rappel push présenté précédemment reconnaît les paires clé-valeur et enregistre l’événement personnalisé SDK approprié.

Si vous souhaitez inclure des propriétés d’événement à joindre à votre événement « déclencheur de message in-app », vous pouvez y parvenir en les transmettant dans les paires clé-valeur du payload de la notification push. Dans cet exemple, le nom de campagne du message in-app suivant a été inclus. Votre rappel push personnalisé peut ensuite transmettre la valeur comme paramètre de la propriété de l’événement lors de l’enregistrement de l’événement personnalisé.

Étape 3 : Créer une campagne de message in-app

Créez votre campagne de messages in-app visible par l’utilisateur dans le tableau de bord de Braze. Cette campagne doit avoir une livraison par événement et être déclenchée par l’événement personnalisé enregistré à partir de votre rappel push personnalisé.

Dans l’exemple suivant, le message in-app spécifique à déclencher a été configuré en envoyant la propriété de l’événement dans le cadre de la première notification push silencieuse.

Une campagne de livraison par événement où un message in-app se déclenchera lorsque « campaign_name » est égal à « exemple de nom de campagne IAM ».

Si un événement envoyé par le serveur est enregistré alors que l’application n’est pas au premier plan, l’événement sera enregistré, mais le message in-app ne s’affichera pas. Si vous souhaitez que l’événement soit retardé jusqu’à ce que l’application soit au premier plan, une vérification doit être incluse dans votre récepteur push personnalisé pour rejeter ou retarder l’événement jusqu’à ce que l’application passe au premier plan.

Étape 1 : Gérer les notifications push silencieuses et les paires clé-valeur

Implémentez la fonction suivante et appelez-la dans la méthode application(_:didReceiveRemoteNotification:fetchCompletionHandler:) :

1
2
3
4
5
6

func handleExtras(userInfo: [AnyHashable : Any]) {
  print("A push was received")
  if userInfo != nil && (userInfo["IS_SERVER_EVENT"] as? String) != nil && (userInfo["CAMPAIGN_NAME"] as? String) != nil {
    AppDelegate.braze?.logCustomEvent("IAM Trigger", properties: ["campaign_name": userInfo["CAMPAIGN_NAME"]])
  }
}

1
2
3
4
5
6

- (void)handleExtrasFromPush:(NSDictionary *)userInfo {
  NSLog(@"A push was received.");
  if (userInfo !=nil && userInfo[@"IS_SERVER_EVENT"] !=nil && userInfo[@"CAMPAIGN_NAME"]!=nil) {
    [AppDelegate.braze logCustomEvent:@"IAM Trigger" properties:@{@"campaign_name": userInfo[@"CAMPAIGN_NAME"]}];
  }
};

Lorsque la notification push silencieuse est reçue, un événement enregistré par le SDK « in-app message trigger » sera consigné dans le profil utilisateur.

Étape 2 : Créer une campagne de push silencieuse

Créez une campagne de push silencieuse déclenchée par l’événement envoyé par le serveur.

Une campagne de messages in-app basée sur l'événement qui sera envoyée aux utilisateurs dont le profil utilisateur comporte l'événement personnalisé « server_event ».

La campagne de notification push doit inclure des extras de paires clé-valeur qui indiquent que cette campagne de notification push est envoyée pour enregistrer un événement personnalisé SDK. Cet événement sera utilisé pour déclencher le message in-app.

Une campagne de messages in-app basée sur l'événement qui comporte deux paires clé-valeur. « CAMPAIGN_NAME » est défini sur « Exemple de nom de message in-app » et « IS_SERVER_EVENT » est défini sur « true ».

Le code de la méthode application(_:didReceiveRemoteNotification:fetchCompletionHandler:) vérifie la clé IS_SERVER_EVENT et enregistrera un événement personnalisé SDK si celle-ci est présente.

Vous pouvez modifier le nom de l’événement ou les propriétés d’événement en envoyant la valeur souhaitée dans les extras de paires clé-valeur du payload de la notification push. Lors de la journalisation de l’événement personnalisé, ces extras peuvent être utilisés comme paramètre du nom de l’événement ou comme propriété de l’événement.

Étape 3 : Créer une campagne de message in-app

Créez votre campagne de messages in-app visible par l’utilisateur dans le tableau de bord de Braze. Cette campagne doit avoir une livraison par événement et être déclenchée par l’événement personnalisé enregistré à partir de la méthode application(_:didReceiveRemoteNotification:fetchCompletionHandler:).

Dans l’exemple suivant, le message in-app spécifique à déclencher a été configuré en envoyant la propriété de l’événement dans le cadre de la première notification push silencieuse.

Une campagne de messages in-app basée sur l'événement qui sera envoyée aux utilisateurs qui effectuent l'événement personnalisé « In-app message trigger » où « campaign_name » est égal à « Exemple de nom de campagne IAM ».

Affichage d’un message prédéfini

Pour afficher manuellement un message in-app prédéfini, utilisez la méthode suivante :

Pour le SDK Web, utilisez braze.showInAppMessage(inAppMessage) pour afficher tout message in-app. Pour plus de détails et un exemple, consultez Affichage d’un message en temps réel.

1

BrazeInAppMessageManager.getInstance().addInAppMessage(inAppMessage);

1

BrazeInAppMessageManager.getInstance().addInAppMessage(inAppMessage)

1
2
3

if let inAppMessage = AppDelegate.braze?.inAppMessagePresenter?.nextAvailableMessage() {
  AppDelegate.braze?.inAppMessagePresenter?.present(message: inAppMessage)
}

Affichage d’un message en temps réel

Vous pouvez également créer et afficher des messages in-app locaux en temps réel, en utilisant les mêmes options de personnalisation que celles disponibles sur le tableau de bord. Pour ce faire :

1
2
3
4

  // Displays a slideup type in-app message.
  var message = new braze.SlideUpMessage("Welcome to Braze! This is an in-app message.");
  message.slideFrom = braze.InAppMessage.SlideFrom.TOP;
  braze.showInAppMessage(message);

1
2
3

// Initializes a new slideup type in-app message and specifies its message.
InAppMessageSlideup inAppMessage = new InAppMessageSlideup();
inAppMessage.setMessage("Welcome to Braze! This is a slideup in-app message.");

1
2
3

// Initializes a new slideup type in-app message and specifies its message.
val inAppMessage = InAppMessageSlideup()
inAppMessage.message = "Welcome to Braze! This is a slideup in-app message."

Appelez manuellement la méthode present(message:) sur votre inAppMessagePresenter. Par exemple :

1
2
3
4

let customInAppMessage = Braze.InAppMessage.slideup(
  .init(message: "YOUR_CUSTOM_SLIDEUP_MESSAGE", slideFrom: .bottom, themes: .defaults)
)
AppDelegate.braze?.inAppMessagePresenter?.present(message: customInAppMessage)

1
2
3
4
5
6
7
8
9

BRZInAppMessageRaw *customInAppMessage = [[BRZInAppMessageRaw alloc] init];
customInAppMessage.type = BRZInAppMessageRawTypeSlideup;
customInAppMessage.message = @"YOUR_CUSTOM_SLIDEUP_MESSAGE";
customInAppMessage.slideFrom = BRZInAppMessageRawSlideFromBottom;
customInAppMessage.themes = @{
  @"light": BRZInAppMessageRawTheme.defaultLight,
  @"dark": BRZInAppMessageRawTheme.defaultDark
};
[AppDelegate.braze.inAppMessagePresenter presentMessage:customInAppMessage];

Pour afficher le message suivant dans la pile, utilisez la méthode DisplayNextInAppMessage(). Les messages seront enregistrés dans cette pile si DISPLAY_LATER ou BrazeUnityInAppMessageDisplayActionType.IAM_DISPLAY_LATER est choisi comme action d’affichage des messages in-app.

1

Appboy.AppboyBinding.DisplayNextInAppMessage();

Causes des retards de messages in-app

Si vous recevez une campagne de messages in-app quelques secondes après le démarrage de la session, le retard peut avoir été causé par :

  • Un retard dans le déclencheur de la campagne
  • Des personnalisations
  • L’enregistrement de l’événement déclencheur plus tard que prévu (par exemple avec un templated_iam)

Messages d’intention de sortie pour le web

Les messages d’intention de sortie sont des messages in-app non perturbateurs utilisés pour communiquer des informations importantes aux visiteurs avant qu’ils ne quittent votre site web.

Pour configurer des déclencheurs pour ces types de messages dans le SDK Web, implémentez une bibliothèque d’intention de sortie sur votre site web (telle que la bibliothèque open source de ouibounce), puis utilisez le code suivant pour enregistrer 'exit intent' en tant qu’événement personnalisé dans Braze. Désormais, vos futures campagnes de messages in-app peuvent utiliser ce type de message comme déclencheur d’événement personnalisé.

1
2
3

  var _ouibounce = ouibounce(false, {
    callback: function() { braze.logCustomEvent('exit intent'); }
  });
New Stuff!