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

Ú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 sencillo. Anunciaremos nuestra app a los usuarios potenciales que probablemente hagan clic en el widget de contador.

bdbf1fc3cbf49ac7.png

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

Crea una app de Flutter simple con plantilla. Modificarás esta app inicial para este codelab.

Inicia Android Studio.

  1. Si no tienes proyectos abiertos, selecciona Start a new Flutter 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. (Selecciona Instalar SDK si el campo de texto está en blanco).
  4. Ingresa el nombre del proyecto y haz clic en Next.
  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.

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.

e9a8e1b1c7c52125.png

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

e58151a081f0628.png

Para obtener más información sobre los proyectos de Firebase, consulta Información sobre los proyectos de Firebase.

3e5b8f1b6ca538c4.png

Configura Android

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

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

3b7d3b33d81fe8ea.png

  1. El valor importante que se debe proporcionar es el nombre del paquete de Android, que obtendrás en el siguiente paso.
  1. En el directorio de tu app de Flutter, abre el archivo android/app/src/main/AndroidManifest.xml.
  2. 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.
  3. En el cuadro de diálogo de Firebase, pega el nombre del paquete copiado en el campo Android package name.
  4. 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.
  5. Haz clic en Registrar app.
  6. En Firebase, sigue las instrucciones para descargar el archivo de configuración google-services.json.

52f08aa18c8d59d0.png

  1. Ve al directorio de tu app de Flutter y mueve el archivo google-services.json (que acabas de descargar) al directorio android/app.
  2. Vuelve a Firebase console, omite los pasos restantes y regresa a la página principal de Firebase console.
  3. Por último, necesitas que el complemento de Gradle para los servicios de Google lea el archivo google-services.json que generó Firebase.
  4. 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'
  1. 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'
   }
}
  1. 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 ver este codelab (Conoce Firebase para 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.

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

import 'package:firebase_analytics/firebase_analytics.dart';

En la clase MyApp, iniciarás el objeto FirebaseAnalytics mediante una llamada al constructor.

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

Ahora, estás listo para activar algunos registros de eventos personalizados.

Si ibas a generar una nueva plantilla en la app de Flutter, verás la variable _counter y el método _incrementCounter() dentro de la clase State predeterminada. Ahora, debes registrar eventos personalizados cuando algunos usuarios entusiastas hacen clic en el botón de incremento más de cinco veces.

Más adelante, lanzaremos las campañas de aplicaciones para atraer potenciales usuarios entusiastas a participar en la app.

Primero, queremos pasar los objetos de análisis que inicializamos al widget con estado. Lo primero que debemos hacer es 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(). Coloca el método seguido de 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.

f0742c956977df1d.png

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

32b01a1412ab2ba5.png

Para marcar clicked_counter como conversión, desliza el interruptor para marcar como conversión a la derecha.

e6b420a73db88f03.png

A fin verificar si el evento se marcó correctamente como una conversión, vuelva a verificarlo. Si puedes confirmar que el evento se encuentra en la pestaña de conversiones, quiere decir que verificaste correctamente el evento como una conversión. Si marcas este evento como una conversión, Google Ads podrá importar este evento desde Firebase.

Sin embargo, para la depuración, puedes usar Firebase DebugView. Si quieres obtener más información, consulta Cómo depurar un evento.

Cuando hayas completado la configuración de la app de Firebase-Flutter, estarás listo para lanzar campañas de aplicaciones con eventos de acción. Primero, debes 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. 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 vinculación. Haz clic en Vincular y continuar.

b711bf2e94fa0895.png

  1. Elige la cuenta de Google Ads.

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 conversión.
  2. Haz clic en el botón + para agregar nuevas acciones de conversión.

73cec8d2e80eab03.png

  1. Elige las propiedades de Google Analytics 4 (Firebase) y haz clic en Continuar.

4b1d8f6a712b2ac6.png

  1. Puedes ver todos los eventos de Analytics que están marcados como conversiones. Encuentra el evento clicked_counter que implementamos antes.

ba1bbe6b2924fac8.png

  1. Marca la casilla y haz clic en Importar y continuar.

ab35e341dff32e48.png

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.

  1. 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 continúa.
  2. Iniciarás una campaña de promoción de aplicación con la opción de instalaciones de aplicaciones.

af98c44d1476558.png

  1. Para encontrar tu app, escribe el nombre de la app, el nombre del paquete o el publicador.
  2. En la sección de ofertas, selecciona Acciones en la aplicación en el menú desplegable.
  3. Puedes encontrar tu evento personalizado en la lista proporcionada. Establece el costo por acción objetivo y completa otras opciones.

885956ad00592eb3.png

  1. Finaliza la configuración de tu campaña.

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