Integração de mensagem no app

Mensagens nativas no app são exibidas automaticamente no Android e iOS ao usar React Native. Este artigo aborda a personalização e o registro de análise de dados para suas mensagens no aplicativo para apps usando React Native.

Acessando dados de mensagem no app

Na maioria dos casos, você pode usar o método Braze.addListener para registrar ouvintes de eventos para lidar com dados provenientes de mensagens no app.

Além disso, você pode acessar os dados da mensagem no app na camada JavaScript chamando o método Braze.subscribeToInAppMessage para que os SDKs publiquem um evento inAppMessageReceived quando uma mensagem no app for acionada. Passe um retorno de chamada para este método para executar seu próprio código quando a mensagem no app for acionada e recebida pelo ouvinte.

Para personalizar ainda mais o comportamento padrão, ou se você não tiver acesso para personalizar o código nativo do iOS ou Android, recomendamos que você desative a interface do usuário padrão enquanto ainda recebe eventos de mensagem no app da Braze. Para desativar a interface do usuário padrão, passe false para o método Braze.subscribeToInAppMessage e use os dados da mensagem no app para construir sua própria mensagem em JavaScript. Nota que você precisará registrar manualmente a análise de dados em suas mensagens se optar por desativar a interface padrão.

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

Customização avançada

Para incluir uma lógica mais avançada para determinar se deve ou não mostrar uma mensagem no app usando a interface do usuário integrada, implemente mensagens no app através da camada nativa.

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

análise de dados e métodos de ação

Você pode usar esses métodos passando sua instânciaBrazeInAppMessage para registro análise de dados e realizar ações:

Teste exibindo uma mensagem no app de exemplo

Siga estas etapas para testar uma mensagem no app de exemplo.

1. Defina um usuário ativo no aplicativo React chamando o método Braze.changeUserId('your-user-id').
2. Vá para Campanhas e siga este guia para criar uma nova campanha de mensagem no app.
3. Componha sua campanha de mensagens no app e vá para a guia Test. Adicione o mesmo user-id que o usuário teste e clique em Send Test (Enviar teste). Você deve conseguir lançar uma mensagem no app no seu dispositivo em breve.

Uma implementação de exemplo pode ser encontrada no BrazeProject, dentro do React Native SDK. Amostras adicionais de implementação do Android e iOS podem ser encontradas no Android e no iOS SDK.

modelo de dados de mensagem no app

O modelo de mensagem no app está disponível no SDK do React Native. Braze tem quatro tipos de mensagem no app que compartilham o mesmo modelo de dados: slideup, modal, full e HTML full.

propriedades do modelo de mensagem no app

O modelo de mensagem no app fornece a base para todas as mensagens no app.

Para uma referência completa do modelo de mensagem no app, consulte a Android e a iOS documentação.

propriedades do modelo de botão de mensagem no app

Botões podem ser adicionados às mensagens no app para realizar ações e registrar análise de dados. O modelo de botão fornece a base para todos os botões de mensagem no app.

Para uma referência completa do modelo de botão, consulte a Android e a iOS documentação.

Suporte a GIFs

• android
• ios