Lançamento de campanhas do Google Ads com eventos personalizados do Google Analytics e o Flutter

1. Introdução

Última atualização: 25/01/2021

O que você vai criar

Neste codelab, você vai aprender a implementar eventos personalizados com o GAPF e a lançar campanhas de ação pelo app do Google Ads para Flutter.

Vamos usar o app padrão do Flutter com um widget de contador simples. Anunciaremos nosso aplicativo para usuários em potencial, que provavelmente clicarão no widget de contador.

O que você aprenderá

• Como inicializar o GA4F (Google Analytics para Firebase) no Flutter.
• Como criar eventos e parâmetros personalizados
• Como importar eventos do Firebase para o Google Ads.
• Como lançar campanhas de ação com eventos personalizados

O que é necessário

• Android Studio 3.6 ou versão mais recente.
• Xcode (para compatibilidade com iOS).
• Conta do Firebase.
• Conta do Google Ads

2. Iniciar um novo projeto do Flutter

Criar um app do Flutter simples com um modelo. Você vai modificar esse app inicial para este codelab.

Inicie o Android Studio.

Observação: caso você não encontre a opção New Flutter Project no ambiente de desenvolvimento integrado, verifique se os plug-ins para Flutter e Dart estão instalados (link em inglês).

1. Se não tiver projetos abertos, selecione Start a new Flutter ap (iniciar um novo app do Flutter) na página inicial. Caso contrário, selecione Arquivo > Novo > Novo projeto Flutter.
2. Selecione Flutter Application como o tipo de projeto e clique em Next.
3. Verifique se o caminho do SDK do Flutter está especificando o local do SDK. Selecione Install SDK se o campo de texto estiver em branco.
4. Digite o nome do projeto e clique em Next.
5. Use o nome de pacote padrão sugerido pelo Android Studio e clique em Next.
6. Clique em Finish.
7. Aguarde o Android Studio instalar o SDK e criar o projeto.

3. Criar e configurar um projeto do Firebase

Para começar a usar o Firebase, será necessário criar e configurar um projeto do Firebase.

Criar um projeto do Firebase

1. Faça login no Firebase.

No Console do Firebase, clique em Adicionar projeto (ou Criar um projeto) e nomeie seu projeto como Firebase-Flutter-Ads ou o nome que preferir.

2. Clique nas opções de criação do projeto. Se solicitado, aceite os termos do Firebase. Você precisa ativar o Google Analytics para esse projeto, porque são necessários eventos dele para rastrear os eventos de ação e analisar as conversões.

Para saber mais sobre os projetos do Firebase, consulte Entender os projetos do Firebase.

4. Configuração do Firebase específica para a plataforma (Android)

Configurar para Android

1. No Console do Firebase, selecione Visão geral do projeto na navegação à esquerda e clique no botão Android em "Comece adicionando o Firebase ao seu aplicativo"

A caixa de diálogo será exibida na tela a seguir.

2. O valor importante a ser fornecido é o nome do pacote Android, que você buscará usando a próxima etapa.

Dica: consulte Definir o ID do aplicativo para ver mais informações sobre os IDs de aplicativos e pacotes.

3. No diretório do app do Flutter, abra o arquivo android/app/src/main/AndroidManifest.xml.
4. 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.
5. Na caixa de diálogo do Firebase, cole o nome do pacote no campo Android package name.
6. Não é necessário ter a chave SHA-1 aqui, a menos que você pretenda usar o Login do Google ou os Firebase Dynamic Links, que não fazem parte deste codelab. Se você planeja importar dados do in_app_purchase no Google Play, precisará definir a chave posteriormente.
7. Clique em Registrar app.
8. Ainda no Firebase, siga as instruções para fazer o download do arquivo de configuração google-services.json.

9. 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.
10. No Console do Firebase, pule as etapas restantes e volte à página principal.
11. Por fim, você precisa do plug-in do Google Services para Gradle para ler o arquivo google-services.json gerado pelo Firebase.
12. No ambiente de desenvolvimento integrado ou no editor, abra o android/app/build.gradle e adicione a seguinte linha como a última do arquivo:

apply plugin: 'com.google.gms.google-services'

13. Abra o android/build.gradle e adicione uma nova dependência dentro da tag buildscript:

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

14. Caso o 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. Para iOS, recomendamos consultar este codelab ( Introdução ao Firebase para Flutter).

5. Configurar o Firebase Analytics no Flutter

Nesta etapa, você começará a usar o pacote do Firebase Analytics chamado firebase_analytics, que contém recursos do Firebase Analytics.

O arquivo pubspec gerencia os recursos para um app do Flutter. No pubspec.yaml, anexe firebase_analytics: ^6.2.0 (firebase_analytics 6.2.0 ou mais recente) à lista de dependências:

dependencies: 
   flutter: 
      sdk: flutter 
   cupertino_icons: ^0.1.2 
   firebase_analytics: ^6.2.0   # add this line

Com o pubspec na visualização de edição do Android Studio, clique em Packages get. O pacote será extraído para seu projeto. Você verá o seguinte no console:

flutter packages get 
Running "flutter packages get" in startup_namer... 
Process finished with exit code 0

Executar Pub get também gera automaticamente o arquivo pubspec.lock, com uma lista de todos os pacotes extraídos para o projeto e os respectivos números de versão.

Cuidado:para versões específicas do Firebase, java.lang.IllegalArgumentException: Service not registered é exibido ao inicializar a classe FirebaseAnalytics pela primeira vez. Consulte o problema 1662 do GitHub (link em inglês)..

No lib/main.dart, importe o novo pacote:

import 'package:firebase_analytics/firebase_analytics.dart';

Na classe MyApp, inicie o objeto FirebaseAnalytics chamando o construtor.

class MyApp extends StatelessWidget {
 static FirebaseAnalytics analytics = FirebaseAnalytics();
   ...
}

Agora está tudo pronto para disparar alguns logs de eventos personalizados.

6. Registrar eventos personalizados com o Firebase Analytics

Se você gerar um novo modelo no app Flutter, verá uma variável _counter e o método _incrementCounter() dentro da classe State padrão. Agora, você quer registrar eventos personalizados quando o botão de incremento recebe mais de cinco cliques de usuários muito entusiasmados. Mais tarde, lançaremos uma campanha para apps para atrair possíveis usuários entusiasmados.

Primeiro, queremos transmitir os objetos analíticos que inicializamos para o widget Stateful. Para começar, adicione um parâmetro de análise ao construtor MyHomePage.

MyHomePage({Key key, this.title, this.analytics}) : super(key: key);

Um parâmetro analytics também será adicionado ao chamar o construtor.

home: MyHomePage(
   title: 'Flutter Demo Home Page',
   analytics: analytics,
),

Agora, é possível registrar eventos facilmente com o método logEvent(). Adicione o método e incremente a variável _counter.

void _incrementCounter() {
 setState(() {
   _counter++;

   //add this
   if(_counter > 5) { 
     widget.analytics.logEvent(name: "clicked_counter"); 
   }

 });
}

Agora seu app está pronto para disparar o log de eventos personalizados.

Também é possível usar métodos pré-compilados para disparar eventos.

Agora está tudo pronto. No Android Studio, execute "main.dart".

Opcional: como enviar informações complementares ao Firebase Analytics usando parâmetros

É possível enviar mais informações usando parâmetros. Parâmetros personalizados podem ser registrados nos relatórios do Analytics. Também podem ser usados como filtros nas definições de público-alvo que podem ser aplicadas a cada relatório. Caso seu app esteja vinculado a um projeto do BigQuery, os parâmetros personalizados também serão encontrados no BigQuery. Consulte BigQuery Export para Firebase.

Aqui, o valor _counter é definido como um parâmetro.

void _incrementCounter() {
 setState(() {
   _counter++;

   if(_counter > 5) {
     widget.analytics.logEvent(name: "clicked_counter", parameters: {'count' : _counter});
   }
 });
}

Como verificar e depurar eventos

É possível visualizar os eventos registrados no Console do Firebase em vários momentos. Basta clicar na guia Eventos da seção "Google Analytics" do Console do Firebase. Também é possível conferir os valores no evento clicked_counter clicando nele.

Para marcar clicked_counter como uma conversão, deslize a chave Marcar como conversão para a direita.

Se o evento estiver na guia "Conversão", ele foi marcado como uma conversão. O Google Ads agora poderá importar esse evento do Firebase.

Para fins de depuração, use o Firebase DebugView. Para ver mais informações, consulte Depurar eventos.

7. Como importar eventos do Analytics no Google Ads

Depois de concluir a configuração do Firebase Flutter, estará tudo pronto para você lançar as campanhas para apps com eventos de ação. Comece vinculando o Firebase ao Google Ads. Quando você vincula o Firebase ao Google Ads,as campanhas para apps podem importar eventos do Firebase. Esse processo também ajuda o Google Ads a otimizar as campanhas para apps, permitindo que ele saiba mais sobre os públicos-alvo.

1. Clique no botão ao lado de Visão geral do projeto para acessar as Configurações do Firebase.
2. Na guia Integrações, você vai encontrar o Google Ads e um botão Vincular. Clique em Vincular e em Continuar.

3. Selecione a conta do Google Ads.

Atenção:se o evento de destino não for marcado como um evento de conversão, o Google Ads não poderá importá-lo. Verifique se ele está marcado corretamente como uma conversão.

A parte relacionada ao Firebase já foi concluída.

Acesse o Google Ads.

1. Faça login e acesse Ferramentas e Configurações > Medição > Conversões para importar eventos personalizados como conversões.
2. Clique no botão + para adicionar novas ações de conversão.

3. Escolha Propriedades do Google Analytics 4 (Firebase) e clique em Continuar.

4. Você verá todos os eventos do Analytics que foram marcados como conversões. Encontre o evento clicked_counter que implementamos antes.

5. Marque a ação, clique em Importar e em Continuar.

Depois de definir o clicked_counter como uma ação de conversão, você pode iniciar campanhas de ação voltadas para usuários que provavelmente vão disparar eventos do clicked_counter mais de cinco vezes.

8. Como lançar campanhas de ação para apps com eventos importados

Importante: para lançar uma campanha para apps, é necessário ter um app em fase de produção no Google Play. Mas, se você ainda não estiver pronto para publicação, pule esta etapa por enquanto.

6. Vá para a guia "Campanha" da conta atual e inicie uma nova campanha clicando no botão +. Clique em [Nova campanha] e em Continuar.
7. Lance uma campanha de promoção de app com a opção Instalações de apps.

8. Encontre seu app digitando o nome dele, do pacote ou do editor.
9. Na seção Lances, selecione Ações no app no menu suspenso.
10. Encontre seu evento personalizado na lista fornecida. Defina o Custo por ação desejado e preencha as opções adicionais.

11. Conclua as especificações da campanha.

9. Parabéns

Parabéns! Você integrou o Firebase e o Google Ads. Assim, você poderá melhorar o desempenho da sua campanha com eventos importados do Firebase.

Você aprendeu

• Como configurar o Firebase Analytics para o Flutter.
• Como registrar eventos personalizados com o Firebase Analytics no app Flutter.
• Como importar eventos e usá-los em campanhas de ação.