Intégration de message in-app

Les messages in-app natifs s’affichent automatiquement sur Android et iOS lors de l’utilisation de React Native. Cet article couvre la personnalisation et la journalisation des analyses pour vos messages in-app pour les applications utilisant React Native.

Accès aux données de message in-app

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 davantage 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 message 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, si vous choisissez de désactiver l’interface utilisateur par défaut, vous devrez enregistrer manuellement l’analyse de vos messages.

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

Personnalisation avancée

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.

• android
• ios

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

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

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

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;

Analyse et méthodes d’action

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

Tester l’affichage d’un exemple de message in-app

Suivez ces étapes pour tester un exemple de message in-app.

1. Définissez un utilisateur actif dans l’application React en appelant la méthode Braze.changeUserId('your-user-id').
2. Dirigez-vous vers Campagnes et suivez ce guide pour créer une nouvelle campagne d’envoi de messages in-app.
3. Composez votre campagne d’envoi de messages in-app de test et dirigez-vous vers l’onglet Test. Ajoutez le même user-id que l’utilisateur test et cliquez sur Envoyer le test. Vous devriez être très prochainement en mesure de lancer un message in-app sur votre appareil.

Un exemple de mise en œuvre peut être trouvé dans ReactProject, au sein du SDK React Native. Vous trouverez d’autres exemples de mise en œuvre pour Android et iOS dans le SDK Android et iOS.

Modèle de données des messages in-app

Le modèle de message in-app est disponible dans le SDK React Native. Braze propose quatre types de messages in-app qui partagent le même modèle de données : contextuel fenêtre modale, complet et HTML complet.

Propriétés du modèle de message in-app

Le modèle de message in-app constitue la base de tous les messages in-app.

Pour une référence complète du modèle d’envoi de messages in-app, consultez la documentation Android et iOS.

Propriétés du modèle du bouton d’envoi de messages in-app

Des boutons peuvent être ajoutés aux messages in-app pour effectuer des actions et enregistrer des analyses. Le modèle de bouton constitue la base de tous les boutons de messages in-app.

Pour une référence complète du modèle de bouton, consultez la documentation Android et iOS.

Support GIF

• android
• ios