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

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

Para comenzar, deberás tomar el código y abrirlo en tu entorno de desarrollo favorito. Utilizaremos 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

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 la sección “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.

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

Primero, cree un archivo JavaScript para usarlo en el archivo HTML. En el código de muestra, el archivo js con el nombre 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 un seguimiento del evento, como se muestra a continuación.

Cuando el evento se activa en WebView en Android, "window.AnalyticsWebInterface" se llamará y conectará el evento con 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 hosting de Firebase 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.

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

Para realizar un seguimiento de los eventos en una WebView con Google Analytics, 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.

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

Para ver el código completo, consulta el código de muestra que descargaste en la sección "Configuració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

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.

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

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 hayas completado la configuración de Firebase-Flutter, podrás 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 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 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