Integração de mensagens no app
Saiba como integrar e personalizar mensagens no app para Android e iOS usando o Flutter.
Ativar a interface do usuário de mensagens no app
Para integrar as mensagens no app do Flutter no iOS, ative o envio de mensagens no aplicativo usando o Braze Swift SDK. Não há etapas adicionais para o Android.
Análise de dados de registro
Para registrar análises de dados usando o BrazeInAppMessage
, passe as referências de instância para a função de análises desejada:
logInAppMessageClicked
logInAppMessageImpression
logInAppMessageButtonClicked
(juntamente com o índice de botões)
Por exemplo:
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);
Desativação da exibição automática
Para desativar a exibição automática de mensagens no app, faça essas atualizações na camada nativa.
- Use sempre o inicializador de integração automática, que está habilitado por padrão a partir da versão
2.2.0
. - Defina o padrão da operação de mensagem no app como
DISCARD
adicionando a seguinte linha ao seu arquivobraze.xml
.
1
<string name="com_braze_flutter_automatic_integration_iam_operation">DISCARD</string>
-
Implemente o delegado
BrazeInAppMessageUIDelegate
conforme descrito no artigo sobre iOS aqui. -
Atualize seu método delegado
inAppMessage(_:displayChoiceForMessage:)
para retornar.discard
.
Recebimento de dados de mensagens no app
Para receber dados de mensagens no app em seu app Flutter, o BrazePlugin
é compatível com o envio de dados de mensagens no app usando o Dart Streams.
O objeto BrazeInAppMessage
é compatível com um subconjunto de campos disponíveis nos objetos do modelo nativo, incluindo uri
, message
, header
, buttons
, extras
, entre outros.
Etapa 1: Ouça os dados de mensagens no app na camada Dart
Para receber os dados da mensagem no app na camada Dart, use o código abaixo para criar um StreamSubscription
e chamar braze.subscribeToInAppMessages()
. Lembre-se de cancel()
a inscrição de fluxo quando ela não for mais necessária.
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 obter um exemplo, consulte main.dart em nosso app de amostra.
Etapa 2: Encaminhar dados de mensagens no app a partir da camada nativa
Para receber os dados na camada Dart da etapa 1, adicione o seguinte código para encaminhar os dados da mensagem no app a partir das camadas nativas.
Os dados das mensagens no app são encaminhados automaticamente da camada Android.
Opção 1 - Usando BrazeInAppMessageUIDelegate
-
Implemente o delegado
BrazeInAppMessageUIDelegate
conforme descrito no artigo do iOS sobre o delegado de mensagens no app. -
Atualize a implementação do delegado
willPresent
para chamarBrazePlugin.process(inAppMessage)
.
Opção 2 - Apresentador de mensagens no app personalizado
- Certifique-se de ter ativado a interface do usuário de mensagens no app e defina o endereço
inAppMessagePresenter
como seu apresentador personalizado.1 2
let inAppMessageUI = CustomInAppMessagePresenter() braze.inAppMessagePresenter = inAppMessageUI
- Crie sua classe de apresentador personalizada e acesse
BrazePlugin.process(inAppMessage)
empresent(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) } }
Reprodução da chamada de retorno para mensagens no app
Para armazenar mensagens no app disparadas antes que o retorno de chamada esteja disponível e reproduzi-las depois que ele for definido, adicione a seguinte entrada ao mapa customConfigs
ao inicializar o BrazePlugin
:
1
BrazePlugin braze = new BrazePlugin(customConfigs: {replayCallbacksConfigKey: true});
Teste uma amostra de mensagem no app
Siga estas etapas para testar um exemplo de mensagem no app.
- Defina um usuário ativo no app React chamando o método
braze.changeUser('your-user-id')
. - Vá até a página Campanhas em seu dashboard e siga este guia para criar uma nova campanha de mensagens no app.
- Crie sua campanha de mensagens no app de teste e vá para a guia Teste. Adicione o mesmo
user-id
que o usuário teste e clique em Send Test (Enviar teste). - Toque na notificação por push e isso deverá exibir a mensagem no app em seu dispositivo.
Suporte a GIFs
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.