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:
logInAppMessageClickedlogInAppMessageImpressionlogInAppMessageButtonClicked(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:
| Método | Descripción |
|---|---|
logInAppMessageClicked(inAppMessage) |
Registra un clic para los datos de mensajes dentro de la aplicación proporcionados. |
logInAppMessageImpression(inAppMessage) |
Registra una impresión para los datos de mensajes dentro de la aplicación proporcionados. |
logInAppMessageButtonClicked(inAppMessage, buttonId) |
Registra un clic de botón para los datos de mensaje dentro de la aplicación y el ID de botón proporcionados. |
hideCurrentInAppMessage() |
Descarta el mensaje dentro de la aplicación que se está mostrando. |
performInAppMessageAction(inAppMessage) |
Realiza la acción para un mensaje dentro de la aplicación. |
performInAppMessageButtonAction(inAppMessage, buttonId) |
Realiza la acción de un botón de mensaje dentro de la aplicación. |
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.
Puesto que se trata de una opción de personalización avanzada, ten en cuenta que anular la implementación predeterminada de Braze también anulará la lógica para emitir eventos de mensajes dentro de la aplicación a tus oyentes de JavaScript. Si deseas seguir utilizando Braze.subscribeToInAppMessage o Braze.addListener como se describe en Acceder a los datos de mensajes dentro de la aplicación, tendrás que encargarte tú mismo de publicar los eventos.
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.
-
Implementa el delegado
BrazeInAppMessageUIDelegatecomo se describe en nuestro artículo sobre iOS aquí. -
En el método delegado
inAppMessage(_:displayChoiceForMessage:), puedes acceder a los datos deinAppMessage, 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.
BrazeUI solo puede importarse en Objective-C o Swift. Si utilizas Objective-C++, tendrás que manejar esto en un archivo aparte.
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.
Editar esta página en GitHub