Esta página se ha traducido con Cloud Translation API.

Su primer experimento de mensajería en la aplicación

1. Introducción

Objetivos

En este codelab, instrumentará un experimento de mensajería en la aplicación para una aplicación de recomendación de restaurantes móvil multiplataforma impulsada por Flutter y Cloud Firestore .

Una vez terminado, podrá diseñar e implementar experimentos de mensajería en la aplicación para aumentar de manera efectiva la participación del usuario en cualquier aplicación de iOS o Android mientras escribe una cantidad mínima de código.

lo que aprenderás

Cómo usar Firebase In-App Messaging (FIAM) en una aplicación Flutter
Cómo personalizar la apariencia de tus mensajes dentro de la aplicación
Cómo diseñar un experimento de mensajería dentro de la aplicación e implementarlo en su aplicación
Cómo interpretar los resultados de un experimento de mensajería en la aplicación

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

Soy nuevo en el tema y quiero una buena descripción general.

Sé algo sobre este tema, pero quiero un repaso.

Estoy buscando un código de ejemplo para usar en mi proyecto.

Estoy buscando una explicación de algo específico.

Mensajería en la aplicación de Firebase

Firebase In-App Messaging (FIAM) te ayuda a involucrar a los usuarios que usan activamente tu aplicación enviándoles mensajes específicos y contextuales que los empujan a completar acciones clave en la aplicación, como superar un nivel de juego, comprar un artículo o suscribirse a contenido. .

Pruebas A/B de Firebase

Con tecnología de Google Optimize, Firebase A/B Testing (ABT) te ayuda a optimizar la experiencia de tu aplicación al facilitar la ejecución, el análisis y la escala de experimentos de marketing y productos. Le brinda el poder de probar cambios en la interfaz de usuario, las funciones o las campañas de participación de su aplicación para ver si realmente modifican sus métricas clave (como ingresos y retención) antes de implementarlas ampliamente.

Que necesitas

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

Puedes ejecutar este codelab usando cualquiera de los siguientes dispositivos:

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

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

Un navegador de tu elección, como Chrome.
Un IDE o editor de texto de su elección, como Android Studio o VS Code configurado con los complementos Dart y Flutter. Se recomienda usar VS Code con Flutter.
La última versión estable de Flutter (o beta si te gusta vivir al límite).
Una cuenta de Google, como una cuenta de Gmail, para crear y administrar su proyecto de Firebase.
El código de muestra del codelab. Consulte el siguiente paso para saber cómo obtener el código.

2. Preparación

Obtener el código

Clona el repositorio de GitHub desde la línea de comando:

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 adelante, asegúrese de ejecutar comandos desde este directorio:

cd friendlyeats-flutter

Luego vaya al directorio de codelab y consulte 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 crear la aplicación FriendlyEats, como se muestra en el laboratorio de código multiplataforma Flutter de Firestore . Para los fines de este codelab, eliminamos la integración web en esta rama.

Importar la aplicación de inicio

Abra o importe el directorio codelab-fiam-abt a su IDE preferido. Este directorio contiene el código inicial para el codelab que consiste en una aplicación de recomendación de restaurantes. A través de este codelab, instrumentarás un experimento de mensajería en la aplicación para los usuarios de esta aplicación.

Crear un proyecto de Firebase

En Firebase console , haz clic en Agregar proyecto y luego nombra el proyecto de Firebase FriendlyEats . Recuerde el ID del proyecto de Firebase (o haga clic en el ícono Editar para configurar su ID de proyecto preferido).
Asegúrese de que Google Analytics esté habilitado para el proyecto y luego haga clic en Continuar.
Haga clic en Crear proyecto .

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

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

Habilitar autenticación anónima

Aunque la autenticación no es el foco de este codelab, es importante tener alguna forma de autenticación en su aplicación. Utilizará el inicio de sesión anónimo , lo que significa que el usuario inicia sesión silenciosamente sin que se le solicite.

Para habilitar el inicio de sesión anónimo:

En Firebase console, busque Autenticación en la barra de navegación izquierda.
Haga clic en Autenticación y luego haga clic en Comenzar y seleccione la pestaña Método de inicio de sesión (o vaya directamente a Firebase console ).
Habilite el proveedor de inicio de sesión anónimo y haga clic en Guardar .

Habilitar el inicio de sesión anónimo permite que la aplicación inicie sesión silenciosamente a sus usuarios cuando acceden a la aplicación. Para obtener más información, consulte la documentación de autenticación anónima para Android e iOS .

Habilitar Cloud Firestore

La aplicación utiliza Cloud Firestore para guardar y recibir información y calificaciones de restaurantes.

Para habilitar Cloud Firestore:

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

Seleccione la opción Iniciar en modo de prueba y haga clic en Siguiente después de leer el descargo de responsabilidad sobre las reglas de seguridad y luego en Habilitar .

El modo de prueba garantiza que pueda escribir libremente en la base de datos durante el desarrollo. Hará que su base de datos sea más segura más adelante en este codelab.

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 soporte para plataformas móviles, necesita:

Registre la plataforma deseada en el proyecto Firebase
Descargue el archivo de configuración específico de la plataforma y agréguelo al código.

En el directorio de nivel superior de tu aplicación 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 , seleccione Configuración del proyecto en la parte superior de la barra de navegación izquierda y haga clic en el botón iOS debajo de Sus aplicaciones en la página General .

Debería ver el siguiente cuadro de diálogo:

El valor importante a proporcionar es el ID del paquete de iOS. Obtienes el ID del paquete realizando los siguientes tres pasos.

En la herramienta de línea de comandos, vaya al directorio de nivel superior de su aplicación Flutter.
Ejecute el comando open ios/Runner.xcworkspace para abrir Xcode.

En Xcode, haga clic en el corredor de nivel superior en el panel izquierdo para mostrar la pestaña General en el panel derecho, como se muestra. Copie el valor del Identificador de paquete .

Vuelva al cuadro de diálogo de Firebase, pegue el identificador de paquete copiado en el campo ID del paquete de iOS y haga clic en Registrar aplicación .

Continuando en Firebase, siga las instrucciones para descargar el archivo de configuración GoogleService-Info.plist .
Vuelve a Xcode. Observe que Runner tiene una subcarpeta también llamada Runner (que se muestra en la imagen anterior).
Arrastre el archivo GoogleService-Info.plist (que acaba de descargar) a esa subcarpeta de Runner .
En el cuadro de diálogo que aparece en Xcode, haga clic en Finalizar .
Vuelve a la consola de Firebase. En el paso de configuración, haga clic en Siguiente , omita los pasos restantes y regrese a la página principal de Firebase console.

¡Ya terminaste de configurar tu aplicación Flutter para iOS!

Configurar Android

En Firebase Console , seleccione Configuración del proyecto en la parte superior de la barra de navegación izquierda y haga clic en el botón Android en Sus aplicaciones en la página General .

Deberías ver el siguiente cuadro de diálogo:

El valor importante a proporcionar es el nombre del paquete de Android . Obtiene el nombre del paquete cuando realiza los dos pasos siguientes:

En el directorio de tu aplicación Flutter, abre el archivo android/app/src/main/AndroidManifest.xml .
En el elemento manifest , busque el valor de cadena del atributo del package . Este valor es el nombre del paquete de Android (algo así como com.yourcompany.yourproject ). Copie este valor.
En el cuadro de diálogo de Firebase, pegue el nombre del paquete copiado en el campo de nombre del paquete de Android .
No necesitas el certificado de firma de depuración SHA-1 para este codelab. Deje esto en blanco.
Haga clic en Registrar aplicación .
Continuando en Firebase, sigue las instrucciones para descargar el archivo de configuración google-services.json .
Vaya al directorio de su aplicación Flutter y mueva el archivo google-services.json (que acaba de descargar) al directorio android/app .
De vuelta en Firebase console, omita los pasos restantes y regrese a la página principal de Firebase console.
Toda la configuración de Gradle ya está registrada. Si su aplicación aún se está ejecutando, ciérrela y reconstrúyala para permitir que Gradle instale dependencias.

¡Ya terminaste de configurar tu aplicación Flutter para Android!

4. Ejecute su aplicación localmente

¡Estás listo para comenzar a trabajar en tu aplicación! Primero, ejecute la aplicación localmente. Ahora puede ejecutar la aplicación en cualquier plataforma que haya configurado (y para la que tenga un dispositivo y un emulador disponibles).

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

flutter devices

Dependiendo de qué dispositivos estén disponibles, el resultado del comando anterior se parece a este:

Ahora, ejecuta la aplicación localmente con el siguiente comando:

flutter run

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

La aplicación se conecta automáticamente a su proyecto de Firebase e inicia sesión silenciosamente como usuario anónimo.

5. Crea y prueba tu primer mensaje.

Integre Firebase In-App Messaging en su aplicación

La integración básica de mensajería en la aplicación no requiere ningún código, todo lo que necesitas hacer es agregar la dependencia y ¡listo! Agregue la siguiente dependencia a su archivo pubspec.yaml

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

Redactar un mensaje en Firebase Console

Ahora que ha agregado FIAM a su aplicación, redactemos un mensaje que se activará cuando se abra su aplicación por primera vez.

Para redactar su primer mensaje:

En la sección Engage de Firebase console, haz clic en Mensajería dentro de la aplicación .
Haga clic en Crear su primera campaña en el panel de mensajería dentro de la aplicación.

Redactemos un mensaje modal básico para asegurarnos de que la integración esté funcionando. Siéntete libre de personalizar el mensaje como quieras: puedes agregar imágenes, botones o cambiar colores.

Asegúrese de seleccionar la aplicación con la que desea realizar la prueba; según la ruta de integración que esté siguiendo, puede tener iOS, Android o ambos.

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

Una vez realizada la programación podremos publicar el mensaje. Haga clic en "revisar" y debería ver algo como lo siguiente

Ver el mensaje en tu aplicación

Ahora, desinstale y reinstale su aplicación, y debería ver el mensaje que creó al abrirla. ¡Felicidades, acabas de enviar tu primer mensaje dentro de la aplicación! En el siguiente paso, aprenderá cómo agregar un evento de análisis para activar un mensaje en la aplicación en función de las acciones que realizan sus usuarios en la aplicación.

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

Integre Firebase Analytics en su aplicación

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

Agregue la dependencia de Firebase Analytics a Flutter en pubspec.yaml

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

Importar análisis en home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

Agregue 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();
}

Activa un evento de análisis cuando el usuario hace 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));
})

Edite su mensaje para que se active en el evento de análisis

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

En Firebase Console, regrese al Mensaje en la aplicación y edite su campaña existente.

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

Desde allí podemos publicar nuestros cambios haciendo clic en el botón "revisar"

Pruebe su disparador en la aplicación

En este punto deberías poder ejecutar tu aplicación con

flutter run

Y cuando haces clic en un restaurante deberías ver tu mensaje en la aplicación

7. Crea una campaña FIAM+ABT

Empezar con una meta

Nuestra aplicación Friendlyeats ya tiene muy buena pinta, pero para que sea útil necesitamos algunas reseñas. Estos provendrán de usuarios de Friendlyeats, así que busquemos alguna manera de alentar a los usuarios a dejar reseñas.

Primero definamos nuestro evento de conversión.

Como queremos ver si los usuarios están opinando sobre restaurantes, agreguemos un evento de análisis para medir este comportamiento.

Importe Firebase Analytics como antes y agregue 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);
}

Ahora activemos un evento en _onCreateReviewPressed cuando guardamos una reseña 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);
 }

Configurar la prueba A/B en Firebase Console

Ahora que sabemos cómo crear campañas de mensajería dentro de la aplicación, es momento de considerar qué tipo de comportamiento nos gustaría fomentar en nuestra aplicación a través de estas campañas. Para FriendlyEats, nos gustaría que más personas dejaran reseñas, ¡lo que haría que la aplicación fuera más útil! Hay algunas formas en las que podemos fomentar esto mediante mensajes dentro de la aplicación. Una es a través de un simple mensaje dentro de la aplicación que simplemente le dice al usuario que debe darle una reseña al restaurante para ayudar a mejorar la aplicación FriendlyEats. Otra forma es utilizar un mensaje en la aplicación para ofrecer algún tipo de incentivo por proporcionar una reseña, como un cupón o código de descuento para un restaurante determinado.

Ambos enfoques podrían aumentar la frecuencia con la que los usuarios brindan reseñas de restaurantes en FriendlyEats, y parece que proporcionar un cupón podría tener un impacto aún mayor en este caso. Pero, ¿cuánto más probable sería que proporcionar este cupón hiciera que los usuarios escribieran una reseña? ¿Vale la pena el coste del cupón en primer lugar? Para determinar esto, realizaremos un experimento de mensajería en la aplicación. Podemos usar Firebase A/B Testing para mostrar aleatoriamente uno de nuestros mensajes dentro de la aplicación a los usuarios y medir el efecto que esto tiene en el comportamiento del usuario, algo así como un ensayo clínico. Lo mejor de todo es que esto se puede hacer completamente a través de la consola Firebase, ¡sin necesidad de código!

Para redactar su primer experimento de mensajería en la aplicación:

En la sección Engage de Firebase console, haz clic en Pruebas A/B .
Haga clic en Crear experimento y seleccione que desea experimentar con la mensajería dentro de la aplicación . Esto lo llevará al compositor de experimentos que se muestra a continuación.

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

El siguiente paso es donde redactará los diferentes mensajes dentro de la aplicación que enviará a los usuarios en su experimento. El primer mensaje dentro de la aplicación que redactaremos es la "línea de base" o el control de nuestro experimento. Podemos hacer de este nuestro simple mensaje "por favor haga una reseña":

Ahora que tenemos una línea de base, crearemos una variante, el mensaje en la aplicación que ofrece a los usuarios un código de cupón para animarlos a dejar una reseña. Esto no es completamente visible en la vista previa a continuación, pero el título del mensaje es "¡Acepte un cupón, deje una reseña!" y el cuerpo del mensaje es "La próxima vez que esté en Burrito Cafe, use el código de cupón FRIENDLYEATS-15 en Pague para obtener un 15% de descuento en su pedido. ¡Y recuerde dejar una reseña después!". ¡Con suerte, esto inspirará a algunos usuarios a visitar Burrito Cafe!

En el siguiente paso, apuntaremos a nuestra aplicación y configuraremos la Exposición. Este es el porcentaje de usuarios elegibles (aquellos que cumplen con las condiciones de orientación/activación) que verán uno de los mensajes del experimento. Podemos configurar esto en 100% para este ejemplo, ya que nos gustaría que todos los usuarios vean la línea base o nuestra variante de cupón. Si desea tener un grupo de control al que no se le muestre ningún mensaje en la aplicación, puede reducir este porcentaje de exposición.

A continuación, definirá algunos objetivos para el experimento. Este es el resultado del experimento que nos gustaría medir. Configuraremos esto como el evento de análisis review_success que definimos en la sección anterior, ya que nos gustaría ver el impacto que nuestros diferentes mensajes dentro de la aplicación tienen en los usuarios que dejan reseñas de restaurantes.
Para la programación, dejaremos que la campaña comience inmediatamente y estableceremos click_restaurant como condición de activación, de modo que los usuarios vean uno de los dos mensajes en la aplicación cuando hagan clic en un restaurante.

Ahora, todo lo que queda es revisar nuestro experimento y presionar Iniciar experimento . ¡Entonces podremos sentarnos y esperar a que lleguen los datos de nuestro experimento!

Consulta la recogida de datos en tiempo real.

Ahora que hemos comenzado nuestro experimento, los usuarios de FriendlyEats verán aleatoriamente uno de los dos mensajes en la aplicación que redactamos cuando hagan clic en un restaurante, ya sea el mensaje base o el mensaje variante . Esto dividirá a nuestros usuarios en dos grupos, según el mensaje que vieron. Luego podemos buscar en la consola de Firebase (nuevamente en la sección Pruebas A/B) para comparar datos de análisis en vivo de ambos grupos. Los datos tardarán algún tiempo en llegar, ya que debemos esperar a que los usuarios vean los mensajes en la aplicación y actúen en consecuencia. Así es como podrían verse sus resultados después de tener suficientes datos:

En este caso, la variante mejoró significativamente la línea base, por lo que pudimos optar por seleccionar la variante Implementar , que luego desplegaría el mensaje en la aplicación con el cupón para todos los usuarios.

8. Felicitaciones

Felicitaciones, ha creado y ejecutado con éxito su primer experimento de mensajería en la aplicación. Ahora puede ejecutar un experimento en su propia aplicación y utilizar los resultados para hacer que sus campañas de mensajería dentro de la aplicación sean más efectivas.

¿Que sigue?

Echa un vistazo a algunos de estos codelabs...

Otras lecturas

Acabamos de arañar la superficie de lo que se puede hacer con Firebase In-App Messaging y Firebase A/B Testing. Échales un vistazo si quieres obtener más información...

Documentos de referencia

Cree experimentos de mensajería en la aplicación con pruebas A/B