Esta página foi traduzida pela API Cloud Translation.

Seu primeiro experimento de Mensagens no app

1. Introdução

Gols

Neste codelab, você vai criar um experimento de mensagens no app para um app multiplataforma de recomendação de restaurantes com tecnologia do Flutter (link em inglês) e do Cloud Firestore.

Depois disso, você poderá criar e implementar experimentos de mensagens no app para aumentar de maneira efetiva o engajamento dos usuários em qualquer app iOS ou Android, com 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 criar um experimento de mensagens no app e implementá-lo no seu 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 engajar os usuários ativos do seu aplicativo por meio do envio de mensagens direcionadas e contextuais que incentivam os usuários a concluir 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 (ABT) do Firebase ajuda você a otimizar a experiência no seu app, facilitando a execução, a análise e o escalonamento de experimentos de produtos e de marketing. Com esse recurso, você pode testar alterações na interface, nos recursos ou nas campanhas de engajamento do app para saber se elas estão afetando suas métricas principais (como receita e retenção) antes do lançamento geral.

O que é necessário

Se você não conhece muito 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 seu computador e configurado para o modo de desenvolvedor.
O iOS Simulator: Exige a instalação de ferramentas do Xcode.
O Android Emulator. Isso requer configuração no Android Studio.

Além do indicado acima, você também precisará de:

Um navegador da sua escolha, como o Chrome
Um ambiente de desenvolvimento integrado ou editor de texto de sua escolha, 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 (link em inglês), ou a versão Beta, se você gosta de morar na borda.
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 fazer isso.

2. Etapas da 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 deste 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 desse repositório contêm o código para criar o app FriendlyEats, conforme mostrado no codelab do Flutter multiplataforma do Firestore. Para os fins deste codelab, removemos a integração da Web nessa ramificação.

Importar o app inicial

Abra ou importe o diretório codelab-fiam-abt no seu ambiente de desenvolvimento integrado preferido. Esse 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.

criar um projeto do Firebase

No Console do Firebase, clique em Adicionar projeto e nomeie o projeto como FriendlyEats. Lembre-se do ID do seu projeto do Firebase ou clique no ícone Editar para definir 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, clique no nome do projeto para acessar o console.

Agora vamos configurar e ativar os serviços necessários com o console do Firebase.

Ativar a autenticação anônima

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

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 app faça login silenciosamente dos usuários quando eles acessarem o app. Para saber mais, consulte a documentação de autenticação anônima para Android e iOS.

Ativar o Cloud Firestore

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

Para ativar o Cloud Firestore:

Na barra de navegação à esquerda do Console do Firebase, clique em Firestore.
Clique em Criar banco de dados no painel do Cloud Firestore.

Selecione a opção Iniciar no modo de teste, clique em Próxima depois de ler a exoneração de responsabilidade sobre as regras de segurança e selecione Ativar.

O modo de teste garante que você possa gravar livremente no banco de dados durante o desenvolvimento. Você vai tornar seu banco de dados mais seguro posteriormente neste codelab.

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

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

Registrar 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 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 iOS

No Console do Firebase, selecione Configurações do projeto na parte superior da barra de navegação à esquerda e clique no botão do 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. Para conseguir o ID do pacote, siga 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 no Runner de nível superior no painel esquerdo para mostrar a guia General no painel direito, conforme mostrado. Copie o valor de Bundle Identifier.

Volte para a caixa de diálogo do Firebase, cole o ID do pacote 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 a subpasta Runner também chamada Runner (mostrada na imagem anterior).
Arraste o arquivo GoogleService-Info.plist que você acabou de transferir por download 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 o Android

No Console do Firebase, selecione Configurações do projeto na parte superior 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 Android. Para receber o nome do pacote, siga 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 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 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 Flutter e mova o arquivo google-services.json que você acabou de salvar para o diretório android/app.
Volte ao Console do Firebase, pule as etapas restantes e volte à página principal.
Toda a configuração do Gradle já foi verificada. Se o app ainda estiver em execução, feche e recrie-o para permitir que o Gradle instale as dependências.

Você concluiu a configuração do 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 um emulador disponíveis).

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

flutter devices

Dependendo dos dispositivos disponíveis, a saída do comando anterior vai ser parecida com esta:

Agora, execute o app localmente com o seguinte comando:

flutter run

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

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

5. Criar e testar sua primeira mensagem

Integrar o recurso Mensagens no app do Firebase ao seu app

A integração básica do recurso Mensagens no app não tem código. Tudo o que você precisa fazer é adicionar a dependência e está tudo pronto para começar. 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 seu aplicativo, vamos escrever uma mensagem que será acionada quando o aplicativo 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 Crie sua primeira campanha no painel "Mensagens no app".

Vamos escrever uma mensagem modal básica para garantir que a integração esteja funcionando. Fique à vontade para personalizar a mensagem como quiser. É possível adicionar imagens, botões ou alterar cores.

Segmente o app que você quer usar no teste, dependendo do caminho de integração que você está seguindo, seja no iOS, no Android ou em ambos.

Queremos garantir que o acionamento da mensagem seja feito quando o app for aberto, para que a configuração de programação padrão funcione aqui.

Assim que o agendamento for concluído, poderemos publicar a mensagem. Clique em "Analisar" para ver algo parecido com o seguinte

Conferir a mensagem no app

Agora, desinstale e reinstale o app. Você verá a mensagem criada quando ele for aberto. 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 Firebase Analytics 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, agora vamos adicionar um evento do Analytics que mostra quando um usuário clica em um restaurante.

Adicionar a dependência do Firebase Analytics ao Flutter no 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();
}

Disparar um evento de análise quando o usuário clicar no card de um 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 Analytics

Agora que temos um evento "click_restaurante", vamos acionar nossa mensagem no app com base nele, e não quando o usuário abre o app.

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

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

A partir daí, podemos publicar as alterações clicando no botão "Revisar"

Testar o gatilho no app

Neste ponto, você conseguirá executar seu aplicativo com

flutter run

Quando você clicar em um restaurante, verá sua mensagem no app

7. Criar uma campanha FIAM+ABT

Começar com uma meta

Nosso app Friendlyeats já está ótimo, mas, para que seja útil, precisamos de algumas revisões. Elas serão coletadas de usuários do Friendlyeats, então vamos encontrar uma maneira de incentivá-los a deixar comentários.

Primeiro, vamos definir nosso evento de conversão

Como queremos saber se os usuários estão avaliando restaurantes, podemos adicionar um evento de análise para medir esse comportamento.

Importe o Firebase Analytics como antes e adicione uma instância do Analytics ao 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 no _onCreateReviewPressed quando salvarmos uma avaliação no 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 um teste A/B no Console do Firebase

Agora que sabemos como criar campanhas de mensagens no app, é hora de pensar sobre o tipo de comportamento que queremos incentivar no app por meio delas. Para a FriendlyEats, queremos que mais pessoas deixem avaliações, o que tornaria o app mais útil. Há algumas maneiras de incentivar isso usando mensagens no app. Uma delas é enviar uma mensagem simples no app apenas informando ao usuário que ele precisa avaliar o restaurante para ajudar a melhorar o app FriendlyEats. Outra maneira é usar uma mensagem no app para oferecer algum tipo de incentivo por uma avaliação, como um cupom ou código de desconto para um restaurante específico.

Ambas as abordagens podem aumentar a frequência com que os usuários fornecem avaliações sobre restaurantes no FriendlyEats, e parece que fornecer um cupom poderia ter um impacto ainda mais forte nesse caso. Mas qual seria a probabilidade de os usuários escreverem uma avaliação se oferecer 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 exibir aleatoriamente uma das nossas mensagens no app para os usuários e medir o efeito que isso tem no comportamento do usuário, como em um ensaio clínico. O melhor de tudo é que isso pode ser feito no Console do Firebase, sem necessidade de códigos.

Para criar seu primeiro experimento de mensagens no app, faça o seguinte:

Na seção Engajamento do Console do Firebase, clique em Teste A/B.
Clique em Criar experimento e selecione que você quer testar com as Mensagens no app. Isso levará você ao Editor de experimentos mostrado abaixo.

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

A próxima etapa é onde você vai escrever as diferentes mensagens no app que serão enviadas aos usuários do experimento. A primeira mensagem no app que vamos escrever é a "linha de base" ou o controle do nosso experimento. Podemos transformar esta mensagem em uma mensagem simples, como "faça uma análise":

Agora que temos uma linha de base, vamos compor uma variante, a mensagem no app que oferece aos usuários um código de cupom para incentivá-los 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, faça uma avaliação!" e o corpo da mensagem é "Na próxima vez que estiver no Burrito Cafe, use o código do cupom FRIENDLYEATS-15 no check-out para receber 15% de desconto no seu pedido. E não se esqueça de deixar uma avaliação depois!". Com sorte, isso vai inspirar alguns usuários a conferir o Burrito Cafe!

Na próxima etapa, segmentaremos o app e definiremos 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 apenas defini-lo como 100% neste exemplo, já que gostaríamos que todos os usuários vissem a linha de base ou a variante do cupom. Se quiser ter um grupo de controle em que nenhuma mensagem no app seja exibida, reduza essa porcentagem de exposição.

Em seguida, defina algumas metas para a experiência. Esse é o resultado do experimento que queremos medir. Vamos definir esse evento como o review_success do Analytics definido na seção anterior, porque queremos saber o impacto das diferentes mensagens no app sobre os usuários que deixam avaliações sobre 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 vejam uma das duas mensagens no app quando clicarem em um restaurante.

Agora só falta revisar nosso experimento e clicar em Iniciar experimento. Então, podemos esperar que os dados do nosso experimento cheguem!

Conferir a coleta de dados em tempo real

Agora que começamos nosso experimento, os usuários do FriendlyEats vão encontrar aleatoriamente uma das duas mensagens no app que escrevemos quando clicarem em um restaurante: a mensagem do valor de referência ou a mensagem da 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. Os dados vão levar um tempo para chegar, porque precisamos esperar que os usuários vejam as mensagens no app e tomem as medidas necessárias. Veja como seriam seus resultados depois de dados suficientes:

Nesse caso, a variante melhorou significativamente o valor de referência, então poderíamos selecionar Implantar variante para lançar a mensagem no app com o cupom para todos os usuários.

8. Parabéns

Parabéns! Você criou e realizou seu primeiro experimento de mensagens no app. Agora você pode fazer um experimento no seu próprio app e usar os resultados para melhorar a eficiência das suas campanhas de mensagens no app.

Qual é a próxima etapa?

Confira alguns desses codelabs...

Documentos de referência

Criar experimentos do recurso Mensagens no app com o Teste A/B