Tu primer experimento de mensajes desde la app

1. Introducción

Objetivos

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

Cuando termines, podrás diseñar e implementar experimentos de mensajes directos desde la app para aumentar de manera eficaz la participación de los usuarios en cualquier app para iOS o Android mientras escribes 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 integrados en la aplicación
• Cómo diseñar un experimento de mensajes desde la app y, luego, implementarlo en tu app
• Cómo interpretar los resultados de un experimento de mensajes desde la app

¿Qué te gustaría aprender en este codelab?

No sé nada del tema y me gustaría obtener una buena descripción general. Tengo algunos conocimientos sobre este tema, pero me gustaría repasarlos. Estoy buscando código de ejemplo para usar en mi proyecto. Estoy buscando una explicación sobre un tema específico.

Firebase In-App Messaging

Firebase In-App Messaging (FIAM) te permite interactuar con usuarios que usan la app activamente mediante 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

Firebase A/B Testing (ABT), que se basa en 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:

• El navegador que elijas, 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 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 obtener el código.

Nota: Puedes compilar apps con Flutter mediante cualquier editor de texto combinado con nuestras herramientas de línea de comandos. Sin embargo, te recomendamos que uses un complemento de editor (para Android Studio, IntelliJ o VS Code) para obtener una experiencia aún mejor. Estos complementos te brindan finalización de código, resaltado de sintaxis, ayuda para la edición de widgets, asistencia para la ejecución y depuración, y mucho más.

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 al IDE que prefieras. Este directorio contiene el código de partida del codelab, que consiste en una app para recomendar restaurantes. A través de este codelab, instrumentarás un experimento de mensajería en la app para los usuarios de esta app.

Crea un proyecto de Firebase

1. En Firebase console, haz clic en Agregar proyecto y asígnale 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.

Importante: Tu proyecto de Firebase se llama FriendlyEats, pero Firebase asigna, automáticamente, un ID único del proyecto en el formato friendlyeats-1234. Este identificador único es la manera en la que, en realidad, se identifica tu proyecto (incluso en la interfaz de línea de comandos), mientras que FriendlyEats es solo un nombre visible.

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

Habilita 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 Autenticación y, luego, en Comenzar y 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, de manera silenciosa, acceso a tus usuarios cuando ingresan a la app. Para obtener más información, consulta la documentación de 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 que esté cerca de tus usuarios.
5. Haz clic en Iniciar 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 públicamente 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.

Importante: Debes registrar todas las plataformas que desees usar dentro del mismo proyecto de Firebase.

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

Sugerencia: Consulta Qué son los IDs de las apps y los identificadores de paquetes para obtener más información sobre los IDs de los paquetes de iOS.

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.

Sugerencia: Consulta Acerca de los archivos de listas de propiedades de información para obtener más información acerca de las listas de propiedades de 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.

Nota: Los valores reales de yourcompany y yourproject dependen del nombre que le hayas asignado a tu app de Flutter.

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

Nota: Si ya agregaste una app (por ejemplo, la app para iOS de la sección anterior), haz clic en Agregar app.

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:

Sugerencia: Lee Cómo establecer el ID de aplicación para obtener más información sobre los IDs 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 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 copiado 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. 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 revisó 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 manera local

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 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 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 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, escribamos un mensaje que se activará cuando 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 Crea tu primera campaña en el panel de In-App Messaging.

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

Asegúrate de segmentar tus 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 tu app

Ahora, desinstala y vuelve a instalar la app. Deberías ver el mensaje que creaste cuando se abra. ¡Felicitaciones! Acabas de enviar tu primer mensaje en la app. En el siguiente paso, aprenderás a agregar un evento de Analytics para activar un mensaje desde la app según las acciones que realicen los usuarios en ella.

6. Integra Firebase Analytics para activar mensajes avanzados

Integra Firebase Analytics en tu app

Para comprender cómo interactúan los usuarios con nuestra aplicación y activar un mensaje desde la aplicación en función de 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 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 el mensaje para que se active en el evento de Analytics

Ahora que tenemos un evento "click_restaurant", activemos nuestro mensaje en la aplicación en función de ese evento en lugar de hacerlo cuando el usuario abra la aplicación.

En Firebase console, vuelve a la sección Mensaje en 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 hacer clic en el botón "revisar" para publicar los cambios.

Cómo probar 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 en 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 algunas opiniones. Estas se obtendrán de los usuarios de Friendlyeats, así que busquemos una forma de alentarlos a que dejen opiniones.

Primero, definamos nuestro evento de conversión

Como queremos ver si los usuarios están revisando restaurantes, agreguemos un evento de Analytics para medir este comportamiento.

1. Importa Firebase Analytics como lo hiciste 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 una prueba A/B en Firebase console

Ahora que sabemos cómo crear campañas de mensajes desde la aplicación, es hora de considerar qué tipo de comportamiento nos gustaría fomentar en nuestra aplicación 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 app fuera más útil. Existen varias formas en las que podríamos fomentar esto con mensajes en la app. Una es a través de un mensaje simple en la app que le indique al usuario que debe escribir una opinión sobre el restaurante para ayudar a mejorar la app de FriendlyEats. Otra forma es usar un mensaje en la app para ofrecer algún tipo de incentivo por escribir 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 más fuerte en este caso. Sin embargo, ¿qué tan probable es que los usuarios escriban una opinión si se les proporciona este cupón? ¿Vale la pena el costo del cupón? Para determinarlo, ejecutaremos un experimento de mensajes directos desde la aplicación. Podemos usar Firebase A/B Testing para mostrarles a los usuarios uno de nuestros mensajes directos desde la aplicación de forma aleatoria y medir el efecto que tiene en su comportamiento, como en un ensayo clínico. Lo mejor de todo es que esto se puede hacer completamente a través de la consola de Firebase, sin necesidad de escribir 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 que quieres experimentar con In-App Messaging. Se te dirigirá al compilador de experimentos que se muestra a continuación.

Asigna un nombre a tu experimento y una descripción opcional.

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

5. Ahora que tenemos un modelo de referencia, compondremos 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. No se puede ver por completo en la vista previa que aparece a continuación, pero el título del mensaje es "Obtén un cupón y deja un comentario" y el cuerpo del mensaje es "La próxima vez que visites Burrito Café, usa el código de cupón FRIENDLYEATS-15 en la confirmación de la compra para obtener un 15% de descuento en tu pedido. Y recuerda dejar una opinión después". Con suerte, esto inspirará a algunos usuarios a visitar Burrito Café.

En el siguiente paso, segmentaremos nuestra aplicación 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 establecerlo en 100%, ya que queremos que todos los usuarios vean el modelo de 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. Lo configuraremos como el evento de Analytics 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 aplicación en los usuarios que dejan opiniones sobre restaurantes.
8. En cuanto a la programación, permitiremos que la campaña comience de inmediato y estableceremos click_restaurant como la condición de activación para que los usuarios vean uno de los dos mensajes integrados en la aplicación cuando hagan clic en un restaurante.

9. Ahora, solo queda revisar el 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 de forma aleatoria uno de los dos mensajes directos desde la aplicación que escribimos cuando hagan clic en un restaurante, ya sea el mensaje de comparación o el de variante. Esto dividirá a nuestros usuarios en dos grupos, según el mensaje que vieron. Luego, podemos consultar Firebase console (otra vez en la sección A/B Testing) para comparar los datos de análisis en vivo de ambos grupos. Los datos tardarán un tiempo en llegar, ya que debemos esperar a que los usuarios vean los mensajes en la app y actúen según corresponda. Así es como podrían verse tus resultados después de recopilar suficientes datos:

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

8. Felicitaciones

Felicitaciones, creaste y ejecutaste correctamente tu primer experimento de mensajes directos desde la aplicación. Ahora puedes ejecutar un experimento en tu propia aplicación 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
• Cómo agregar un experimento de Firebase Remote Config a una app para Android

Lecturas adicionales

Solo hemos arañado 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 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