Realiza un seguimiento de eventos en una WebView con Google Analytics

1. Introducción

Última actualización: 22/12/2021

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 de ejemplo híbrida para Android 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

Los documentos de la guía de Firebase proporcionan el código de muestra que necesitamos para este proyecto en GitHub.

Para comenzar, deberás obtener 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

1. En Firebase console, selecciona Descripción general del proyecto en el panel de navegación izquierdo y, luego, haz clic en el botón Android en “Comienza por agregar Firebase a tu app”.

Verás el diálogo que se muestra en la siguiente pantalla:

2. El valor importante que se debe proporcionar es el nombre del paquete de Android, que obtendrás en el siguiente paso.

Sugerencia: Lee Cómo establecer el ID de aplicación para obtener más información sobre los ID de la aplicación y del paquete.

3. En el directorio de tu app, abre el archivo android/app/src/main/AndroidManifest.xml.
4. En el elemento manifest, busca el valor de la string del atributo package. Este valor es el nombre del paquete de Android (similar a com.yourcompany.yourproject). Copia este valor.
5. En el cuadro de diálogo de Firebase, pega el nombre del paquete copiado en el campo Android package name.
6. No necesitamos la clave SHA-1 aquí, a menos que planees usar Acceso con Google o Firebase Dynamic Links (ten en cuenta que estos pasos no forman parte de este codelab). Si planeas importar datos de in_app_purchase desde Google Play, tendrás que establecer la clave más adelante.
7. Haz clic en Registrar app.
8. En Firebase, sigue las instrucciones para descargar el archivo de configuración google-services.json.

9. Ve al directorio de tu app y mueve el archivo google-services.json (que acabas de descargar) al directorio android/app.
10. Vuelve a Firebase console, omite los pasos restantes y regresa a la página principal de Firebase console.
11. Por último, necesitas que el complemento de Gradle para los servicios de Google lea el archivo google-services.json que generó Firebase.
12. 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 y, luego, dentro de la etiqueta buildscript, agrega una nueva dependencia:

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 WebView con Google Analytics, debes insertar el código en la app para Android y en la Web.

En esta parte, veamos qué código debes colocar en la Web.

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

Llama a esta función donde quieras hacer un seguimiento del evento, como se muestra a continuación.

Cuando se active el evento en la WebView de Android, se llamará a "window.AnalyticsWebInterface" y se conectará el evento a la app nativa.

6. Directorio web del host 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, pero en este codelab, te guiaremos para que uses el servicio de Firebase Hosting por conveniencia.

• En la terminal, ingresa el directorio web (p. ej., cd web) y ejecuta los siguientes comandos:
• npm install -g firebase-tools: Se 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 para el resto de los mensajes.
• firebase deploy --only hosting: Implementa en Firebase Hosting.

7. Desarrolla código de interfaz en la app para Android

Para hacer un seguimiento de los eventos en una WebView con Google Analytics, debes insertar el código tanto en la Web como en Android. En esta parte, veamos qué código debes colocar en la app para Android.

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 la WebView, como se muestra a continuación.

Para ver todo el código, consulta el código de muestra que descargaste en el paso "Configuración".

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

Si el código funciona bien, verás el registro como se muestra a continuación.

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

Luego, filtra el evento de la plataforma Android con la función "Agregar comparación".

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

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 para verificar los valores dentro del evento event1.

Para marcar event1 como conversión, desliza el interruptor Marcar como conversión hacia la derecha.

Si el evento se encuentra en la pestaña 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 la app de Firebase-Flutter, podrás lanzar campañas de aplicaciones con eventos de acción. Comienza por vincular Firebase a Google Ads. Si vinculas Firebase a 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 Configuración de Firebase. Para ello, haz 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 vínculo. 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 que se con la posibilidad de orientar a usuarios que probablemente activarán eventos event1 más de 5 veces.

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