Esta página foi traduzida pela API Cloud Translation.

Seu primeiro experimento de mensagens no app

1. Introdução

Metas

Neste codelab, você vai instrumentar um experimento de mensagens no app para um app de recomendações de restaurantes para várias plataformas com tecnologia do Flutter (link em inglês) e do Cloud Firestore.

Depois de concluir, você poderá criar e implementar experimentos de mensagens no app para aumentar o engajamento do usuário em qualquer app iOS ou Android escrevendo uma quantidade mínima de código.

O que você aprenderá

Como usar as mensagens no app do Firebase (FIAM) em um app Flutter
Como personalizar a aparência das mensagens no app
Como criar e implementar um experimento de mensagens no app
Como interpretar os resultados de um experimento de mensagens no app

O que você quer aprender com este codelab?

Ainda não conheço bem o assunto e quero ter uma boa visão geral.

Conheço um pouco sobre esse assunto, mas quero me atualizar.

Estou procurando exemplos de código para usar no meu projeto.

Estou procurando uma explicação de algo específico.

Mensagens no app do Firebase

O Firebase In-App Messaging (FIAM) ajuda você a envolver os usuários ativos do seu app por meio do envio de mensagens direcionadas e contextuais. Essas mensagens incentivam os usuários a realizar ações importantes, como passar de fase em um jogo, comprar um item ou inscrever-se em um conteúdo.

Teste A/B do Firebase

Com a tecnologia do Google Optimize, o Teste A/B do Firebase (ABT, na sigla em inglês) ajuda você a otimizar a experiência no app, facilitando a execução, a análise e o escalonamento de experimentos de produtos e marketing. Além disso, é possível testar alterações na interface, nos recursos ou nas campanhas de engajamento do seu app para saber se elas estão afetando suas métricas principais (como receita e retenção) antes da implantação completa.

O que você precisa

Se você não conhece bem o Flutter ou o Firestore, primeiro conclua o codelab do Firebase para Flutter:

É possível completar este codelab usando qualquer um dos seguintes dispositivos:

Um dispositivo físico (Android ou iOS) conectado ao computador e configurado para o modo de desenvolvedor.
O iOS Simulator: (requer instalar o Xcode)
O Android Emulator. (requer configuração no Android Studio)

Além disso, você também precisa:

Um navegador da sua escolha, como o Chrome.
Um ambiente de desenvolvimento integrado ou editor de texto de sua preferência, como o Android Studio ou o VS Code (link em inglês) configurado com os plug-ins Dart e Flutter Recomendamos o uso do VS Code com o Flutter.
A versão estável mais recente do Flutter (ou Beta, se você gosta de viver no limite).
Uma Conta do Google, como uma conta do Gmail, para criar e gerenciar seu projeto do Firebase.
O exemplo de código do codelab. Confira a próxima etapa para saber como receber o código.

2. Começar a configuração

Buscar o código

Clone o repositório do GitHub na linha de comando:

git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter

O exemplo de código será clonado para o diretório friendlyeats-flutter. De agora em diante, execute comandos desse diretório:

cd friendlyeats-flutter

Em seguida, mude para o diretório do codelab e confira a ramificação fiam-abt:

git checkout fiam-abt

Essa ramificação contém todo o código necessário para este codelab, incluindo uma versão concluída na pasta done. As outras ramificações neste repositório contêm código para criar o app FriendlyEats, conforme mostrado no codelab do Flutter do Firestore multiplataforma. Para os fins deste codelab, removemos a integração da Web nesta ramificação.

Importar o app inicial

Abra ou importe o diretório codelab-fiam-abt no ambiente de desenvolvimento integrado de sua preferência. O diretório contém o código inicial do codelab, que consiste em um app de recomendação de restaurantes. Neste codelab, você vai instrumentar um experimento de mensagens no app para os usuários dele.

Criar um projeto do Firebase

Faça login no console do Firebase usando sua Conta do Google.
Clique no botão para criar um projeto e insira um nome (por exemplo, FriendlyEats).
Esse nome é usado como um nome de exibição nas interfaces do Firebase, e o Firebase cria automaticamente um ID exclusivo com base nele. Se quiser, clique no ícone Editar agora para definir o ID do projeto que preferir, mas não é possível mudar esse ID depois da criação do projeto.

Lembre-se do ID do projeto porque você vai precisar dele mais tarde para identificar seu projeto do Firebase na CLI do Firebase. Se você esquecer seu ID, é possível encontrá-lo mais tarde nas Configurações do projeto.
Clique em Continuar.
Se solicitado, leia e aceite os Termos do Firebase e clique em Continuar.
(Opcional) Ative a assistência de IA no console do Firebase (chamada de "Gemini no Firebase").
Neste codelab, você precisa do Google Analytics para usar os produtos do Firebase da melhor forma. Portanto, mantenha a ativação na opção do Google Analytics. Siga as instruções na tela para configurar o Google Analytics.
Clique em Criar projeto, aguarde o provisionamento e clique em Continuar.

Parabéns! Você acabou de criar seu primeiro projeto do Firebase.

Agora, você vai aprender a configurar e ativar os serviços necessários usando o console do Firebase.

Ativar a autenticação anônima

Embora a autenticação não seja o foco deste codelab, é importante ter uma forma desse processo no seu app. Você usará o Login anônimo, o que significa que o usuário será conectado silenciosamente sem nenhuma solicitação.

Para ativar o Login anônimo, faça o seguinte:

No console do Firebase, localize Autenticação na barra de navegação à esquerda.
Clique em Autenticação, depois em Começar e selecione a guia Método de login ou acesse o Console do Firebase diretamente.
Ative o provedor de login Anônimo e clique em Salvar.

A ativação do Login anônimo permite que o aplicativo faça login dos usuários silenciosamente quando eles acessarem o app. Para saber mais, consulte a documentação de autenticação anônima para Android e iOS.

Configurar o Cloud Firestore

O app usa o Cloud Firestore para salvar e receber informações sobre restaurantes e notas para eles.

Veja como configurar o Cloud Firestore no seu projeto do Firebase:

No painel à esquerda do console do Firebase, expanda Build e selecione Banco de dados do Firestore.
Clique em Criar banco de dados.
Deixe o ID do banco de dados definido como (default).
Selecione um local para o banco de dados e clique em Próxima.
No caso de apps reais, escolha um local próximo aos usuários.
Clique em Iniciar no modo de teste. Leia o aviso sobre as regras de segurança.
Mais adiante neste codelab, você vai adicionar regras de segurança para proteger seus dados. Não distribua ou exponha um aplicativo publicamente sem adicionar regras de segurança ao seu banco de dados.
Clique em Criar.

3. Configuração do Firebase específica para dispositivos móveis

A maioria das mudanças de código necessárias para ativar a compatibilidade do Firebase já foi feita no projeto em que você está trabalhando. No entanto, para adicionar compatibilidade com plataformas móveis, você precisa:

Registre a plataforma desejada no projeto do Firebase.
Faça o download do arquivo de configuração específico da plataforma e adicione-o ao código.

No diretório de nível superior do seu app do Flutter, há subdiretórios chamados ios e android. Esses diretórios contêm os arquivos de configuração específicos da plataforma para iOS e Android, respectivamente.

Configurar o iOS

No Console do Firebase, selecione Configurações do projeto na parte superior da barra de navegação à esquerda e clique no botão "iOS" em Seus apps na página Geral.

Você vai ver a seguinte caixa de diálogo:

O valor importante que será fornecido é o ID do pacote do iOS. Você encontra o ID do pacote seguindo as próximas três etapas.

Na ferramenta de linha de comando, acesse o diretório de nível superior do seu app do Flutter.
Execute o comando open ios/Runner.xcworkspace para abrir o Xcode.

No Xcode, clique em Runner no nível superior no painel esquerdo para mostrar a guia General no painel direito, conforme a imagem abaixo. Copie o valor de Bundle Identifier.

Volte para a caixa de diálogo do Firebase, cole o Bundle Identifier copiado no campo ID do pacote do iOS e clique em Registrar app.

Ainda no Firebase, siga as instruções para fazer o download do arquivo de configuração GoogleService-Info.plist.
Volte para o Xcode. Observe que Runner também tem uma subpasta chamada Runner (mostrada na imagem anterior).
Arraste o arquivo GoogleService-Info.plist que você acabou de salvar para a subpasta Runner.
Na caixa de diálogo que aparece no Xcode, clique em Finish.
Volte para o console do Firebase. Na etapa de configuração, clique em Próxima, pule as etapas restantes e volte para página principal do Console do Firebase.

Você terminou de configurar seu app do Flutter para iOS.

Configurar para Android

No Console do Firebase, selecione Configurações do projeto na parte de cima da barra de navegação à esquerda e clique no botão Android em Seus apps na página Geral.

Você vai ver a seguinte caixa de diálogo :

O valor importante que será fornecido é o nome do pacote do Android. Você encontra o nome do pacote ao seguir estas duas etapas:

No diretório do app do Flutter, abra o arquivo android/app/src/main/AndroidManifest.xml.
No elemento manifest, encontre o valor da string do atributo package. Esse valor é o nome do pacote do Android, algo como com.yourcompany.yourproject. Copie esse valor.
Na caixa de diálogo do Firebase, cole o nome de pacote copiado no campo Nome do pacote do Android.
O Certificado de assinatura de depuração SHA-1 não é necessário para este codelab. Deixe em branco.
Clique em Registrar app.
Ainda no Firebase, siga as instruções para fazer o download do arquivo de configuração google-services.json.
Acesse o diretório do app do Flutter e mova o arquivo google-services.json que você acabou de salvar para o diretório android/app.
No Console do Firebase, pule as etapas restantes e volte à página principal.
Toda a configuração do Gradle já foi verificada. Caso seu app ainda esteja em execução, feche e recrie-o para que o Gradle instale as dependências.

Você terminou de configurar seu app do Flutter para Android.

4. Execute seu aplicativo localmente

Você já pode começar a trabalhar no seu app. Primeiro, execute o app localmente. Agora você pode executar o app em qualquer plataforma que tenha configurado e para a qual você tenha um dispositivo e emulador disponíveis.

Descubra quais dispositivos estão disponíveis com o seguinte comando:

flutter devices

Dependendo da disponibilidade, o resultado do comando anterior será parecido com este:

Agora, execute o app localmente com o seguinte comando:

flutter run

Agora, você vai ver sua cópia do FriendlyEats, conectada ao seu projeto do Firebase.

O app se conecta automaticamente ao seu projeto do Firebase e faz login silencioso como um usuário anônimo.

5. Criar e testar sua primeira mensagem

Integrar as mensagens no app do Firebase ao seu app

A integração básica de mensagens no app não exige código. Basta adicionar a dependência e pronto. Adicione a seguinte dependência ao arquivo pubspec.yaml:

dependencies:
  # ...
  firebase_in_app_messaging: ^0.4.0
  # ...

Criar uma mensagem no console do Firebase

Agora que você adicionou o FIAM ao app, vamos criar uma mensagem que será acionada quando o app for aberto pela primeira vez.

Para escrever sua primeira mensagem:

Na seção Engajamento do Console do Firebase, clique em Mensagens no app.
Clique em Criar sua primeira campanha no painel "Mensagens no app".

Vamos criar uma mensagem modal básica para garantir que a integração esteja funcionando. Personalize a mensagem como quiser. Você pode adicionar imagens, botões ou mudar as cores.

Não se esqueça de segmentar o app que você quer testar. Dependendo do caminho de integração que você está seguindo, é possível que você tenha iOS, Android ou ambos.

Queremos garantir que a mensagem seja acionada quando o app for aberto. Portanto, a configuração de programação padrão vai funcionar aqui.

Depois de agendar, podemos publicar a mensagem. Clique em "Analisar". Você vai ver algo parecido com isto:

Ver a mensagem no app

Agora, desinstale e reinstale o app. A mensagem criada vai aparecer ao abrir o app. Parabéns, você acabou de enviar sua primeira mensagem no app! Na próxima etapa, você vai aprender a adicionar um evento de análise para acionar uma mensagem no app com base nas ações dos usuários.

6. Integrar o Firebase Analytics para acionamento avançado de mensagens

Integrar o Firebase Analytics ao seu app

Para entender como os usuários interagem com nosso app e acionar uma mensagem no app com base nas ações deles, vamos adicionar um evento do Google Analytics quando um usuário clicar em um restaurante.

Adicione a dependência do Firebase Analytics ao Flutter em pubspec.yaml

dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...

Importar análises para home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

Adicione uma instância do Firebase Analytics à classe HomePage em home_page.dart

class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

Disparar um evento do Google Analytics quando o usuário clicar em um card de restaurante no home_page.dart

onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

Edite sua mensagem para ser acionada no evento do Google Analytics

Agora que temos um evento "click_restaurant", vamos acionar a mensagem no app com base nele, em vez de quando o usuário abre o app.

No console do Firebase, volte para "Mensagem no app" e edite sua campanha atual.

Agora, mude a seção de programação para acionar a mensagem do novo evento.

Depois disso, podemos publicar as mudanças clicando no botão "Revisar".

Teste o gatilho no app

Agora você pode executar o app com

flutter run

Ao clicar em um restaurante, você vai ver a mensagem no app.

7. Criar uma campanha FIAM+ABT

Comece com uma meta

Nosso app Friendlyeats já está ótimo, mas para ser útil, precisamos de algumas avaliações. Essas informações serão fornecidas pelos usuários do Friendlyeats. Por isso, vamos encontrar uma maneira de incentivar os usuários a deixar avaliações.

Primeiro, vamos definir nosso evento de conversão

Como queremos saber se os usuários estão avaliando restaurantes, vamos adicionar um evento do Google Analytics para medir esse comportamento.

Importe o Firebase Analytics como antes e adicione uma instância do Analytics à RestaurantPage em restaurant_page.dart.

class RestaurantPage extends StatefulWidget {
  static const route = '/restaurant';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  final String _restaurantId;
  RestaurantPage({Key key, @required String restaurantId})
      : _restaurantId = restaurantId,
        super(key: key);
  @override
  _RestaurantPageState createState() =>
      _RestaurantPageState(restaurantId: _restaurantId);
}

Agora, vamos acionar um evento em _onCreateReviewPressed quando salvarmos uma avaliação em restaurant_page.dart.

 if (newReview != null) {
   // Log successful review
   await RestaurantPage.analytics.logEvent(name: 'review_success');
   // Save the review
   return data.addReview(restaurantId: _restaurant.id, review: newReview);
 }

Configurar o teste A/B no console do Firebase

Agora que sabemos como criar campanhas de mensagens no app, é hora de considerar que tipo de comportamento queremos incentivar no nosso app com essas campanhas. Para o FriendlyEats, gostaríamos que mais pessoas deixassem avaliações, o que tornaria o app mais útil. Há algumas maneiras de incentivar isso usando mensagens no app. Uma delas é uma mensagem simples no app que informa ao usuário que ele deve avaliar o restaurante para ajudar a melhorar o app FriendlyEats. Outra maneira é usar uma mensagem no app para oferecer algum tipo de incentivo para fornecer uma avaliação, como um cupom ou código de desconto para um determinado restaurante.

As duas abordagens podem aumentar a frequência com que os usuários avaliam restaurantes no FriendlyEats, e parece que oferecer um cupom pode ter um impacto ainda maior nesse caso. Mas qual a probabilidade de os usuários escreverem uma avaliação se receberem esse cupom? Vale a pena o custo do cupom? Para determinar isso, vamos fazer um experimento de mensagens no app. Podemos usar o Teste A/B do Firebase para mostrar aleatoriamente uma das nossas mensagens no app aos usuários e medir o efeito disso no comportamento deles, como um ensaio clínico. O melhor de tudo é que isso pode ser feito completamente pelo console do Firebase, sem necessidade de código.

Para criar seu primeiro experimento de mensagens no app:

Na seção Engajamento do console do Firebase, clique em Teste A/B.
Clique em Criar experimento e selecione Mensagens no app. Isso vai abrir o criador de experimentos mostrado abaixo.

Dê um nome e uma descrição opcional ao experimento.

A próxima etapa é criar as diferentes mensagens no app que você vai enviar aos usuários no experimento. A primeira mensagem no app que vamos criar é a "de base", ou seja, o controle do nosso experimento. Podemos usar esta mensagem simples: "Por favor, deixe uma avaliação".

Agora que temos uma referência, vamos criar uma variante, a mensagem no app que oferece aos usuários um código de cupom para incentivar a deixar uma avaliação. Isso não fica totalmente visível na prévia abaixo, mas o título da mensagem é "Pegue um cupom, deixe uma avaliação!", e o corpo da mensagem é "Na próxima vez que você estiver no Burrito Cafe, use o código do cupom FRIENDLYEATS-15 no pagamento para ter 15% de desconto no seu pedido. E não se esqueça de deixar uma avaliação depois!". Esperamos que isso inspire alguns usuários a conhecer o Burrito Cafe.

Na próxima etapa, vamos segmentar nosso app e definir a exposição. Essa é a porcentagem de usuários qualificados (que atendem às condições de segmentação/acionamento) que vão receber uma das mensagens do experimento. Podemos definir isso como 100% para este exemplo, já que queremos que todos os usuários vejam o valor de referência ou a variante do cupom. Se você quiser ter um grupo de controle que não receba nenhuma mensagem no app, reduza essa porcentagem de exposição.

Em seguida, você vai definir algumas metas para o experimento. Esse é o resultado do experimento que queremos medir. Vamos definir isso como o evento do Google Analytics review_success que definimos na seção anterior, já que queremos ver o impacto das nossas diferentes mensagens no app nos usuários que deixam avaliações de restaurantes.
Para o agendamento, vamos deixar a campanha começar imediatamente e definir click_restaurant como a condição de ativação. Assim, os usuários vão ver uma das duas mensagens no app quando clicarem em um restaurante.

Agora, basta revisar o experimento e clicar em Iniciar experimento. Depois, é só esperar os dados do experimento chegarem.

Confira a coleta de dados em tempo real

Agora que iniciamos nosso experimento, os usuários do FriendlyEats vão ver aleatoriamente uma das duas mensagens no app que criamos quando clicarem em um restaurante: a mensagem de linha de base ou a mensagem de variante. Isso vai dividir nossos usuários em dois grupos, com base na mensagem que eles viram. Em seguida, podemos consultar o console do Firebase (novamente na seção "Teste A/B") para comparar os dados de análise em tempo real dos dois grupos. Pode levar algum tempo para os dados chegarem, já que precisamos esperar que os usuários vejam as mensagens no app e ajam de acordo. Confira como seus resultados podem ficar depois de ter dados suficientes:

Nesse caso, a variante melhorou significativamente em relação ao valor de referência. Por isso, podemos selecionar Lançar variante, que vai lançar a mensagem no app com o cupom para todos os usuários.

8. Parabéns

Parabéns! Você criou e executou seu primeiro experimento de mensagens no app. Agora você pode fazer um experimento no seu próprio app e usar os resultados para tornar suas campanhas de mensagens no app mais eficazes.

Qual é a próxima etapa?

Confira alguns desses codelabs...

Documentos de referência

Criar experimentos de mensagens no app com o Teste A/B