Tu primer experimento de mensajes desde la app

1. Introducción

Objetivos

En este codelab, instrumentarás un experimento de mensajería integrada en la app para una app multiplataforma para recomendar restaurantes con la tecnología de Flutter y Cloud Firestore.

Una vez que termines, podrás diseñar e implementar experimentos de mensajería integrada en la app para aumentar de manera eficaz la participación de los usuarios en cualquier app para iOS o Android con una cantidad mínima de código.

Qué aprenderás

• Cómo usar Firebase In-App Messaging (FIAM) en una app de Flutter
• Cómo personalizar la apariencia de tus mensajes integrados en la app
• Cómo diseñar un experimento de mensajes desde la app y cómo implementarlo en tu app
• Cómo interpretar los resultados de un experimento de mensajes desde la app

Firebase In-App Messaging

Firebase In-App Messaging (FIAM) te ayuda a interactuar con los usuarios que usan tu app activamente enviándoles mensajes contextuales y segmentados que los motivan a completar acciones clave en la app, como superar un nivel de un juego, comprar un artículo o suscribirse a contenido.

Firebase A/B Testing

Firebase A/B Testing (ABT), con la tecnología de Google Optimize, te ayuda a optimizar la experiencia de tu app, ya que facilita la ejecución, el análisis y el escalamiento de experimentos de productos y marketing. Además, permite probar los cambios en la IU, las funciones o las campañas de participación de la app para ver si se modifican las métricas clave (como los ingresos y la retención) antes de implementarlos abiertamente.

Requisitos

Si no estás familiarizado con Flutter o Firestore, primero completa el codelab Firebase para Flutter:

Puedes ejecutar este codelab con cualquiera de los siguientes dispositivos:

• Un dispositivo físico (iOS o Android) conectado a tu computadora y configurado en modo de desarrollador
• El simulador de iOS (requiere instalar herramientas de Xcode)
• El emulador de Android (requiere configuración en Android Studio)

Además de lo anterior, también necesitarás lo siguiente:

• Un navegador de tu elección, como Chrome
• Un IDE o editor de texto que prefieras, como Android Studio o VS Code, que estén configurados con los complementos de Dart y Flutter Se recomienda usar VS Code con Flutter.
• La versión estable más reciente de Flutter (o la versión beta si te gusta vivir al límite)
• Una Cuenta de Google, como una cuenta de Gmail, para crear y administrar tu proyecto de Firebase
• Es el código de muestra del codelab. Consulta el siguiente paso para obtener el código.

2. Prepárate

Obtén el código

Clona el repositorio de GitHub a partir de la línea de comandos:

git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter

El código de muestra se clonará en el directorio friendlyeats-flutter. A partir de este momento, asegúrate de ejecutar los comandos desde este directorio:

cd friendlyeats-flutter

Luego, cambia al directorio del codelab y revisa la rama fiam-abt:

git checkout fiam-abt

Esta rama contiene todo el código necesario para este codelab, incluida una versión completa en la carpeta done. Las otras ramas de este repositorio contienen código para compilar la app de FriendlyEats, como se muestra en el codelab de Flutter multiplataforma de Firestore. Para los fines de este codelab, quitamos la integración web en esta rama.

Importa la app de partida

Abre o importa el directorio codelab-fiam-abt en el IDE que prefieras. Este directorio contiene el código de inicio para el codelab que consiste en una app para recomendar restaurantes. A través de este codelab, instrumentarás un experimento de mensajería integrada en la app para los usuarios de esta app.

Crea un proyecto de Firebase

1. Accede a la consola de Firebase con tu Cuenta de Google.
2. Haz clic en el botón para crear un proyecto nuevo y, luego, ingresa un nombre (por ejemplo, FriendlyEats).
   
3. Haz clic en Continuar.
4. Si se te solicita, revisa y acepta las Condiciones de Firebase y, luego, haz clic en Continuar.
5. (Opcional) Habilita la asistencia de IA en Firebase console (llamada "Gemini en Firebase").
6. Para este codelab, necesitas Google Analytics para usar de forma óptima los productos de Firebase, así que mantén activado el botón de activación de la opción de Google Analytics. Sigue las instrucciones en pantalla para configurar Google Analytics.
7. Haz clic en Crear proyecto, espera a que se aprovisione y, luego, haz clic en Continuar.

¡Felicitaciones! Acabas de crear tu primer proyecto de Firebase.

A continuación, te explicaremos cómo configurar y habilitar los servicios necesarios con Firebase console.

Cómo habilitar la autenticación anónima

Si bien la autenticación no es el tema central de este codelab, es importante tener algún tipo de autenticación en tu app. Usarás el acceso anónimo, lo que significa que al usuario se le brinda acceso, de forma silenciosa, sin que se le solicite.

Para habilitar el acceso anónimo, haz lo siguiente:

1. En Firebase console, busca Authentication en la barra de navegación izquierda.
2. Haz clic en Authentication y, luego, en Get started y selecciona la pestaña Sign-in method (o ve directamente a Firebase console).
3. Habilita el proveedor de acceso Anónimo y haz clic en Guardar.

Habilitar el acceso anónimo permite que la aplicación les brinde, de manera silenciosa, acceso a tus usuarios cuando ingresan a la app. Para obtener más información, consulta la documentación sobre autenticación anónima para Android y iOS.

Configura Cloud Firestore

La app usa Cloud Firestore para guardar y recibir información sobre los restaurantes y las calificaciones.

Sigue estos pasos para configurar Cloud Firestore en tu proyecto de Firebase:

1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Base de datos de Firestore.
2. Haz clic en Crear base de datos.
3. Deja el ID de la base de datos establecido en (default).
4. Selecciona una ubicación para tu base de datos y, luego, haz clic en Siguiente.
   Para una app real, debes elegir una ubicación cercana a tus usuarios.
5. Haz clic en Comenzar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
   Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app de forma pública sin agregar reglas de seguridad para tu base de datos.
6. Haz clic en Crear.

3. Configuración de Firebase específica para dispositivos móviles

La mayoría de los cambios de código que se necesitan para habilitar la compatibilidad con Firebase ya están registrados en el proyecto en el que estás trabajando. Sin embargo, para agregar compatibilidad con plataformas móviles, debes hacer lo siguiente:

• Registra la plataforma deseada en el proyecto de Firebase
• Descarga el archivo de configuración específico de la plataforma y agrégalo al código.

En el directorio de nivel superior de tu app de Flutter, puedes encontrar subdirectorios que se llaman ios y android. Estos directorios contienen los archivos de configuración específicos de la plataforma para iOS y Android, respectivamente.

Configura iOS

En Firebase console, selecciona Configuración del proyecto en la parte superior de la barra de navegación izquierda y haz clic en el botón de iOS en Tus apps en la página General.

Deberías ver el siguiente diálogo:

1. El valor importante que se debe proporcionar es el ID del paquete de iOS. Para obtener el ID del paquete, sigue los siguientes tres pasos.

2. En la herramienta de línea de comandos, ve al directorio de nivel superior de tu app de Flutter.
3. Ejecuta el comando open ios/Runner.xcworkspace para abrir Xcode.

4. En Xcode, haz clic en Runner de nivel superior en el panel izquierdo para que aparezca la pestaña General en el panel derecho, como se muestra en la captura de pantalla. Copia el valor de Bundle Identifier.

5. Vuelve al diálogo de Firebase, pega el valor de Bundle Identifier en el campo ID del paquete de iOS y haz clic en Registrar app.

6. Todavía en Firebase, sigue las instrucciones para descargar el archivo de configuración GoogleService-Info.plist.
7. Regresa a Xcode. Ten en cuenta que Runner tiene una subcarpeta que también se llama Runner (como se muestra en la imagen anterior).
8. Arrastra el archivo GoogleService-Info.plist (que recién descargaste) a esa subcarpeta Runner.
9. En el diálogo que aparece en Xcode, haz clic en Finish.
10. Regresa a Firebase console. En el paso de configuración, haz clic en Siguiente, omite los pasos restantes y regresa a la página principal de Firebase console.

Ya terminaste de configurar tu app de Flutter para iOS.

Configura Android

1. En Firebase console, selecciona Configuración del proyecto en la parte superior de la barra de navegación izquierda y haz clic en el botón Android en Tus apps en la página General.

Deberías ver el siguiente diálogo :

2. El valor importante que se debe proporcionar es el nombre del paquete de Android. Para obtener el nombre del paquete, sigue los siguientes dos pasos:

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 cadena del atributo package. Este valor es el nombre del paquete de Android (similar a com.yourcompany.yourproject). Cópialo.
5. En el diálogo de Firebase, pega el nombre del paquete que copiaste en el campo Nombre del paquete de Android.
6. Para este codelab, no necesitas el certificado de firma SHA-1 de depuración. Déjalo en blanco.
7. Haga clic en Registrar app.
8. Todavía 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. Regresa a Firebase console, omite los pasos restantes y regresa a la página principal de Firebase console.
11. Ya registraste toda la configuración de Gradle. 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.

4. Ejecuta tu app de forma local

Estás listo para comenzar a trabajar en tu app. Primero, ejecuta la app de manera local. Ahora, puedes ejecutar la app en cualquier plataforma que hayas configurado (y para las que tengas un dispositivo y un emulador disponibles).

Descubre qué dispositivos están disponibles con el siguiente comando:

flutter devices

Según los dispositivos disponibles, el resultado del comando anterior se ve de la siguiente manera:

Ahora, ejecuta la app de manera local con el siguiente comando:

flutter run

Ahora, deberías ver tu copia de FriendlyEats, conectada al proyecto de Firebase.

La app se conecta automáticamente a tu proyecto de Firebase y te permite acceder, de forma silenciosa, como usuario anónimo.

5. Crea y prueba tu primer mensaje

Integra Firebase In-App Messaging en tu app

La integración básica de los mensajes desde la app no requiere código. Solo debes agregar la dependencia y listo. Agrega la siguiente dependencia a tu archivo pubspec.yaml

dependencies:
  # ...
  firebase_in_app_messaging: ^0.4.0
  # ...

Cómo redactar un mensaje en Firebase console

Ahora que agregaste FIAM a tu app, redactemos un mensaje que se activará cuando se abra la app por primera vez.

Para redactar tu primer mensaje, sigue estos pasos:

1. En la sección Participación de Firebase console, haz clic en In-App Messaging.
2. Haz clic en Crea tu primera campaña en el panel de In-App Messaging.

Compongamos un mensaje básico de Modal para asegurarnos de que la integración funcione. Puedes personalizar el mensaje como quieras: agregar imágenes, botones o cambiar los colores.

Asegúrate de segmentar los anuncios para la app con la que deseas realizar la prueba. Según la ruta de integración que sigas, es posible que tengas iOS, Android o ambos.

Queremos asegurarnos de que el mensaje se active cuando se abra la app, por lo que la configuración de programación predeterminada funcionará aquí.

Una vez que se complete la programación, podremos publicar el mensaje. Haz clic en "Revisar" y deberías ver algo similar a lo siguiente:

Cómo ver el mensaje en la app

Ahora, desinstala y reinstala tu app. Deberías ver el mensaje que creaste cuando la abras. ¡Felicitaciones! Acabas de enviar tu primer mensaje integrado en la app. En el siguiente paso, aprenderás a agregar un evento de Analytics para activar un mensaje desde la app en función de las acciones que realicen los usuarios en la app.

6. Integra Firebase Analytics para activar mensajes avanzados

Integra Firebase Analytics en tu app

Para comprender cómo interactúan los usuarios con nuestra app y activar un mensaje desde la app según sus acciones, ahora agregaremos un evento de Analytics para cuando un usuario haga clic en un restaurante.

1. Agrega la dependencia de Firebase Analytics a Flutter en pubspec.yaml.

dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...

2. Importar estadísticas en home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

3. Agrega una instancia de Firebase Analytics a la clase HomePage en home_page.dart.

class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

4. Activa un evento de Analytics cuando el usuario haga clic en una tarjeta de restaurante en home_page.dart.

onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

Edita tu mensaje para que se active en el evento de Analytics

Ahora que tenemos un evento "click_restaurant", activaremos nuestro mensaje integrado en la app en función de ese evento en lugar de cuando el usuario abra la app.

En Firebase console, vuelve a In-App Messaging y edita tu campaña existente.

Ahora, cambia la sección de programación para activar el mensaje desde el evento nuevo.

Desde allí, podemos publicar nuestros cambios haciendo clic en el botón "Revisar".

Prueba el activador en la app

En este punto, deberías poder ejecutar tu app con

flutter run

Cuando hagas clic en un restaurante, deberías ver tu mensaje desde la aplicación.

7. Crea una campaña de FIAM+ABT

Comienza con un objetivo

Nuestra app de Friendlyeats ya se ve muy bien, pero para que sea útil, necesitamos tener algunas opiniones. Estas se obtendrán de los usuarios de Friendlyeats, así que busquemos alguna forma de alentarlos a dejar opiniones.

Primero, definamos nuestro evento de conversión

Como queremos ver si los usuarios revisan restaurantes, agreguemos un evento de Analytics para medir este comportamiento.

1. Importa Firebase Analytics como antes y agrega una instancia de Analytics a RestaurantPage en restaurant_page.dart.

class RestaurantPage extends StatefulWidget {
  static const route = '/restaurant';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  final String _restaurantId;
  RestaurantPage({Key key, @required String restaurantId})
      : _restaurantId = restaurantId,
        super(key: key);
  @override
  _RestaurantPageState createState() =>
      _RestaurantPageState(restaurantId: _restaurantId);
}

2. Ahora, activaremos un evento en _onCreateReviewPressed cuando guardemos una revisión en restaurant_page.dart.

 if (newReview != null) {
   // Log successful review
   await RestaurantPage.analytics.logEvent(name: 'review_success');
   // Save the review
   return data.addReview(restaurantId: _restaurant.id, review: newReview);
 }

Configura la prueba A/B en Firebase console

Ahora que sabemos cómo crear campañas de mensajes desde la app, es hora de considerar qué tipo de comportamiento nos gustaría fomentar en nuestra app a través de estas campañas. En el caso de FriendlyEats, nos gustaría que más personas dejaran opiniones, lo que haría que la app fuera más útil. Existen varias formas de fomentar esto con mensajes desde la app. Una es a través de un simple mensaje desde la app que le indica al usuario que debe dejar una opinión sobre el restaurante para ayudar a mejorar la app de FriendlyEats. Otra forma es usar un mensaje desde la app para ofrecer algún tipo de incentivo por dejar una opinión, como un cupón o un código de descuento para un restaurante determinado.

Ambos enfoques podrían aumentar la frecuencia con la que los usuarios proporcionan opiniones sobre los restaurantes en FriendlyEats, y parece que proporcionar un cupón podría tener un impacto aún mayor en este caso. Sin embargo, ¿cuántas más probabilidades habría de que los usuarios escribieran una opinión si se les proporcionara este cupón? ¿Vale la pena el costo del cupón? Para determinarlo, realizaremos un experimento de mensajes desde la app. Podemos usar Firebase A/B Testing para mostrar aleatoriamente uno de nuestros mensajes integrados en la app a los usuarios y medir el efecto que esto tiene en el comportamiento del usuario, de manera similar a un ensayo clínico. Lo mejor de todo es que puedes hacerlo completamente a través de Firebase console, sin necesidad de escribir código.

Para redactar tu primer experimento de mensajes desde la app, haz lo siguiente:

1. En la sección Participación de Firebase console, haz clic en A/B Testing.
2. Haz clic en Crear experimento y selecciona que deseas experimentar con In-App Messaging. Esto te llevará al compositor de experimentos que se muestra a continuación.

Asigna un nombre a tu experimento y, de forma opcional, agrega una descripción.

4. En el siguiente paso, redactarás los diferentes mensajes desde la app que enviarás a los usuarios en tu experimento. El primer mensaje integrado en la app que redactaremos será el "de referencia" o el control de nuestro experimento. Podemos usar este mensaje simple de "por favor, haz una revisión":

5. Ahora que tenemos un valor de referencia, redactaremos una variante, el mensaje desde la app que ofrece a los usuarios un código de cupón para alentarlos a dejar una opinión. Esto no se ve completamente en la vista previa a continuación, pero el título del mensaje es "¡Toma un cupón y deja una opinión!", y el cuerpo del mensaje es "La próxima vez que vayas a Burrito Cafe, usa el código de cupón FRIENDLYEATS-15 en la confirmación de compra para obtener un 15% de descuento en tu pedido. Y no olvides dejar una opinión después". Esperamos que esto inspire a algunos usuarios a visitar Burrito Cafe.

En el siguiente paso, segmentaremos nuestra app y estableceremos la exposición. Es el porcentaje de usuarios aptos (aquellos que cumplen con las condiciones de segmentación o activación) que verán uno de los mensajes del experimento. En este ejemplo, podemos establecer este valor en el 100%, ya que queremos que todos los usuarios vean la referencia o nuestra variante de cupón. Si deseas tener un grupo de control al que no se le muestre ningún mensaje en la aplicación, puedes reducir este porcentaje de exposición.

7. A continuación, definirás algunos objetivos para el experimento. Este es el resultado del experimento que nos gustaría medir. Estableceremos este evento de Analytics como el evento review_success que definimos en la sección anterior, ya que nos gustaría ver el impacto que tienen nuestros diferentes mensajes integrados en la app en los usuarios que dejan opiniones sobre restaurantes.
8. Para la programación, permitiremos que la campaña comience de inmediato y estableceremos click_restaurant como la condición de activación, de modo que los usuarios vean uno de los dos mensajes integrados en la app cuando hagan clic en un restaurante.

9. Ahora, solo queda revisar nuestro experimento y hacer clic en Iniciar experimento. Luego, podemos relajarnos y esperar a que lleguen los datos de nuestro experimento.

Consulta la recopilación de datos en tiempo real

Ahora que comenzamos nuestro experimento, los usuarios de FriendlyEats verán aleatoriamente uno de los dos mensajes integrados en la app que redactamos cuando hagan clic en un restaurante, ya sea el mensaje del modelo de referencia o el mensaje de la variante. Esto dividirá a nuestros usuarios en dos grupos, según el mensaje que vieron. Luego, podemos consultar Firebase console (nuevamente en la sección A/B Testing) para comparar los datos de análisis en tiempo real de ambos grupos. Los datos tardarán en llegar, ya que debemos esperar a que los usuarios vean los mensajes integrados en la app y actúen en consecuencia. Así podrían verse tus resultados después de que haya suficientes datos:

En este caso, la variante mejoró significativamente el modelo de referencia, por lo que podríamos seleccionar Lanzar variante, lo que lanzaría el mensaje integrado en la app con el cupón para todos los usuarios.

8. Felicitaciones

Felicitaciones, creaste y ejecutaste correctamente tu primer experimento de mensajes integrados en la app. Ahora puedes ejecutar un experimento en tu propia app y usar los resultados para que tus campañas de mensajes integrados en la aplicación sean más eficaces.

Próximos pasos

Consulta algunos de estos codelabs…

• App multiplataforma con Flutter y Firestore
• Agrega un experimento de Firebase Remote Config a una app para Android

Lecturas adicionales

Solo exploramos la superficie de lo que se puede hacer con Firebase In-App Messaging y Firebase A/B Testing. Consulta estos recursos si quieres obtener más información…

• Crea experimentos de Messaging con pruebas A/B
• Crea experimentos de Remote Config con A/B Testing
• Explora los casos de uso de Firebase In-App Messaging
• Personaliza tus mensajes de Firebase In-App Messaging

Documentos de referencia

• Crea experimentos de mensajes desde la app con A/B Testing