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ção de restaurantes para várias plataformas com tecnologia do Flutter (link em inglês) e do Cloud Firestore.

Ao terminar, você vai poder projetar e implementar experimentos de mensagens no app para aumentar o engajamento dos usuários em qualquer app iOS ou Android, escrevendo uma quantidade mínima de código.

O que você aprenderá

Como usar o recurso Mensagens no app do Firebase (FIAM) em um app Flutter
Como personalizar a aparência das mensagens no app
Como projetar 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 recurso Mensagens no app do Firebase (FIAM, na sigla em inglês) ajuda você a engajar os usuários ativos do seu app enviando mensagens direcionadas e contextuais que incentivam a concluir ações importantes, como passar de fase em um jogo, comprar um item ou assinar um conteúdo.

Teste A/B do Firebase

Com a tecnologia do Google Optimize, o Teste A/B do Firebase (ABT) ajuda você a otimizar a experiência no app, facilitando a execução, a análise e o escalonamento de experimentos de produtos e de 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 funcionando conforme o esperado em relação às suas métricas principais (como receita e retenção) antes que elas sejam implementadas completamente.

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 a instalação de ferramentas do Xcode).
O Android Emulator. (requer configuração no Android Studio).

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

Um navegador de 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. O VS Code é recomendado para uso com o Flutter.
A versão estável mais recente do Flutter (ou Beta, se você gosta de viver na vanguarda).
Uma Conta do Google, como uma conta do Gmail, para criar e gerenciar seu projeto do Firebase.
O código de exemplo 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 no 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 completa na pasta done. As outras ramificações neste repositório contêm o código para criar o app FriendlyEats, conforme mostrado no codelab do Flutter para o Firestore em várias plataformas. 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 criar um experimento de mensagens no app para os usuários.

Criar um projeto do Firebase

No Console do Firebase, clique em Adicionar projeto e nomeie o projeto como FriendlyEats. Lembre-se do ID do projeto do Firebase ou clique no ícone Editar para usar o ID que preferir.
Verifique se o Google Analytics está ativado para o projeto e clique em Continuar.
Clique em Criar projeto.

Parabéns! Você acabou de criar seu primeiro projeto do Firebase. Agora, você pode clicar no nome do projeto para entrar no console.

Em seguida, 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:

No console do Firebase, localize Autenticação na barra de navegação à esquerda.
Clique em Autenticação e 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.

Ativar o Login anônimo permite que o aplicativo faça login dos usuários silenciosamente quando eles acessam 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 e classificações de restaurantes.

Confira 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 suporte a 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 de cima da barra de navegação à esquerda e clique no botão "iOS" em Seus apps na página Geral.

A seguinte caixa de diálogo vai aparecer:

O valor importante que será fornecido é o ID do pacote do iOS. Você encontrará 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 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 a 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ê 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 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 do 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 encontrar sua cópia do FriendlyEats, conectada ao seu projeto do Firebase.

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

5. Criar e testar sua primeira mensagem

Integrar o recurso Mensagens no app do Firebase no seu app

A integração básica da In-App Messaging é totalmente sem 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
  # ...

Escrever 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. Você pode personalizar a mensagem como quiser, adicionando imagens, botões ou mudando as cores.

Segmente o app que você quer testar. Dependendo do caminho de integração que você está seguindo, pode ser 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 que a programação for concluída, poderemos publicar a mensagem. Clique em "Revisão" e você verá algo como o seguinte:

Conferir a mensagem no app

Agora, desinstale e reinstale o app. A mensagem que você criou vai aparecer na tela de abertura. 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 acionar mensagens avançadas

Integrar o Google Analytics para Firebase ao seu app

Para entender como os usuários estão interagindo 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.

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

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

Importar análises em home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

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

Acionar um evento de análise quando o usuário clicar em um card de restaurante em home_page.dart

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

Edite a mensagem para acionar o evento de análise

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

No Console do Firebase, volte para "Mensagens no app" e edite sua campanha atual.

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

A partir daí, podemos publicar nossas mudanças clicando no botão "Revisar".

Testar o acionador no app

Agora você pode executar o app com

flutter run

Ao clicar em um restaurante, a mensagem no app vai aparecer.

7. Criar uma campanha FIAM+ABT

Comece com uma meta

O app Friendlyeats já está ótimo, mas, para ser útil, precisamos de algumas avaliações. Elas serão enviadas 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 de análise para medir esse comportamento.

Importe o Firebase Analytics como antes e adicione uma instância dele a 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 o tipo de comportamento que queremos incentivar no 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 precisa avaliar o restaurante para ajudar a melhorar o app FriendlyEats. Outra forma é usar uma mensagem no app para oferecer algum tipo de incentivo para enviar uma avaliação, como um cupom ou código de desconto para um determinado restaurante.

Ambas as 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, quanto mais provável é que o fornecimento desse cupom faça com que os usuários escrevam uma avaliação? O custo do cupom vale a pena? Para determinar isso, vamos realizar 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 do usuário, como em um teste clínico. E o melhor de tudo é que isso pode ser feito totalmente pelo console do Firebase, sem precisar 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 levar você ao compositor de experimentos mostrado abaixo.

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

Na próxima etapa, você vai compor as diferentes mensagens no app que serão enviadas aos usuários no experimento. A primeira mensagem no app que vamos compor é a "de referência", ou o controle do nosso experimento. Podemos fazer uma mensagem simples "faça 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 está totalmente visível na visualização abaixo, mas o título da mensagem é "Receba um cupom e deixe uma avaliação!", e o corpo da mensagem é "Na próxima vez que você estiver no Burrito Cafe, use o código de cupom FRIENDLYEATS-15 na finalização da compra para receber 15% de desconto no pedido. E não se esqueça de deixar uma avaliação depois!". Esperamos que isso inspire alguns usuários a conferir o Burrito Cafe!

Na próxima etapa, vamos segmentar nosso app e definir a exposição. Essa é a porcentagem de usuários qualificados (aqueles que atendem às condições de segmentação/acionamento) que vão receber uma das mensagens no experimento. Podemos definir esse valor como 100% para este exemplo, já que queremos que todos os usuários vejam a variante de referência ou de cupom. Se você quiser ter um grupo de controle que não recebe 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 de análise review_success definido na seção anterior, porque queremos saber o impacto das diferentes mensagens no app para os usuários que deixam avaliações de restaurantes.
Para a programação, vamos permitir que a campanha comece imediatamente e definir click_restaurant como a condição de acionamento, para que os usuários recebam uma das duas mensagens no app ao clicarem em um restaurante.

Agora, tudo o que resta é revisar o experimento e clicar em Iniciar experimento. Depois, é só aguardar os dados do experimento.

Confira a coleta de dados em tempo real

Agora que começamos o experimento, os usuários do FriendlyEats vão receber aleatoriamente uma das duas mensagens no app que criamos quando clicarem em um restaurante: a mensagem de referência ou a variante. Isso vai dividir nossos usuários em dois grupos, com base na mensagem que eles viram. 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. Os dados vão demorar um pouco para chegar, porque precisamos esperar que os usuários vejam as mensagens no app e façam o que for necessário. Confira como seus resultados podem ficar depois de coletar dados suficientes:

Nesse caso, a variante melhorou significativamente em relação ao valor de referência, então podemos selecionar Variante de lançamento, que lançaria 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 realizar um experimento no seu próprio app e usar os resultados para tornar as 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 testes A/B