Lanzamiento de campañas de Google Ads con eventos personalizados de Google Analytics y Flutter

1. Introducción

Última actualización: 25/01/2021

Qué compilarás

En este codelab, aprenderás a implementar eventos personalizados con GA4F y a lanzar campañas de acción a través de la app de Google Ads para Flutter.

Usaremos la app de Flutter predeterminada con un widget de contador simple. Anunciaremos nuestra app a los usuarios potenciales, que probablemente hagan clic en el widget de contador.

Qué aprenderás

• Cómo inicializar GA4F (Google Analytics para Firebase) en Flutter
• Cómo crear eventos y parámetros personalizados
• Cómo importar eventos de Firebase a Google Ads
• Cómo lanzar campañas de acciones con eventos personalizados

Requisitos

• Android Studio 3.6 o una versión posterior
• Xcode (para compatibilidad con iOS)
• Cuenta de Firebase
• Cuenta de Google Ads

2. Inicia un nuevo proyecto de Flutter

Crea una app de Flutter simple a partir de una plantilla. Modificarás esta app de partida para este codelab.

Inicia Android Studio.

Nota: Si no se muestra "New Flutter Project" como opción en el IDE, asegúrate de tener instalados los complementos instalados para Flutter y Dart.

1. Si no tienes proyectos abiertos, selecciona Start a new Flutter app en la página de bienvenida. De lo contrario, selecciona Archivo > Nuevo > Nuevo proyecto de Flutter
2. Selecciona Flutter Application como el tipo de proyecto y haz clic en Next.
3. Verifica que la ruta del SDK de Flutter especifique la ubicación del SDK. (Selecciona Install SDK si el campo de texto está en blanco).
4. Ingresa el nombre del proyecto y haz clic en Siguiente.
5. Usa el nombre de paquete predeterminado que sugiere Android Studio y haz clic en Next.
6. Haz clic en Finish.
7. Espera a que Android Studio instale el SDK y cree el proyecto.

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 el nombre Firebase-Flutter-Ads o el nombre que desees.

2. Haz clic para avanzar por las opciones de creación de los proyectos. 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 específica para cada plataforma (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 de Flutter, 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 de Flutter 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 de Flutter para Android. Para iOS, te recomendamos que consultes este codelab ( Conoce Firebase para Flutter).

5. Configura Firebase Analytics en Flutter

En este paso, comenzarás a usar el paquete de Firebase Analytics llamado firebase_analytics, que contiene funciones de Firebase Analytics.

El archivo pubspec administra los recursos para una app de Flutter. En pubspec.yaml, agrega firebase_analytics: ^6.2.0 (firebase_analytics 6.2.0 o versiones posteriores) a la lista de dependencias:

dependencies: 
   flutter: 
      sdk: flutter 
   cupertino_icons: ^0.1.2 
   firebase_analytics: ^6.2.0   # add this line

Mientras observas el archivo pubspec en la vista de edición de Android Studio, haz clic en Package get. Esto incorpora el paquete en tu proyecto. Deberías ver lo siguiente en la consola:

flutter packages get 
Running "flutter packages get" in startup_namer... 
Process finished with exit code 0

La ejecución de Pub get también genera automáticamente el archivo pubspec.lock con una lista de todos los paquetes que se incorporaron al proyecto y sus números de versión.

Precaución: Para versiones específicas de Firebase, se muestra java.lang.IllegalArgumentException: Service not registered cuando se inicializa la clase FirebaseAnalytics por primera vez (consulta el error 1662 de GitHub).

En lib/main.dart, importa el paquete nuevo:

import 'package:firebase_analytics/firebase_analytics.dart';

En la clase MyApp, llama al constructor para iniciar el objeto FirebaseAnalytics.

class MyApp extends StatelessWidget {
 static FirebaseAnalytics analytics = FirebaseAnalytics();
   ...
}

Ya tienes todo listo para activar algunos registros de eventos personalizados.

6. Registra eventos personalizados con Firebase Analytics

Si generaras una nueva plantilla en la app de Flutter, verías una variable _counter y el método _incrementCounter() dentro de la clase State predeterminada. Ahora, debes registrar eventos personalizados cuando los usuarios demasiado entusiastas hacen clic en el botón de incremento más de cinco veces. Más adelante, lanzaremos una campaña de aplicaciones para atraer a posibles usuarios entusiastas

Primero, queremos pasar los objetos de análisis que inicializamos al widget Stateful. Para comenzar, agregaremos un parámetro de análisis al constructor MyHomePage.

MyHomePage({Key key, this.title, this.analytics}) : super(key: key);

También agregarás un parámetro de análisis cuando llames al constructor.

home: MyHomePage(
   title: 'Flutter Demo Home Page',
   analytics: analytics,
),

Ahora, puedes registrar eventos fácilmente con el método logEvent(). Agrega el método y aumenta la variable _counter.

void _incrementCounter() {
 setState(() {
   _counter++;

   //add this
   if(_counter > 5) { 
     widget.analytics.logEvent(name: "clicked_counter"); 
   }

 });
}

Ahora, tu app está lista para activar el registro de eventos personalizados.

También puedes usar métodos precompilados para activar eventos.

Ya está todo listo. En tu Android Studio, ejecuta "main.dart".

(Opcional) Envío de información adicional a Firebase Analytics con parámetros

Puedes enviar información adicional a través de los parámetros. Los parámetros personalizados se pueden registrar para generar de Analytics. También se pueden usar como filtros en las definiciones de públicos que se pueden aplicar a cada informe. Si tu app está vinculada a un proyecto de BigQuery, los parámetros personalizados también se encuentran en BigQuery (consulta BigQuery Export para Firebase).

En este caso, el valor de _counter se establece como parámetro.

void _incrementCounter() {
 setState(() {
   _counter++;

   if(_counter > 5) {
     widget.analytics.logEvent(name: "clicked_counter", parameters: {'count' : _counter});
   }
 });
}

Verificación y depuración de eventos

Después de algunas horas, puedes ver los eventos registrados en 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 clicked_counter.

Para marcar clicked_counter 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.

7. 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 clicked_counter que implementamos antes.

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

Después de establecer clicked_counter 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 clicked_counter más de 5 veces.

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

9. 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 configurar Firebase Analytics para Flutter
• Cómo registrar eventos personalizados con Firebase Analytics en la app de Flutter
• Cómo importar eventos y usarlos para campañas de acción