Skip to content

Iniciar sesión en los datos de mensajes dentro de la aplicación

Aprende a registrar datos de mensajes dentro de la aplicación (IAM) a través del SDK de Braze.

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK de Web Braze.

Registro de datos de mensajes

El registro de impresiones y clics de mensajes dentro de la aplicación se realiza automáticamente cuando utilizas el método showInAppMessage o automaticallyShowInAppMessage.

Si no utilizas ninguno de estos métodos y optas por mostrar manualmente el mensaje utilizando tu propio código de interfaz de usuario, utiliza los siguientes métodos para registrar los análisis:

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

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK de Flutter Braze.

Registro de datos de mensajes

Para registrar análisis utilizando tu BrazeInAppMessage, pasa la instancia a la función de análisis deseada:

  • logInAppMessageClicked
  • logInAppMessageImpression
  • logInAppMessageButtonClicked (junto con el índice del botón)

Por ejemplo:

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

Acceso a los datos de los mensajes

Para acceder a los datos de mensajes dentro de la aplicación en tu aplicación Flutter, BrazePlugin admite el envío de datos de mensajes dentro de la aplicación mediante Dart Streams.

El objeto BrazeInAppMessage admite un subconjunto de campos disponibles en los objetos del modelo nativo, como uri, message, header, buttons, extras, etc.

Escuchar los datos de mensajes dentro de la aplicación en la capa Dart

Para recibir los datos de los mensajes dentro de la aplicación en la capa Dart, utiliza el código siguiente para crear un StreamSubscription y llama a braze.subscribeToInAppMessages(). Recuerda llamar a cancel() en la suscripción al stream cuando ya no la necesites.

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();

Para ver un ejemplo, consulta main.dart en la aplicación de ejemplo del SDK de Braze para Flutter.

Reenviar datos de mensajes dentro de la aplicación desde la capa nativa

Los datos de los mensajes dentro de la aplicación se reenvían automáticamente desde las capas nativas de Android e iOS. No se requiere configuración adicional.

Si estás utilizando Flutter SDK 17.1.0 o anterior, el reenvío de datos de mensajes dentro de la aplicación desde la capa nativa de iOS requiere configuración manual. Es probable que tu aplicación contenga uno de los siguientes. Para migrar a Flutter SDK 18.0.0, elimina la llamada a BrazePlugin.processInAppMessage(_:): el reenvío de datos ahora se gestiona automáticamente.

Elimina la llamada a BrazePlugin.processInAppMessage(_:) de tu implementación del delegado willPresent.

Elimina la llamada a BrazePlugin.processInAppMessage(message) de la implementación de present(message:) de tu presentador personalizado:

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

Reproducir la devolución de llamada para mensajes dentro de la aplicación (opcional)

Para almacenar cualquier mensaje dentro de la aplicación desencadenado antes de que la devolución de llamada esté disponible y reproducirlo después de que se haya establecido, añade la siguiente entrada al mapa customConfigs al inicializar BrazePlugin:

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

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK Braze de React Native.

Métodos de registro

Puedes utilizar estos métodos pasando tu instancia BrazeInAppMessage para registrar análisis y realizar acciones:

Tratamiento de datos de mensajes

En la mayoría de los casos, puedes utilizar el método Braze.addListener para registrar escuchadores de eventos que gestionen los datos procedentes de mensajes dentro de la aplicación.

Además, puedes acceder a los datos de los mensajes dentro de la aplicación en la capa JavaScript llamando al método Braze.subscribeToInAppMessage para que los SDK publiquen un evento inAppMessageReceived cuando se desencadene un mensaje dentro de la aplicación. Pasa una devolución de llamada a este método para ejecutar tu propio código cuando el mensaje dentro de la aplicación sea desencadenado y recibido por el oyente.

Para personalizar cómo se gestionan los datos de los mensajes, consulta los siguientes ejemplos de implementación:

Para mejorar el comportamiento predeterminado, o si no tienes acceso a personalizar el código nativo de iOS o Android, te recomendamos que desactives la interfaz de usuario predeterminada mientras sigues recibiendo eventos de mensajes dentro de la aplicación desde Braze. Para desactivar la interfaz predeterminada, pasa false al método Braze.subscribeToInAppMessage y utiliza los datos del mensaje dentro de la aplicación para construir tu propio mensaje en JavaScript. Ten en cuenta que tendrás que registrar manualmente los análisis de tus mensajes si decides desactivar la interfaz predeterminada.

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

Para incluir una lógica más avanzada que determine si mostrar o no un mensaje dentro de la aplicación utilizando la interfaz de usuario integrada, implementa mensajes dentro de la aplicación a través de la capa nativa.

Implementa el IInAppMessageManagerListener tal y como se describe en nuestro artículo de Android sobre la escucha personalizada del administrador. En tu implementación de beforeInAppMessageDisplayed, puedes acceder a los datos de inAppMessage, enviarlos a la capa JavaScript y decidir mostrar o no el mensaje nativo en función del valor devuelto.

Para más información sobre estos valores, consulta nuestra documentación de 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;
}

Anular el delegado de interfaz predeterminado

Por predeterminado, BrazeInAppMessageUI se crea y asigna cuando inicializas la instancia braze. BrazeInAppMessageUI es una implementación del protocolo BrazeInAppMessagePresenter y viene con una propiedad delegate que puede utilizarse para personalizar la gestión de los mensajes dentro de la aplicación que se han recibido.

  1. Implementa el delegado BrazeInAppMessageUIDelegate como se describe en nuestro artículo sobre iOS aquí.

  2. En el método delegado inAppMessage(_:displayChoiceForMessage:), puedes acceder a los datos de inAppMessage, enviarlos a la capa JavaScript y decidir mostrar o no el mensaje nativo en función del valor de retorno.

Para más detalles sobre estos valores, consulta nuestra documentación sobre 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;
}

Para utilizar este delegado, asígnalo a brazeInAppMessagePresenter.delegate después de inicializar la instancia 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;
}

Sobreescribir la interfaz de usuario nativa predeterminada

Si deseas personalizar completamente la presentación de tus mensajes dentro de la aplicación en la capa nativa de iOS, sigue el protocolo BrazeInAppMessagePresenter y asigna tu presentador personalizado siguiendo el siguiente ejemplo:

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;

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK de Android Braze.

Registro de datos de mensajes

Tendrás que asegurarte de que se llaman determinadas funciones para gestionar los análisis de tu campaña.

Mensajes mostrados

Cuando se muestra o se ve un mensaje, registra una impresión:

1
LogInAppMessageImpression(in_app_message.id, brazetask)

Mensajes con clic

Una vez que un usuario hace clic en el mensaje, registra un clic y luego procesa in_app_message.click_action:

1
LogInAppMessageClick(in_app_message.id, brazetask)

Botones clicados

Si el usuario hace clic en un botón, registra el clic en el botón y luego procesa inappmessage.buttons[selected].click_action:

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

Después de procesar un mensaje

Después de procesar un mensaje dentro de la aplicación, debes borrar el campo:

1
m.BrazeTask.BrazeInAppMessage = invalid

Suscribirse a mensajes dentro de la aplicación

Puedes registrar objetos del juego Unity para recibir notificaciones de mensajes dentro de la aplicación. Recomendamos configurar los oyentes del objeto del juego desde el editor de configuración de Braze. En el editor de configuración, las escuchas deben establecerse por separado para Android e iOS.

Si necesitas configurar la escucha de tu objeto del juego en tiempo de ejecución, utiliza AppboyBinding.ConfigureListener() y especifica BrazeUnityMessageType.IN_APP_MESSAGE.

Análisis sintáctico de mensajes

Los mensajes entrantes de string recibidos en la devolución de llamada de tu objeto del juego de mensajería dentro de la aplicación pueden analizarse en nuestros objetos modelo suministrados previamente para mayor comodidad.

Utiliza InAppMessageFactory.BuildInAppMessage() para analizar tu mensaje dentro de la aplicación. El objeto resultante será una instancia de IInAppMessage.cs o IInAppMessageImmersive.cs dependiendo de su tipo.

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

Registro de datos de mensajes

Los clics y las impresiones deben registrarse manualmente para los mensajes dentro de la aplicación no mostrados directamente por Braze.

Utiliza LogClicked() y LogImpression() en IInAppMessage para registrar los clics y las impresiones de tu mensaje.

Utiliza LogButtonClicked(int buttonID) en IInAppMessageImmersive para registrar los clics en los botones. Ten en cuenta que los botones se representan como listas de instancias InAppMessageButton, cada una de las cuales contiene un ButtonID.

New Stuff!