Skip to content

Déclencher des messages in-app

Découvrez comment déclencher des messages in-app via le SDK Braze.

Déclencheurs et distribution des 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 avancés).

Au début de la session d’un utilisateur, Braze envoie tous les messages in-app éligibles à son appareil, tout en préchargeant 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 est distribué. Pour en savoir plus, consultez 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émarrage 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 s’afficher.

Les messages in-app sont distribués en tant que 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 existe dans le message :

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

Cela signifie qu’au démarrage de la session, l’appareil reçoit le déclencheur de ce message in-app au lieu du message entier. 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 Campaign 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 complet, consultez notre application d’exemple.

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ésactiver les déclencheurs automatiques

Par défaut, les messages in-app sont déclenchés automatiquement. Pour désactiver ce comportement :

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, consultez notre Tutoriel : Reporter et restaurer les messages déclenchés.

  1. Implémentez le IInAppMessageManagerListener pour définir un écouteur personnalisé.
  2. Mettez à jour votre méthode beforeInAppMessageDisplayed() pour qu’elle retourne 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, consultez notre page Personnalisation des messages.

  1. Implémentez le délégué BrazeInAppMessageUIDelegate dans votre application. Pour une procédure complète, consultez le Tutoriel : Interface utilisateur des messages in-app.
  2. Mettez à jour votre méthode déléguée 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, consultez notre Tutoriel : Reporter et restaurer les messages déclenchés.

  1. Vérifiez que vous utilisez l’initialiseur 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 des messages 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écochez Automatically Display In-App Messages dans l’éditeur de configuration Braze. Vous pouvez également définir com_braze_inapp_show_inapp_messages_automatically sur false dans le fichier braze.xml de votre projet Unity.

L’opération d’affichage initiale des messages in-app peut être définie dans la configuration Braze via « In App Message Manager Initial Display Operation ».

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

L’opération d’affichage initiale des messages in-app peut être définie dans la configuration Braze via « 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 qu’un bouton a été pressé dans le 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 Braze). Le délai de récupération par défaut de 30 secondes entre les déclencheurs de messages in-app doit être modifié pour afficher plusieurs messages in-app en succession rapide. Pour la configuration spécifique à chaque plateforme, consultez Remplacer la limite de débit par défaut.

Remplacer 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 Braze. Cette valeur est 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 à 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’affiche pas tant que le message en cours n’est pas 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éclencher manuellement des messages

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

Utiliser un événement côté serveur

Actuellement, 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 ensuite le message in-app visible par 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, consultez la section Configuration des notifications push.

Deux événements seront enregistrés pour que le message in-app soit distribué : l’un par le serveur et l’autre depuis votre rappel push personnalisé. Pour éviter que le même événement ne soit dupliqué, l’événement enregistré depuis votre rappel push doit suivre une convention de nommage 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 respecté, la segmentation et les données utilisateur peuvent être affectées par des événements dupliqués enregistrés 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 push

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

Étape de distribution d'une campagne push silencieuse configurée pour une livraison par événement avec un déclencheur d'événement personnalisé server_event.

La campagne push doit inclure des paires clé-valeur supplémentaires indiquant que cette campagne push est envoyée pour enregistrer un événement personnalisé du 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 « example campaign name ».

L’exemple de code de rappel push précédent 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 le faire en les transmettant dans les paires clé-valeur du payload push. Dans cet exemple, le nom de la campagne du message in-app suivant a été inclus. Votre rappel push personnalisé peut ensuite transmettre la valeur en tant que paramètre de la propriété d’é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 message 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é depuis votre rappel push personnalisé.

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

Une campagne à livraison par événement où un message in-app sera déclenché lorsque « campaign_name » est égal à « IAM campaign name example ».

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 sera pas affiché. 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 ignorer ou retarder l’événement jusqu’à ce que l’application soit revenue au premier plan.

Étape 1 : Gérer la notification push silencieuse 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 « déclencheur de message in-app » sera consigné dans le profil utilisateur.

Étape 2 : Créer une campagne push silencieuse

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

Une campagne de message in-app à livraison par événement qui sera distribuée aux utilisateurs dont le profil contient l'événement personnalisé « server_event ».

La campagne push doit inclure des paires clé-valeur supplémentaires indiquant que cette campagne push est envoyée pour enregistrer un événement personnalisé du SDK. Cet événement sera utilisé pour déclencher le message in-app.

Une campagne de message in-app à livraison par événement avec deux paires clé-valeur. « CAMPAIGN_NAME » défini sur « In-app message name example » et « IS_SERVER_EVENT » défini sur « true ».

Le code dans la méthode application(_:didReceiveRemoteNotification:fetchCompletionHandler:) vérifie la clé IS_SERVER_EVENT et enregistrera un événement personnalisé du 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 paires clé-valeur supplémentaires du payload push. Lors de l’enregistrement de l’événement personnalisé, ces extras peuvent être utilisés comme paramètre du nom de l’événement ou comme propriété d’événement.

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

Créez votre campagne de message 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é depuis 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é d’événement dans le cadre de la notification push silencieuse initiale.

Une campagne de message in-app à livraison par événement qui sera distribuée aux utilisateurs qui effectuent l'événement personnalisé « In-app message trigger » où « campaign_name » est égal à « IAM Campaign Name Example ».

Afficher 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 n’importe quel message in-app. Pour plus de détails et un exemple, consultez Afficher 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)
}

Afficher 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 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 prochain message 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 du message in-app.

1

Appboy.AppboyBinding.DisplayNextInAppMessage();

Causes des retards des messages in-app

Si vous recevez une campagne de message in-app quelques secondes après le début 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 intrusifs 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 d’ouibounce), puis utilisez le code suivant pour enregistrer 'exit intent' en tant qu’événement personnalisé dans Braze. Vos futures Campaigns de messages in-app pourront alors 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!