Rastrear eventos em um WebView com o Google Analytics

1. Introdução

Última atualização:22/12/2021

O que você vai criar

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

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

O que você vai 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 no 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

Os documentos do guia do Firebase fornecem o código de exemplo necessário para este projeto em um github.

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

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

Você vai ver a caixa de diálogo mostrada 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, 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 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 para Android.

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

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

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

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

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

Quando o evento for acionado na WebView no Android, "window.AnalyticsWebInterface" será chamado e conectará o evento ao app nativo.

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

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

• No terminal, digite 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 "Hosting" quando perguntarem qual recurso você quer configurar.
• Escolha o projeto que você configurou para seu app Android.
• Aceite os padrões para todas as solicitações restantes.
• firebase deploy --only hosting: implantação no Firebase Hosting.

7. Desenvolver código de interface no app Android

Para acompanhar os eventos em uma WebView com o Google Analytics, insira o código na Web e no Android. Nesta parte, vamos analisar qual código você precisa colocar no app Android.

Crie o arquivo "AnalyticsWebInterface.java" para criar a classe "AnalyticsWebInterface". Nesta classe, você precisa programar @JavascriptInterface para conectar a função logEvent no arquivo js da Web, como abaixo.

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

Para conferir o código completo, consulte o exemplo de código que você baixou na etapa "Preparaçã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

Se o código funcionar bem, você verá o registro como abaixo.

Se quiser verificar no Console do Firebase, use a guia "Em 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".

Os eventos do app Android vão aparecer na guia "Tempo real" se o código estiver implementado corretamente.

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

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

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

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

9. Como importar eventos do Analytics no Google Ads

Quando a configuração do Firebase-Flutter for concluída, você estará pronto para lançar campanhas para apps com eventos de ação. Comece vinculando o Firebase ao Google Ads. Ao vincular 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. Acesse Configurações do Firebase clicando no botão ao lado de Visão geral do projeto.
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 alvo não for marcado como um evento de conversão, o Google Ads não conseguirá 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 voltadas para usuários que provavelmente vão disparar eventos do event1 mais de cinco vezes.

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 "Campanhas" 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 exibida. Defina o custo por ação desejado e preencha 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 no WebView para um código nativo
• Como depurar
• Como importar eventos e usá-los em campanhas de ação.