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

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

O que você criará

Neste codelab, você aprenderá a implementar eventos personalizados com o GA4F e a lançar campanhas de ação com o Google Ads para apps do Flutter.

Usaremos o app do Flutter padrão com um widget de contagem simples. Anunciaremos o app para usuários em potencial que sejam propensos a clicar no widget.

bdbf1fc3cbf49ac7.png

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.

Crie um app do Flutter simples usando um modelo. Esse app inicial será modificado neste codelab.

Inicie o Android Studio.

  1. Se não houver projetos abertos, selecione "Start a new Flutter app" na página inicial. Se houver, selecione File > New > New Flutter Project.
  2. Escolha "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. Insira 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.

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 um projeto" ou "Criar um projeto" e nomeie seu projeto do Firebase como Firebase-Flutter-Ads ou o nome que preferir.

e9a8e1b1c7c52125.png

  1. 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.

e58151a081f0628.png

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

3e5b8f1b6ca538c4.png

Configurar para Android

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

Você verá a caixa de diálogo mostrada na tela a seguir.

3b7d3b33d81fe8ea.png

  1. O valor importante a ser fornecido é o nome do pacote Android, que você buscará usando a próxima etapa.
  1. No diretório do app do Flutter, abra o arquivo android/app/src/main/AndroidManifest.xml.
  2. 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.
  3. Na caixa de diálogo do Firebase, cole o nome do pacote no campo Android package name.
  4. 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.
  5. Clique em Registrar app.
  6. Ainda no Firebase, siga as instruções para fazer o download do arquivo de configuração google-services.json.

52f08aa18c8d59d0.png

  1. 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.
  2. No Console do Firebase, pule as etapas restantes e volte à página principal.
  3. Por fim, você precisa do plug-in do Google Services para Gradle para ler o arquivo google-services.json gerado pelo Firebase.
  4. 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'
  1. 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'
   }
}
  1. 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, consulte o codelab Conheça o Firebase para Flutter.

Nesta etapa, você começará a usar o pacote 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

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

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

import 'package:firebase_analytics/firebase_analytics.dart';

Na classe MyApp, você iniciará o objeto FirebaseAnalytics chamando o construtor.

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

Agora você já pode disparar alguns logs de eventos personalizados.

Se um novo modelo fosse gerado no app do Flutter, a variável _counter e o método _incrementCounter() seriam exibidos dentro da classe State padrão. Nesta etapa, você registrará eventos personalizados quando o botão incremental receber mais de cinco cliques de determinados usuários interessados.

Mais adiante, lançaremos as campanhas para apps especialmente para atrair possíveis usuários interessados, que interagirão bastante com o app.

Em primeiro lugar, vamos transmitir os objetos de análise que iniciamos no widget com estado. Podemos começar adicionando um parâmetro analytics 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, você pode registrar eventos facilmente com o método logEvent(). Insira o método a seguir aumentando 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.

f0742c956977df1d.png

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

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

Também é possível enviar informações complementares com 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. Se o app estiver vinculado a um projeto do BigQuery, os parâmetros personalizados também serão encontrados no BigQuery. Consulte BigQuery Export para o 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 "Analytics" do Console do Firebase. Também é possível conferir os valores no evento clicked_counter clicando nele.

32b01a1412ab2ba5.png

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

e6b420a73db88f03.png

Veja se o evento realmente foi marcado como uma conversão. Se ele estiver na aba "Conversões", isso significa que ele foi confirmado como uma conversão. Ao marcar o evento como uma conversão, o Google Ads consegue importá-lo do Firebase.

Para fins de depuração, é possível usar o DebugView do Firebase. Para ver mais informações, consulte Depurar eventos.

Quando a configuração do Firebase-Flutter for concluída, você estará pronto para lançar campanhas para apps com eventos de ação. Primeiro, vincule o Firebase ao Google Ads. Quando isso é feito, 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. Acesse as configurações do Firebase clicando no botão ao lado de "Visão geral do projeto".
  2. Na guia "Integrações", você verá o Google Ads e o botão "Vincular". Clique em "Vincular" e depois em "Continuar".

b711bf2e94fa0895.png

  1. Selecione a conta do Google Ads.

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.

73cec8d2e80eab03.png

  1. Escolha as propriedades do Google Analytics 4 (Firebase) e clique em "Continuar".

4b1d8f6a712b2ac6.png

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

ba1bbe6b2924fac8.png

  1. Clique nele e clique no botão "Importar e continuar".

ab35e341dff32e48.png

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.

  1. Vá para a guia "Campanhas" da conta atual e inicie uma nova campanha clicando no botão +. Clique em [Nova campanha] e continue.
  2. Você lançará uma campanha de promoção de app com a opção "Apps - Instalações".

af98c44d1476558.png

  1. Encontre seu app digitando o nome dele, do pacote ou do editor.
  2. Na seção Lances, selecione "Ações no app" no menu suspenso.
  3. Você encontrará seu evento personalizado na lista exibida. Defina o custo por ação desejado e preencha as outras opções.

885956ad00592eb3.png

  1. Conclua as especificações da campanha.

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 do Flutter.
  • Como importar eventos e usá-los em campanhas de ação.