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

1. Introducción

Última actualización: 25 de febrero de 2022

Qué compilarás

En este codelab, aprenderás a reenviar eventos de 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 Android de muestra que llama a una página web con 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 directorio "android" es para la app para Android, y el directorio "web" es para una página web a la que llamará la app 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 asígnale un nombre como Webview-test-codelab o cualquier 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.

También 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 la pantalla "Agrega Firebase a tu app para Android" como se muestra a continuación.

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

package="com.xxxx.myproject"

3. No se necesita la clave SHA-1 aquí. Esta clave solo es necesaria cuando deseas usar Acceso con Google o Firebase Dynamic Links, o importar datos de in_app_purchase desde Google Play, lo que no está dentro del alcance de este codelab.
4. Haz clic en Registrar app.
5. Descarga el archivo de configuración google-services.json en Firebase console y copia y pega este archivo en el directorio android/app de tu proyecto de 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 Gradle para los servicios de Google 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 nueva dependencia 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.

Ya terminaste de configurar tu app para Android.

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

Para hacer un seguimiento de los eventos en una vista web 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 usar en un archivo HTML. En el código de muestra, el archivo JS se denomina index.js. Debes crear la función "logEvent" para llamar a "AnayticsWebInterface" para Android y "messageHander" para iOS como el siguiente código.

Llama a esta función donde quieras hacer un seguimiento del evento en el archivo HTML como se muestra a continuación.

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

6. Aloja el directorio web para obtener la URL de la página web

Antes de 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 deseas configurar.
• Elige el proyecto que configuraste para tu app para Android.
• Acepta los valores predeterminados para el resto de los mensajes.
• firebase deploy --only hosting - Realiza la implementación 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 crear en este paso dentro de WebView como se muestra a continuación.

7. Desarrolla código de 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 crear la clase "AnalyticsWebInterface". En esta clase, debes codificar @JavascriptInterface para conectar la función logEvent en el archivo JS web 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 el paso "Cómo prepararte".

8. Verificación y depuración de eventos

Para depurar eventos, 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 "LOG EVENT 1" en tu app y, si el código funciona bien, verás el registro como se muestra a continuación.

Si deseas consultar 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 el evento de la plataforma Android con la función "Agregar comparación".

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

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

Para importar event1 como una conversión en Google Ads, márcalo como conversión deslizando el interruptor Marcar como conversión hacia la derecha.

Si el evento se encuentra en la pestaña de conversiones, quiere decir que lo marcaste correctamente como una conversión. Ahora, Google Ads podrá importar este evento desde Firebase.

Para la 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

Cuando hayas completado la configuración de Firebase, estarás listo para lanzar campañas de aplicaciones con eventos de acción. Comienza por vincular Firebase con Google Ads. Si vinculas Firebase con Google Ads, las campañas de aplicaciones pueden 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 la configuración de Firebase haciendo clic en el botón que se encuentra junto a Descripción general del proyecto.
2. En la pestaña Integraciones, verás Google Ads y un botón de vinculación. Haz clic en Vincular y, luego, en Continuar.

3. Elige la cuenta de Google Ads.

Precaución: Si el evento de destino no se marca 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 a tu cuenta 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 establecer event1 como una acción de conversión, puedes lanzar campañas de acciones de la app 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 iniciar una campaña nueva. Haz clic en [Campaña nueva] y, luego, en Continuar.
7. Inicia una campaña de promoción de aplicación con la opción de 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 tu evento personalizado en la lista proporcionada. Establece el Costo por acción objetivo y completa 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 un WebView - Firebase - Google

Configuración de Firebase y Google Ads

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