Skip to content

Enregistrer les données des messages in-app

Découvrez comment enregistrer les données des messages in-app (IAM) via le SDK de Braze.

Conditions préalables

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

Données d’envoi des messages

L’enregistrement des impressions et des clics des messages in-app est effectué automatiquement lorsque vous utilisez la méthode showInAppMessage ou automaticallyShowInAppMessage.

Si vous n’utilisez pas ces méthodes et choisissez d’afficher manuellement le message à l’aide de votre propre code d’interface utilisateur, utilisez les méthodes suivantes pour enregistrer les analyses :

1
2
3
4
5
6
7
8

// Registers that a user has viewed an in-app message with the Braze server.
braze.logInAppMessageImpression(inAppMessage);
// Registers that a user has clicked on the specified in-app message with the Braze server.
braze.logInAppMessageClick(inAppMessage);
// Registers that a user has clicked a specified in-app message button with the Braze server.
braze.logInAppMessageButtonClick(button, inAppMessage);
// Registers that a user has clicked on a link in an HTML in-app message with the Braze server.
braze.logInAppMessageHtmlClick(inAppMessage, buttonId?, url?)

Conditions préalables

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

Données d’envoi des messages

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 :

1
2
3
4
5
6

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

Accès aux données des messages

Pour accéder aux données des messages in-app dans votre application Flutter, le site BrazePlugin transmet les données des 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.

1
2
3
4
5
6
7
8
9

// 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.

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

Vous pouvez transmettre les données des messages in-app de deux manières :

  1. 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.

  2. Mettez à jour votre implémentation de délégué willPresent pour qu’elle appelle BrazePlugin.process(inAppMessage).

  1. 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é. 
    1
2

     let inAppMessageUI = CustomInAppMessagePresenter()
 braze.inAppMessagePresenter = inAppMessageUI
  2. Créez votre classe de présentateur personnalisée et appelez BrazePlugin.process(inAppMessage) à l’intérieur de present(message:). 
    1
2
3
4
5
6
7
8
9

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

Étape 3 : Reprise du rappel pour les messages in-app (facultatif).

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:

1

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

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;

Conditions préalables

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

Données d’envoi des messages

Vous devrez vous assurer que certaines fonctions sont appelées pour gérer les analyses de votre campagne.

Messages affichés

Lorsqu’un message s’affiche ou est vu, journalisez une impression :

1

LogInAppMessageImpression(in_app_message.id, brazetask)

Messages cliqués

Une fois qu’un utilisateur clique sur le message, enregistrez un clic puis traitez in_app_message.click_action :

1

LogInAppMessageClick(in_app_message.id, brazetask)

Boutons cliqués

Si l’utilisateur clique sur un bouton, journalisez le clic sur le bouton puis traitez inappmessage.buttons[selected].click_action :

1

LogInAppMessageButtonClick(inappmessage.id, inappmessage.buttons[selected].id, brazetask)

Après le traitement d’un message

Après avoir traité un message in-app, vous devez effacer le champ :

1

m.BrazeTask.BrazeInAppMessage = invalid

S’abonner à des messages in-app

Vous pouvez lister des objets de jeu Unity pour être avertis des messages in-app entrants. Nous recommandons de définir des auditeurs d’objets de jeu à partir de l’éditeur de configuration Braze. Dans l’éditeur de configuration, les auditeurs doivent être définis séparément pour Android et iOS.

Si vous devez configurer votre auditeur d’objet de jeu lors de l’exécution, utilisez AppboyBinding.ConfigureListener() et spécifiez BrazeUnityMessageType.IN_APP_MESSAGE.

Analyser les messages

Les messages string entrants reçus dans votre rappel d’objet de jeu de messages in-app peuvent être analysés dans nos objets de modèle pré-fournis pour plus de commodité.

Utiliser InAppMessageFactory.BuildInAppMessage() pour analyser votre message in-app. L’objet résultant sera soit une instance de IInAppMessage.cs ou IInAppMessageImmersive.cs en fonction de son type.

1
2
3
4
5
6
7
8
9
10

// Automatically logs a button click, if present.
void InAppMessageReceivedCallback(string message) {
  IInAppMessage inApp = InAppMessageFactory.BuildInAppMessage(message);
  if (inApp is IInAppMessageImmersive) {
    IInAppMessageImmersive inAppImmersive = inApp as IInAppMessageImmersive;
    if (inAppImmersive.Buttons != null && inAppImmersive.Buttons.Count > 0) {
      inAppImmersive.LogButtonClicked(inAppImmersive.Buttons[0].ButtonID);
    }
  }
}

Données d’envoi des messages

Les clics et les impressions doivent être enregistrés manuellement pour les messages in-app non affichés directement par Braze.

Utilisez LogClicked() et LogImpression() sur IInAppMessage pour enregistrer les clics et les impressions sur votre message.

Utilisez LogButtonClicked(int buttonID) sur IInAppMessageImmersive pour enregistrer les clics sur les boutons. Notez que les boutons sont conseillés sous forme de listes d’instances deInAppMessageButton dont chacune contient une instance ButtonID.
Github   Modifier cette page sur GitHub
New Stuff!