Tu primer experimento de In‐App Messaging

1. Introducción

Objetivos

En este codelab, instrumentarás un experimento de mensajes desde la app para una app multiplataforma de recomendación de restaurantes en dispositivos móviles con la tecnología de Flutter y Cloud Firestore.

Cuando termines, podrás diseñar e implementar experimentos de mensajes desde la app para aumentar eficazmente la participación de los usuarios en cualquier app para iOS o Android y, al mismo tiempo, escribir 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 el aspecto de tus mensajes desde la app
• Cómo diseñar un experimento de mensajes desde la app e implementarlo en la app
• Cómo interpretar los resultados de un experimento de mensajes desde la app

Firebase In-App Messaging

Firebase In-App Messaging (FIAM) te permite interactuar con usuarios que usan activamente tu app a través del envío de mensajes segmentados y contextuales que les sugieren completar acciones clave en la app, como finalizar un nivel en un juego, comprar un artículo o suscribirse a contenido.

Firebase A/B Testing

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

Qué necesita

Si no estás muy 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 (Android o iOS) conectado a tu computadora y configurado en modo de desarrollador
• El simulador de iOS (requiere instalar herramientas de Xcode).
• Android Emulator (requiere configuración en Android Studio).

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

• El navegador que prefieras, como Chrome
• Un IDE o editor de texto que prefieras, como Android Studio o VS Code, 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.
• El código de muestra del codelab Consulta el siguiente paso para ver cómo obtener el código.

2. Preparación

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. De ahora en más, asegúrate de ejecutar los comandos desde este directorio:

cd friendlyeats-flutter

Luego, cambia al directorio del codelab y consulta 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 de esta rama.

Importa la app de partida

Abre o importa el directorio codelab-fiam-abt a tu IDE preferido. Este directorio contiene el código inicial para el codelab, que consiste en una app de recomendación de restaurantes. En este codelab, instrumentarás un experimento de mensajes desde la app para los usuarios de esta app.

Crea un proyecto de Firebase

1. En Firebase console, haz clic en Agregar proyecto y, luego, asigna el nombre FriendlyEats al proyecto. Recuerda el ID del proyecto de Firebase (o haz clic en el ícono Editar para establecer el ID del proyecto que prefieras).
2. Asegúrate de que Google Analytics esté habilitado para el proyecto y, luego, haz clic en Continuar.
3. Haz clic en Crear proyecto.

¡Felicitaciones! Acabas de crear tu primer proyecto de Firebase. Ahora, puedes hacer clic en el nombre del proyecto para ingresar a la consola.

A continuación, aprenderás a configurar y habilitar los servicios necesarios con Firebase console.

Habilitar autenticación anónima

Aunque la autenticación no es el enfoque 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 el usuario accede 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 Autenticación y, luego, en Comenzar. A continuación, selecciona la pestaña Método de acceso (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 acceso silenciosamente a tus usuarios cuando acceden a ella. Para obtener más información, consulta la documentación sobre autenticación anónima para Android y iOS.

Habilite Cloud Firestore

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

Para habilitar Cloud Firestore, haz lo siguiente:

1. En la barra de navegación izquierda de Firebase console, haz clic en Firestore.
2. Haz clic en Crear base de datos en el panel de Cloud Firestore.

3. Selecciona la opción Comenzar en modo de prueba y, luego, haz clic en Siguiente después de leer la renuncia de responsabilidad sobre las reglas de seguridad y, luego, en Habilitar.

El modo de prueba garantiza que puedas escribir con libertad en la base de datos durante el desarrollo. Más adelante en este codelab, mejorarás la seguridad de la base de datos.

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

La mayoría de los cambios de código necesarios 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, hay subdirectorios llamados ios y android. Estos directorios contienen los archivos de configuración específicos de la plataforma para iOS y Android, respectivamente.

Configurar 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 iOS debajo de Tus apps, en la página General.

Deberías ver el siguiente diálogo:

1. El valor importante que debes 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 el Runner de nivel superior del panel izquierdo para mostrar la pestaña General en el panel de la derecha, como se muestra. Copia el valor de Bundle Identifier.

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

6. 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 acabas de descargar) 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.

Terminaste de configurar tu app de Flutter para iOS.

Configurar 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 debajo de Tus apps, en la página General.

Verás el siguiente diálogo :

2. El valor importante que debes proporcionar es el nombre del paquete de Android. Obtienes el nombre del paquete cuando realizas los dos pasos siguientes:

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 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. Deja este campo en blanco.
7. Haga 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. Ya se registró 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.

Terminaste de configurar tu app de Flutter para Android.

4. Ejecuta tu app de manera local

Ya está todo listo para que comiences 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 es similar al siguiente:

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

flutter run

Ahora, deberías ver tu copia de FriendlyEats, conectada a tu 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

Cómo integrar Firebase In‐App Messaging en tu app

La integración básica de In-App Messaging 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
  # ...

Redacta un mensaje en Firebase console

Ahora que agregaste FIAM a tu app, redactemos un mensaje que se activará cuando la app se abra 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 Create your first campaign en el panel In-App Messaging.

Redactemos un mensaje modal básico para asegurarnos de que la integración funcione. Puedes personalizar el mensaje como quieras, ya que puedes agregar imágenes, botones o cambiar colores.

Asegúrate de segmentar la app con la que quieras realizar la prueba. Según la ruta de integración que estés siguiendo, 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 finalizada la programación, podremos publicar el mensaje. Haz clic en "Revisar" y deberías ver algo similar a lo siguiente:

Visualiza el mensaje en tu app

Ahora, desinstala y vuelve a instalar la app. Cuando la abras, deberías ver el mensaje que creaste. ¡Felicitaciones! Acabas de enviar tu primer mensaje desde la app. En el siguiente paso, aprenderás a agregar un evento de Analytics para activar un mensaje en la app basado en las acciones que los usuarios realizan en ella.

6. Integra Firebase Analytics para la activación avanzada de mensajes

Integra Firebase Analytics a tu app.

Para comprender cómo los usuarios interactúan con nuestra app y activar un mensaje en la app basado en 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. Importa 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 estadísticas cuando el usuario haga clic en la tarjeta de un 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", activemos nuestro mensaje desde la app en función de este, en lugar de hacerlo cuando el usuario abra la app.

En Firebase console, vuelve a Mensajes desde la aplicación y edita tu campaña existente.

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

Desde allí, podemos publicar los 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

Y cuando hagas clic en un restaurante, deberías ver tu mensaje desde la app

7. Crear una campaña FIAM+ABT

Comienza con un objetivo

Nuestra aplicación Friendlyeats ya se ve genial, pero necesitamos tener algunas opiniones para que sea útil. Estos se obtendrán de los usuarios de Friendlyeats, así que busquemos una manera de alentar a los usuarios a dejar opiniones.

Primero, definamos nuestro evento de conversión

Como queremos ver si los usuarios opinan sobre restaurantes, podemos agregar un evento de estadísticas 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, activemos un evento en _onCreateReviewPressed cuando guardemos una opinió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 A/B Test en Firebase console

Ahora que sabemos cómo crear campañas de mensajes desde la app, es hora de evaluar 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 dejen opiniones, lo que haría que la aplicación sea más útil. Hay varias formas de fomentar esto mediante los mensajes desde la app. Una es a través de un mensaje simple en la app que solo le dice al usuario que debe darle una opinión al restaurante para ayudar a mejorar la app FriendlyEats. Otra forma es usar un mensaje desde la app para ofrecer algún tipo de incentivo, como un cupón o un código de descuento a un restaurante determinado.

Ambos enfoques podrían aumentar la frecuencia con la que los usuarios proporcionan opiniones sobre restaurantes en FriendlyEats, y parece que proporcionar un cupón podría tener un impacto aún mayor en este caso. Sin embargo, ¿qué tan probable es que proporcionar este cupón haga que los usuarios escriban una opinión? ¿Vale la pena el costo del cupón en primer lugar? Para determinar esto, realizaremos un experimento de mensajes desde la app. Podemos usar Firebase A/B Testing para mostrar uno de nuestros mensajes desde la app de forma aleatoria a los usuarios y medir el efecto que tiene en el comportamiento de los usuarios, como en un ensayo clínico. Lo mejor de todo es que puedes hacerlo completamente a través de Firebase console, sin necesidad de código.

Para redactar tu primer experimento de mensajes desde la app, sigue estos pasos:

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

Asígnale un nombre y una descripción opcional a tu experimento.

4. En el siguiente paso, redactarás los diferentes mensajes desde la app que enviarás a los usuarios del experimento. El primer mensaje desde la app que redactaremos es el “modelo de referencia” o el control de nuestro experimento. Podemos hacer que este sea nuestro mensaje sencillo de "haz una revisión":

5. Ahora que tenemos un modelo de referencia, crearemos una variante, el mensaje desde la app que ofrece a los usuarios un código de cupón para animarlos 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 estés en el Burrito Cafe, usa el código de cupón FRIENDLYEATS-15 cuando confirmes la compra para obtener un 15% de descuento. Recuerda dejar una opinión después". ¡Esperamos que esto inspire a algunos usuarios a echar un vistazo a Burrito Cafe!

En el siguiente paso, apuntaremos a nuestra app y configuraremos la exposición. Es el porcentaje de usuarios aptos (los que cumplen las condiciones de segmentación o activación) que verán uno de los mensajes del experimento. Podemos simplemente establecerlo en 100% para este ejemplo, ya que nos gustaría que todos los usuarios vean el modelo de referencia o la variante de nuestro cupón. Si quieres tener un grupo de control que no muestre ningún mensaje desde la app, 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 esto como el evento de estadísticas review_success que definimos en la sección anterior, ya que nos gustaría ver el impacto que tienen nuestros diferentes mensajes desde 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 desde la app cuando hagan clic en un restaurante.

9. Ahora, solo falta revisar nuestro experimento y presionar Iniciar experimento. Luego, podemos relajarnos y esperar a que lleguen los datos de nuestro experimento.

Revisa la recopilación de datos en tiempo real

Ahora que comenzamos nuestro experimento, los usuarios de FriendlyEats verán de forma aleatoria uno de los dos mensajes desde la app que redactamos cuando hacen clic en un restaurante, ya sea el mensaje de baseline o el mensaje de variant. Esta acción dividirá a nuestros usuarios en dos grupos, según el mensaje que vieron. Luego, podemos buscar en Firebase console (nuevamente en la sección A/B Testing) para comparar los datos de estadísticas en tiempo real de ambos grupos. Los datos tardarán un tiempo en llegar, ya que debemos esperar a que los usuarios vean los mensajes desde la app y actúen en consecuencia. A continuación, te mostramos cómo se verían los resultados después de contar con datos suficientes:

En este caso, la variante mejoró significativamente el modelo de referencia, por lo que pudimos elegir seleccionar Lanzar variante, que luego lanzaría el mensaje desde la app con el cupón para todos los usuarios.

8. ¡Felicitaciones!

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

¿Qué sigue?

Mira algunos de estos codelabs...

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

Lecturas adicionales

Acabamos de aprender lo que se puede hacer con Firebase In‐App Messaging y Firebase A/B Testing. Consulta estas opciones para obtener más información...

• Crea experimentos de Messaging con A/B Testing
• 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 In‐App Messaging con A/B Testing