Cómo hacer un seguimiento de eventos en una WebView con Google Analytics para Firebase

1. Introducción

Última actualización: 25/02/2022

Qué compilarás

En este codelab, aprenderás a reenviar eventos desde una página web dentro de WebView a un código nativo para que GA4F pueda hacer un seguimiento de los eventos.

Usaremos la app híbrida de ejemplo para Android, que llama a una página web mediante WebView.

Qué aprenderás

• Cómo inicializar GA4F (Google Analytics para Firebase) en una app híbrida
• Cómo crear eventos y parámetros personalizados en una página web
• Cómo reenviar los eventos de una página web dentro de WebView a un código nativo
• Cómo hacer la depuración
• Cómo importar eventos y usarlos para campañas de acción

Requisitos

• Android Studio 3.6 o una versión posterior
• Cuenta de Firebase

2. Cómo prepararte

Obtén el código

La guía oficial de Firebase proporciona el código de muestra en GitHub. Lo necesitamos para este proyecto.

Para comenzar, deberás descargar el código y abrirlo en tu entorno de desarrollo favorito. Usaremos 2 directorios : android y web. El "Android" es de la app para Android y la "Web" es para una página web a la que la app llamará a través de WebView.

3. Crea y configura un proyecto de Firebase

Para comenzar con Firebase, deberás crear y configurar un proyecto de Firebase.

Crea un proyecto de Firebase

1. Accede a Firebase.

En Firebase console, haz clic en Agregar proyecto (o Crear un proyecto) y asigna el nombre que desees a tu proyecto de Firebase como Webview-test-codelab o con el nombre que desees.

2. Haz clic en las opciones de creación del proyecto. Acepta las condiciones de Firebase si se te solicita. Debes habilitar Google Analytics para este proyecto, ya que necesitas eventos de Google Analytics para realizar un seguimiento de los eventos de acción y analizar las conversiones.

Para obtener más información sobre los proyectos de Firebase, consulta la Información sobre los proyectos de Firebase.

4. Configuración de Firebase para Android

Configura Android en Firebase console

1. En la página principal de Firebase console, puedes hacer clic en el ícono de Android, como se muestra a continuación.

O bien, puedes ir a Descripción general del proyecto en la barra de navegación izquierda y hacer clic en el botón Android en “Comienza por agregar Firebase a tu app”.

Luego, verás el mensaje "Agrega Firebase a tu app para Android" pantalla como se muestra a continuación.

2. Puedes encontrar el nombre de tu paquete de Android (p. ej., com.xxxx.myproject) en la sección android/app/src/main/AndroidManifest.xml del directorio de tu app.

package="com.xxxx.myproject"

3. La clave SHA-1 no es necesaria en este caso. Esta clave solo es necesaria cuando quieres usar Acceso con Google o Firebase Dynamic Links, o bien importar datos de in_app_purchase desde Google Play, que no se incluyen en este codelab.
4. Haga clic en Registrar app.
5. Descarga el archivo de configuración google-services.json en Firebase console, copia y Pega este archivo en el directorio android/app del proyecto de tu app.
6. Vuelve a Firebase console, omite los pasos restantes y regresa a la página principal de Firebase console.
7. Por último, necesitas que el complemento de Servicios de Google para Gradle lea el archivo google-services.json que generó Firebase.
8. En tu IDE o editor, abre android/app/build.gradle y agrega la siguiente línea como última línea en el archivo:

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

13. Abre android/build.gradle. Luego, agrega una dependencia nueva dentro de la etiqueta buildscript.

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

14. Si tu app todavía se está ejecutando, ciérrala y vuelve a compilarla para permitir que Gradle instale las dependencias.

Completaste la configuración de tu app para Android.

5. Desarrolla una interfaz web de Analytics en la Web y registra eventos personalizados

Para realizar un seguimiento de los eventos en una WebView con Google Analytics, debes insertar el código en la Web y en la app para Android.

En esta parte, veamos qué código debes colocar en la página web.

Primero, crea un archivo JavaScript para usarlo en un archivo HTML. En el código de muestra, el archivo js se llama index.js. Debes crear la función “logEvent” para llamar a "AnayticsWebInterface" para Android y "messageHander" para iOS, como el siguiente código.

Y llama a esta función donde quieras realizar el seguimiento del evento en el archivo html, como se muestra a continuación.

Cuando se activa un evento en WebView en la app para Android, "window.AnalyticsWebInterface" se llamará y reenviará el evento al código de WebInterface en la app.

6. Directorio web del host para obtener la URL de la página web

Para llamar a una página web dentro de WebView en tu app, necesitas una URL de página web. Habrá muchos métodos para alojar páginas web. En este codelab, usaremos el servicio de Firebase Hosting solo por conveniencia.

• En la terminal, ingresa el directorio web (p. ej., cd web) y ejecuta los siguientes comandos:
• npm install -g firebase-tools

esto instalará Firebase CLI.

• firebase login
• firebase init
• Elige “Hosting” cuando se te pregunte qué función quieres configurar.
• Elige el proyecto que configuraste para tu app para Android.
• Acepta los valores predeterminados de todos los mensajes restantes.
• firebase deploy --only hosting: Se implementa en Firebase Hosting.

• Después de obtener la URL de la página web, ve al proyecto de tu app en Android Studio e inserta la URL web que acabas de realizar en este paso dentro de WebView, como se muestra a continuación.

7. Cómo desarrollar el código de la interfaz en la app para Android

Para hacer un seguimiento de los eventos en WebView con GA4F, debes insertar el código en la Web y en Android. En esta parte, veamos qué código debes colocar en la app para Android para recibir los eventos de la página web en WebView.

Crea el archivo "AnalyticsWebInterface.java" para que "AnalyticsWebInterface" . En esta clase, debes programar @JavascriptInterface para conectar la función logEvent en el archivo web js, como se muestra a continuación.

A continuación, debes agregar la interfaz de JavaScript en la actividad que llama a WebView como se muestra a continuación.

Para ver el código completo, consulta el código de muestra que descargaste de GitHub en la sección “Preparación” paso.

8. Verificación y depuración de eventos

Para los eventos de depuración, puedes usar el siguiente código en la terminal de Android Studio después de conectar el dispositivo de prueba o iniciar el emulador.

> adb shell setprop debug.firebase.analytics.app [nombre del paquete de la app]

> adb shell setprop log.tag.FA VERBOSE

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

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

Haz clic en "REGISTRAR EVENTO 1". en tu app y, si tu código funciona bien, verás el registro como se muestra a continuación.

Si quieres comprobarlo en Firebase console, también puedes usar la pestaña En tiempo real. Ve a Firebase console y haz clic en la pestaña En tiempo real, como se muestra a continuación.

Luego, filtra los eventos de la plataforma de Android con "Agregar comparación". .

Si el código se implementó correctamente, verás los eventos de la app para Android en la pestaña En tiempo real.

Después de varias horas, podrás ver los eventos registrados en la pestaña Eventos de Firebase console. Simplemente haz clic en la pestaña Eventos de la sección Analytics presente en Firebase console. También puedes hacer clic en el evento para verificar los valores dentro del evento event1.

Si deseas importar event1 como una conversión en Google Ads, desliza el interruptor Marcar como conversión hacia la derecha para marcarlo como conversión.

Si el evento está en la pestaña Conversiones, significa que lo marcaste correctamente como una conversión. Google Ads ahora podrá importar este evento desde Firebase.

Para fines de depuración, usa Firebase DebugView. Si quieres obtener más información, consulta Cómo depurar un evento.

9. Importa eventos de estadísticas en Google Ads

Una vez que completes la configuración de Firebase, estarás listo para lanzar las campañas de aplicaciones con eventos de acción. Para comenzar, vincula Firebase a Google Ads. Si vinculas Firebase a Google Ads,las campañas de aplicaciones podrán importar eventos de Firebase. Este proceso también le permite a Google Ads a mejorar las campañas de aplicaciones porque les permite obtener más información sobre sus públicos.

1. Ve a Configuración de Firebase. Para ello, haz clic en el botón junto a Descripción general del proyecto.
2. En la pestaña Integraciones, verás Google Ads y un botón Vincular. Haz clic en Vincular y, luego, en Continuar.

3. Elige la cuenta de Google Ads.

Precaución: Si el evento de destino no está marcado como evento de conversión, Google Ads no podrá importarlo. Asegúrate de que el evento esté marcado correctamente como conversión.

Ya terminaste con Firebase.

Ve a Google Ads.

1. Accede y ve a Herramientas y Configuración > Medición > Conversiones para importar eventos personalizados como conversiones.
2. Haz clic en el botón + para agregar nuevas acciones de conversión.

3. Elige Propiedades Google Analytics 4 (Firebase) y haz clic en Continuar.

4. Puedes ver todos los eventos de Analytics que están marcados como conversiones. Encuentra el evento event1 que implementamos antes.

5. Verifica la acción, haz clic en Importar y, luego, en Continuar.

Después de configurar event1 como una acción de conversión, puedes lanzar campañas de acciones en la aplicación con el evento event1.

10. Lanzamiento de las campañas de acciones de la app con eventos importados

Importante: Para lanzar con éxito una campaña de aplicaciones, debes obtener una app de nivel de producción en Google Play. Sin embargo, si todavía no estás listo para la publicación, puedes omitir este paso por el momento.

6. Ve a la pestaña Campaña de tu cuenta actual y haz clic en el botón + para crear una nueva campaña. Haz clic en [Campaña nueva] y, luego, en Continuar.
7. Lanzar una campaña de promoción de aplicación con la opción Instalaciones de aplicaciones

8. Para encontrar tu app, escribe el nombre de la app, el nombre del paquete o el publicador.
9. En la sección Ofertas, selecciona Acciones en la aplicación en el menú desplegable.
10. Busca el evento personalizado en la lista proporcionada. Establezca el Costo por acción objetivo y complete las opciones adicionales.

11. Finaliza la configuración de tu campaña.

11. Felicitaciones

Felicitaciones, integraste correctamente Firebase y Google Ads. Esto lo ayudará a mejorar el rendimiento de su campaña con los eventos importados de Firebase.

Aprendiste lo siguiente:

• Cómo inicializar GA4F (Google Analytics para Firebase) en una app híbrida
• Cómo crear eventos y parámetros personalizados en una página web
• Cómo reenviar los eventos de una página web dentro de WebView a un código nativo
• Cómo hacer la depuración
• Cómo importar eventos y usarlos para campañas de acción

12. Referencias

Guía oficial

• Usa Analytics en una WebView - Firebase - Google

Firebase y Configuración de Google Ads

• Eventos personalizados de Google Ads con Google Analytics para Firebase - Android
• Lanzamiento de campañas de Google Ads con eventos personalizados de Google Analytics y Flutter