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 Google Ads para la app de Flutter.

Usaremos la app de Flutter predeterminada con un widget de contador sencillo. 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 acción 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 inicial 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 File > New > New Flutter Project.
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. Si el campo de texto está en blanco, selecciona Install SDK.
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 un nombre como Firebase-Flutter-Ads o cualquier 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 “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. Si usas iOS, es posible que quieras consultar 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: En el caso de versiones específicas de Firebase, se muestra java.lang.IllegalArgumentException: Service not registered cuando se inicializa la clase FirebaseAnalytics por primera vez (consulta el problema 1662 de GitHub).

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

import 'package:firebase_analytics/firebase_analytics.dart';

En la clase MyApp, inicia el objeto FirebaseAnalytics llamando al constructor.

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

Ahora, ya puedes activar algunos registros de eventos personalizados.

6. Registra eventos personalizados con Firebase Analytics

Si ibas a generar 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 algunos 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 potenciales usuarios entusiastas

Primero, queremos pasar los objetos de análisis que inicializamos al widget Stateful. Comenzaremos por agregar un parámetro de análisis al constructor de 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

También puedes enviar información adicional a través de 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. 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 clicked_counter.

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

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

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