Intégration de messages in-app

Découvrez comment intégrer et personnaliser les messages in-app pour Android et iOS à l’aide de Flutter.

Activer l’interface utilisateur des messages in-app

Pour intégrer l’envoi de messages in-app de Flutter à iOS, activez l’envoi de messages in-app à l’aide du SDK Braze Swift. Il n’y a pas d’étapes supplémentaires pour Android.

Enregistrer les analyses

Pour enregistrer les analyses à l’aide de votre BrazeInAppMessage, passez l’instance dans la fonction d’analyses souhaitée :

logInAppMessageClicked
logInAppMessageImpression
logInAppMessageButtonClicked (avec l’index des boutons)

Par exemple :

// Log a click
braze.logInAppMessageClicked(inAppMessage);
// Log an impression
braze.logInAppMessageImpression(inAppMessage);
// Log button index `0` being clicked
braze.logInAppMessageButtonClicked(inAppMessage, 0);

Désactiver l’affichage automatique

Pour désactiver l’affichage automatique des messages in-app, effectuez ces mises à jour dans la couche native.

android
ios

Assurez-vous d’utiliser l’initiateur d’intégration automatique, activé par défaut à partir de la version 2.2.0.
Définissez l’opération par défaut de message in-app DISCARD en ajoutant la ligne suivante à votre fichier braze.xml.

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

Implémentez le délégué BrazeInAppMessageUIDelegate comme décrit dans notre article iOS ici.
Mettez à jour votre méthode de délégué inAppMessage(_:displayChoiceForMessage:) pour qu’elle retourne .discard.

Réception des données de message in-app

Pour recevoir des données de messages in-app dans votre application Flutter, le BrazePlugin prend en charge l’envoi de données de messages in-app à l’aide de Dart Streams.

L’objet BrazeInAppMessage prend en charge un sous-ensemble de champs disponibles dans les objets du modèle natif, y compris uri, message, header, buttons, extras et plus encore.

Étape 1 : Écouter les données des messages in-app dans la couche Dart

Pour recevoir les données des messages in-app dans la couche Dart, utilisez le code ci-dessous pour créer un StreamSubscription et appeler braze.subscribeToInAppMessages(). N’oubliez pas de cancel() l’abonnement au flux lorsqu’il n’est plus nécessaire.

// Create stream subscription
StreamSubscription inAppMessageStreamSubscription;

inAppMessageStreamSubscription = braze.subscribeToInAppMessages((BrazeInAppMessage inAppMessage) {
  // Handle in-app messages
}

// Cancel stream subscription
inAppMessageStreamSubscription.cancel();

Consultez main.dart dans notre exemple d’application.

Étape 2 : Transmettre les données des messages in-app à partir de la couche native

Pour recevoir les données dans la couche Dart de l’étape 1, ajoutez le code suivant pour envoyer les données du message in-app à partir des couches natives.

android
ios

Les données des messages in-app sont automatiquement transmises par la couche Android.

Option 1 - Utilisation de `BrazeInAppMessageUIDelegate`

Implémentez le délégué BrazeInAppMessageUIDelegate comme décrit dans notre article iOS sur le délégué de message in-app de base.
Mettez à jour votre implémentation de délégué willPresent pour qu’elle appelle BrazePlugin.process(inAppMessage).

Option 2 - Présentateur de message in-app personnalisé

Assurez-vous d’avoir activé l’interface utilisateur de l’envoi message in-app et définissez l’adresse inAppMessagePresenter sur votre présentateur personnalisé.

 let inAppMessageUI = CustomInAppMessagePresenter()
 braze.inAppMessagePresenter = inAppMessageUI

Créez votre classe de présentateur personnalisée et appelez BrazePlugin.process(inAppMessage) à l’intérieur de present(message:).

class CustomInAppMessagePresenter: BrazeInAppMessageUI {
  override func present(message: Braze.InAppMessage) {
 // Pass in-app message data to the Dart layer.
 BrazePlugin.processInAppMessage(message)

 // If you want the default UI to display the in-app message.
 super.present(message: message)
  }
}

Rejouer la fonction de rappel pour les messages in-app

Pour stocker tous les messages in-app déclenchés avant que le rappel ne soit disponible et les rejouer une fois qu’il est défini, ajoutez l’entrée suivante au mappage customConfigs lors de l’initialisation de l’application BrazePlugin:

BrazePlugin braze = new BrazePlugin(customConfigs: {replayCallbacksConfigKey: true});

Test d’un exemple de message in-app

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

Définissez un utilisateur actif dans l’application React en appelant la méthode braze.changeUser('your-user-id').
Rendez-vous sur la page Campagnes de votre tableau de bord et suivez ce guide pour créer une nouvelle campagne de messages in-app.
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.
Appuyez sur la notification push qui devrait afficher le message in-app sur votre appareil.

You can add animated GIFs to your in-app messages using the native Braze Android SDK. By default, the Android SDK uses HTML in-app messages to display GIFs.

For all other in-app message types, you’ll need to use a custom image library. To learn more, see Android In-App Messaging: GIFs.

You can add animated GIFs to your in-app messages using the native Braze Swift SDK. By default, all Braze in-app messages support GIFs. For a full walkthrough, see Tutorial: GIF Support for Swift In-App Messages.

Une campagne de communication in-app de Braze montrant que vous pouvez ajouter votre propre ID utilisateur en tant que destinataire test pour tester votre message in-app.