Rastrear eventos em um WebView com o Google Analytics para Firebase

1. Introdução

Última atualização:25/02/2022

O que você vai criar

Neste codelab, você vai aprender a encaminhar eventos de uma página da Web na WebView para um código nativo para que o GAPF possa rastreá-los.

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

O que você vai aprender

• Como inicializar o GAPF (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 de uma página da Web na 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 oferece o exemplo de código no GitHub. Precisamos dele para este projeto.

Para começar, faça o download do código e abra-o no seu ambiente de desenvolvimento favorito. Usaremos dois diretórios : android e web. O nome "android" é para apps Android e "Web" é para uma página da Web que será chamada pelo app usando a 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 projeto (ou Criar um projeto) e nomeie seu projeto do Firebase como Webview-test-codelab ou qualquer outro nome.

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.

Outra opção é acessar a Visão geral do projeto, na barra de navegação à esquerda, e clicar no botão Android em "Comece adicionando o Firebase ao seu app".

Em seguida, a mensagem "Adicionar o Firebase ao app Android" tela como abaixo.

2. O nome do pacote Android (por exemplo, com.xxxx.myproject) fica 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 somente quando você quer usar o Login do Google ou o Firebase Dynamic Links ou importar dados do "in_app_purchase" do Google Play, que não é o escopo deste codelab.
4. Clique em Registrar app.
5. Faça o download do arquivo de configuração google-services.json no Console do Firebase e copie e cole esse arquivo no diretório android/app do 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ê concluiu a configuração do seu app para Android.

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

Para acompanhar os eventos em uma WebView com o Google Analytics, você precisa inserir o código no app Android e na Web.

Nesta parte, vamos conferir 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ê deseja acompanhar o evento no arquivo html, como mostrado abaixo.

Quando um evento é acionado na WebView no app Android, "window.AnalyticsWebInterface" será chamado e encaminhará o evento para o código WebInterface no aplicativo.

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

Para chamar uma página da Web na WebView no seu app, você precisa de um URL para a página. Há vários métodos para hospedar páginas da Web. Neste codelab, usaremos 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 seguintes comandos:
• npm install -g firebase-tools

isso vai instalar a CLI do Firebase.

• firebase login
• firebase init
• Escolha "Hospedagem" quando perguntado qual recurso você quer configurar.
• Escolha o projeto configurado para o app Android.
• Aceite os padrões de todos os comandos restantes.
• firebase deploy --only hosting: implantar no Firebase Hosting.

• Depois de conseguir 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 em apps Android

Para acompanhar os eventos no WebView com o GAPF, você precisa inserir o código na Web e no Android. Nesta parte, vamos conferir qual código você precisa colocar no app Android para receber os eventos da página da Web na WebView.

Crie "AnalyticsWebInterface.java" para tornar "AnalyticsWebInterface" . Nessa classe, é necessário codificar @JavascriptInterface para conectar a função logEvent no arquivo js da Web, como mostrado abaixo.

Em seguida, você precisa adicionar a interface JavaScript à atividade, que chama a WebView como mostrado abaixo.

Para ver o código completo, consulte o exemplo de código baixado do GitHub em "Como configurar" etapa.

8. Como verificar e depurar eventos

Para depurar eventos, você pode usar 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 aplicativo]

> 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 "REGISTRAR EVENTO 1". no app. Se o código funcionar bem, você verá o registro abaixo.

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

Depois, filtre o evento da Plataforma Android usando "Adicionar comparação". função.

Se o código tiver sido implementado corretamente, você verá os eventos do app Android na guia "Tempo real".

Após várias horas, os eventos registrados vão aparecer na guia "Eventos" do Console do Firebase. Basta clicar na guia Eventos da seção "Google 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, 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.

9. Como importar eventos do Analytics no Google Ads

Quando a configuração do Firebase estiver concluída, estará tudo pronto para 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 event1 que implementamos antes.

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

Depois de definir event1 como ação de conversão, você poderá lançar campanhas de ação no app com event1 evento.

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

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 GAPF (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 de uma página da Web na 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

Firebase e Configuração do Google Ads

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