Rastrear eventos em um WebView com o Google Analytics para Firebase

1. Introdução

Última atualização:25 de fevereiro de 2022

O que você vai criar

Neste codelab, você vai aprender a encaminhar eventos de uma página da Web em um WebView para um código nativo para que o GA4F possa rastrear os eventos.

Vamos usar o app híbrido de exemplo do Android, que chama uma página da Web usando o WebView.

O que você aprenderá

• Como inicializar o GA4F (Google Analytics para Firebase) em um app híbrido
• Como criar eventos e parâmetros personalizados em uma página da Web
• Como encaminhar os eventos em uma página da Web em um WebView para um código nativo
• Como depurar
• Como importar eventos e usá-los em campanhas de ação.

O que é necessário

• Android Studio 3.6 ou versão mais recente.
• Conta do Firebase.

2. Etapas da configuração

Buscar o código

O guia oficial do Firebase fornece o exemplo de código no GitHub. Precisamos dele para este projeto.

Para começar, baixe o código e abra-o no ambiente de desenvolvimento de sua preferência. Vamos usar dois diretórios : android e web. O diretório "android" é para o app Android, e o diretório "web" é para uma página da Web que será chamada pelo app usando o WebView.

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 um projeto" ou "Criar um projeto" e nomeie seu projeto do Firebase como Webview-test-codelab 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 para Android

Configurar o Android no Console do Firebase

1. Na página inicial do Console do Firebase, clique no ícone do Android, como mostrado abaixo.

Ou acesse Visão geral do projeto na barra de navegação à esquerda e clique no botão Android em "Comece adicionando o Firebase ao seu aplicativo".

Em seguida, você verá a tela "Adicionar o Firebase ao seu app Android", como mostrado abaixo.

2. Você pode encontrar o nome do pacote Android (por exemplo, com.xxxx.myproject) em android/app/src/main/AndroidManifest.xml no diretório do app.

package="com.xxxx.myproject"

3. A chave SHA-1 não é necessária aqui. Essa chave é necessária apenas quando você quer usar o Login do Google ou os Firebase Dynamic Links ou importar dados de compras no app do Google Play, que não fazem parte do escopo deste codelab.
4. Clique em Registrar app.
5. Baixe o arquivo de configuração google-services.json no Console do Firebase e copie e cole esse arquivo no diretório android/app no projeto do app.
6. No Console do Firebase, pule as etapas restantes e volte à página principal.
7. Por fim, você precisa do plug-in do Google Services para Gradle para ler o arquivo google-services.json gerado pelo Firebase.
8. 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 android/build.gradle. Em seguida, 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 para Android.

5. Desenvolver uma interface da Web do Analytics na Web e registrar eventos personalizados

Para rastrear os eventos em um WebView com o Google Analytics, é necessário inserir o código no app da Web e no Android.

Nesta parte, vamos analisar qual código você precisa colocar na página da Web.

Primeiro, crie um arquivo JavaScript para usar em um arquivo HTML. No exemplo de código, o arquivo JS é nomeado como index.js. Você precisa criar a função "logEvent" para chamar "AnayticsWebInterface" para Android e "messageHander" para iOS, como no código abaixo.

E chame essa função onde você quer rastrear o evento no arquivo HTML, como mostrado abaixo.

Quando um evento é acionado no WebView no app Android, "window.AnalyticsWebInterface" é chamado e encaminha o evento para o código WebInterface no app.

6. Hospedar o diretório da Web para receber o URL da página da Web

Antes de chamar uma página da Web em um WebView no seu app, você precisa de um URL de página da Web. Há muitos métodos para hospedar páginas da Web. Neste codelab, vamos usar o serviço de hospedagem do Firebase apenas por conveniência.

• No seu terminal, insira o diretório da Web (por exemplo, cd web) e execute os comandos a seguir:
• npm install -g firebase-tools

Isso vai instalar a CLI do Firebase.

• firebase login
• firebase init
• Escolha "Hosting" quando perguntado qual recurso você quer configurar.
• Escolha o projeto configurado para seu app Android.
• Aceite os padrões para todas as outras solicitações.
• firebase deploy --only hosting - implantação na hospedagem do Firebase.

• Depois de receber o URL da página da Web, acesse o projeto do app no Android Studio e insira o URL da Web criado nesta etapa no WebView, como mostrado abaixo.

7. Desenvolver código de interface no app Android

Para rastrear os eventos no WebView com o GA4F, é necessário inserir o código na Web e no Android. Nesta parte, vamos analisar qual código você precisa colocar no app Android para receber os eventos da página da Web no WebView.

Crie o arquivo "AnalyticsWebInterface.java" para criar a classe "AnalyticsWebInterface". Nessa classe, você precisa codificar @JavascriptInterface para conectar a função logEvent no arquivo JS da Web, como mostrado abaixo.

Em seguida, adicione a interface JavaScript na atividade que chama o WebView, como mostrado abaixo.

Para conferir o código completo, consulte o exemplo de código que você baixou do GitHub na etapa "Etapas da configuração".

8. Como verificar e depurar eventos

Para depurar eventos, use o código a seguir no terminal do Android Studio depois de conectar o dispositivo de teste ou iniciar o emulador.

> adb shell setprop debug.firebase.analytics.app [nome do pacote do app]

> adb shell setprop log.tag.FA VERBOSE

> adb shell setprop log.tag.FA-SVC VERBOSE

> adb logcat -v time -s FA FA-SVC

Clique em "LOG EVENT 1" no seu app. Se o código funcionar bem, você verá o registro abaixo.

Se você quiser verificar no console do Firebase, também poderá usar a guia "Tempo real". Acesse o Console do Firebase e clique na guia "Tempo real", como mostrado abaixo.

Em seguida, filtre o evento da plataforma Android usando a função "Adicionar comparação".

Você verá os eventos do app Android na guia "Tempo real" se o código for implementado corretamente.

Em várias horas, você poderá conferir os eventos registrados na guia "Eventos" no Console do Firebase. Basta clicar na guia Eventos da seção "Analytics" do Console do Firebase. Também é possível conferir os valores no evento event1 clicando nele.

Para importar event1 como uma conversão no Google Ads, marque-o como conversão deslizando a chave Marcar como conversão para a direita.

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

Para fins de depuração, use o DebugView do Firebase. Para mais detalhes, consulte Depurar eventos.

9. Como importar eventos do Analytics no Google Ads

Quando a configuração do Firebase for concluída, você estará pronto para lançar campanhas para apps com eventos de ação. Comece vinculando 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 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. Confira se ele foi 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 event1 que implementamos antes.

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

Depois de definir o event1 como uma ação de conversão, você pode iniciar campanhas de ação para apps com o evento event1.

10. 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. Acesse a guia "Campanhas" da conta atual e inicie uma nova campanha clicando no botão +. Clique em [Nova campanha] e em Continuar.
7. Inicie uma campanha de promoção de app com a opção Apps - Instalações.

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 exibida. Defina o custo por ação desejado e conclua as outras opções.

11. Conclua as especificações da campanha.

11. 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 inicializar o GA4F (Google Analytics para Firebase) em um app híbrido
• Como criar eventos e parâmetros personalizados em uma página da Web
• Como encaminhar os eventos em uma página da Web em um WebView para um código nativo
• Como depurar
• Como importar eventos e usá-los em campanhas de ação.

12. Referências

Guia oficial

• Usar o Analytics em um WebView - Firebase - Google

Configuração do Firebase e do Google Ads

• Google Ads com eventos personalizados do Google Analytics para Firebase - Android
• Lançamento de campanhas do Google Ads com eventos personalizados do Google Analytics e o Flutter