Cette page a été traduite par l'API Cloud Translation.

Votre première expérience de messagerie intégrée à l'application

1. Introduction

Objectifs

Dans cet atelier de programmation, vous allez tester une expérience de messagerie intégrée à une application mobile de recommandation de restaurants multiplateforme optimisée par Flutter et Cloud Firestore .

Une fois terminé, vous serez en mesure de concevoir et de mettre en œuvre des expériences de messagerie dans l'application pour augmenter efficacement l'engagement des utilisateurs pour n'importe quelle application iOS ou Android tout en écrivant une quantité minimale de code.

Ce que vous apprendrez

Comment utiliser la messagerie Firebase In-App (FIAM) dans une application Flutter
Comment personnaliser l'apparence de vos messages dans l'application
Comment concevoir une expérience de messagerie dans l'application et la mettre en œuvre dans votre application
Comment interpréter les résultats d'une expérience de messagerie intégrée à l'application

Qu'aimeriez-vous apprendre de cet atelier de programmation ?

Je suis nouveau sur le sujet et je veux un bon aperçu.

Je connais quelque chose sur ce sujet, mais je veux un rappel.

Je recherche un exemple de code à utiliser dans mon projet.

Je cherche une explication sur quelque chose de spécifique.

Messagerie intégrée à l'application Firebase

Firebase In-App Messaging (FIAM) vous aide à impliquer les utilisateurs qui utilisent activement votre application en leur envoyant des messages ciblés et contextuels qui les incitent à effectuer des actions clés dans l'application, comme terminer un niveau de jeu, acheter un article ou s'abonner à du contenu. .

Tests A/B Firebase

Propulsé par Google Optimize, Firebase A/B Testing (ABT) vous aide à optimiser l'expérience de votre application en facilitant l'exécution, l'analyse et la mise à l'échelle des expériences de produits et de marketing. Il vous donne le pouvoir de tester les modifications apportées à l'interface utilisateur, aux fonctionnalités ou aux campagnes d'engagement de votre application pour voir si elles font réellement évoluer vos indicateurs clés (comme les revenus et la fidélisation) avant de les déployer à grande échelle.

De quoi as-tu besoin

Si vous n'êtes pas très familier avec Flutter ou Firestore, complétez d'abord l'atelier de programmation Firebase pour Flutter :

Vous pouvez exécuter cet atelier de programmation à l'aide de l'un des appareils suivants :

Un appareil physique (Android ou iOS) connecté à votre ordinateur et configuré en mode développeur.
Le simulateur iOS. (Nécessite l'installation des outils Xcode ).
L'émulateur Android. (Nécessite une configuration dans Android Studio ).

En plus de ce qui précède, vous aurez également besoin de :

Un navigateur de votre choix, tel que Chrome.
Un IDE ou un éditeur de texte de votre choix, comme Android Studio ou VS Code configuré avec les plugins Dart et Flutter. VS Code est recommandé pour une utilisation avec Flutter.
La dernière version stable de Flutter (ou bêta si vous aimez vivre à la limite).
Un compte Google, comme un compte Gmail, pour créer et gérer votre projet Firebase.
Exemple de code de l'atelier de programmation. Voir l'étape suivante pour savoir comment obtenir le code.

2. Mise en place

Obtenez le code

Clonez le dépôt GitHub à partir de la ligne de commande :

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

L'exemple de code sera cloné dans le répertoire friendlyeats-flutter . À partir de maintenant, assurez-vous d'exécuter les commandes depuis ce répertoire :

cd friendlyeats-flutter

Accédez ensuite au répertoire Codelab et consultez la branche fiam-abt :

git checkout fiam-abt

Cette branche contient tout le code nécessaire à cet atelier de programmation, y compris une version terminée dans le dossier done . Les autres branches de ce référentiel contiennent du code pour créer l'application FriendlyEats, comme indiqué dans l' atelier de programmation multiplateforme Firestore Flutter . Pour les besoins de cet atelier de programmation, nous avons supprimé l'intégration Web dans cette branche.

Importer l'application de démarrage

Ouvrez ou importez le répertoire codelab-fiam-abt dans votre IDE préféré. Ce répertoire contient le code de départ de l'atelier de programmation qui consiste en une application de recommandation de restaurants. Grâce à cet atelier de programmation, vous testerez une expérience de messagerie dans l'application pour les utilisateurs de cette application.

Créer un projet Firebase

Dans la console Firebase , cliquez sur Ajouter un projet , puis nommez le projet Firebase FriendlyEats . N'oubliez pas l'ID de projet de votre projet Firebase (ou cliquez sur l'icône Modifier pour définir votre ID de projet préféré).
Assurez-vous que Google Analytics est activé pour le projet, puis cliquez sur Continuer.
Cliquez sur Créer un projet .

Toutes nos félicitations! Vous venez de créer votre premier projet Firebase. Maintenant, vous pouvez cliquer sur le nom du projet pour accéder à la console.

Ensuite, vous parcourez la configuration et l'activation des services nécessaires à l'aide de la console Firebase.

Activer l'authentification anonyme

Bien que l'authentification ne soit pas au centre de cet atelier de programmation, il est important de disposer d'une certaine forme d'authentification dans votre application. Vous utiliserez la connexion anonyme , ce qui signifie que l'utilisateur est connecté silencieusement sans y être invité.

Pour activer la connexion anonyme :

Dans la console Firebase, localisez Authentification dans la barre de navigation de gauche.
Cliquez sur Authentification , puis cliquez sur Commencer et sélectionnez l'onglet Méthode de connexion (ou accédez directement à la console Firebase ).
Activez le fournisseur de connexion anonyme et cliquez sur Enregistrer .

L'activation de la connexion anonyme permet à l'application de connecter silencieusement vos utilisateurs lorsqu'ils accèdent à l'application. Pour en savoir plus, consultez la documentation sur l'authentification anonyme pour Android et iOS .

Activer Cloud Firestore

L'application utilise Cloud Firestore pour enregistrer et recevoir des informations et des évaluations sur les restaurants.

Pour activer Cloud Firestore :

Dans la barre de navigation de gauche de la console Firebase, cliquez sur Firestore .
Cliquez sur Créer une base de données dans le volet Cloud Firestore.

Sélectionnez l'option Démarrer en mode test , puis cliquez sur Suivant après avoir lu la clause de non-responsabilité concernant les règles de sécurité, puis sur Activer .

Le mode test garantit que vous pouvez écrire librement dans la base de données pendant le développement. Vous rendrez votre base de données plus sécurisée plus tard dans cet atelier de programmation.

3. Configuration Firebase spécifique aux mobiles

La plupart des modifications de code requises pour activer la prise en charge de Firebase sont déjà enregistrées dans le projet sur lequel vous travaillez. Cependant, afin d'ajouter la prise en charge des plates-formes mobiles, vous devez :

Enregistrez la plateforme souhaitée sur le projet Firebase
Téléchargez le fichier de configuration spécifique à la plate-forme et ajoutez-le au code.

Dans le répertoire de niveau supérieur de votre application Flutter, il existe des sous-répertoires appelés ios et android . Ces répertoires contiennent respectivement les fichiers de configuration spécifiques à la plate-forme pour iOS et Android.

Configurer iOS

Dans la console Firebase , sélectionnez Paramètres du projet en haut de la barre de navigation de gauche, puis cliquez sur le bouton iOS sous Vos applications sur la page Général .

Vous devriez voir la boîte de dialogue suivante :

La valeur importante à fournir est l’ ID du bundle iOS. Vous obtenez l’ID du bundle en effectuant les trois étapes suivantes.

Dans l'outil de ligne de commande, accédez au répertoire de niveau supérieur de votre application Flutter.
Exécutez la commande open ios/Runner.xcworkspace pour ouvrir Xcode.

Dans Xcode, cliquez sur le Runner de niveau supérieur dans le volet de gauche pour afficher l'onglet Général dans le volet de droite, comme indiqué. Copiez la valeur de l'identifiant du bundle .

Revenez à la boîte de dialogue Firebase, collez l' identifiant de bundle copié dans le champ ID de bundle iOS , puis cliquez sur Register App .

En continuant dans Firebase, suivez les instructions pour télécharger le fichier de configuration GoogleService-Info.plist .
Revenez à Xcode. Notez que Runner possède un sous-dossier également appelé Runner (illustré dans l'image précédente).
Faites glisser le fichier GoogleService-Info.plist (que vous venez de télécharger) dans ce sous-dossier Runner .
Dans la boîte de dialogue qui apparaît dans Xcode, cliquez sur Terminer .
Revenez à la console Firebase. Dans l'étape de configuration, cliquez sur Suivant , ignorez les étapes restantes et revenez à la page principale de la console Firebase.

Vous avez terminé de configurer votre application Flutter pour iOS !

Configurer Android

Dans la console Firebase , sélectionnez Paramètres du projet en haut de la barre de navigation de gauche, puis cliquez sur le bouton Android sous Vos applications sur la page Général .

Vous devriez voir la boîte de dialogue suivante :

La valeur importante à fournir est le nom du package Android . Vous obtenez le nom du package lorsque vous effectuez les deux étapes suivantes :

Dans le répertoire de votre application Flutter, ouvrez le fichier android/app/src/main/AndroidManifest.xml .
Dans l’élément manifest , recherchez la valeur de chaîne de l’attribut package . Cette valeur est le nom du package Android (quelque chose comme com.yourcompany.yourproject ). Copiez cette valeur.
Dans la boîte de dialogue Firebase, collez le nom du package copié dans le champ Nom du package Android .
Vous n'avez pas besoin du certificat de signature de débogage SHA-1 pour cet atelier de programmation. Laissez ce champ vide.
Cliquez sur Enregistrer l'application .
En continuant dans Firebase, suivez les instructions pour télécharger le fichier de configuration google-services.json .
Accédez au répertoire de votre application Flutter et déplacez le fichier google-services.json (que vous venez de télécharger) dans le répertoire android/app .
De retour dans la console Firebase, ignorez les étapes restantes et revenez à la page principale de la console Firebase.
Toute la configuration de Gradle est déjà archivée. Si votre application est toujours en cours d'exécution, fermez-la et reconstruisez-la pour permettre à Gradle d'installer les dépendances.

Vous avez terminé de configurer votre application Flutter pour Android !

4. Exécutez votre application localement

Vous êtes prêt à commencer à travailler sur votre application ! Tout d’abord, exécutez l’application localement. Vous pouvez désormais exécuter l'application sur n'importe quelle plate-forme que vous avez configurée (et pour laquelle vous disposez d'un appareil et d'un émulateur).

Découvrez quels appareils sont disponibles avec la commande suivante :

flutter devices

Selon les appareils disponibles, le résultat de la commande précédente ressemble à ceci :

Maintenant, exécutez l'application localement avec la commande suivante :

flutter run

Maintenant, vous devriez voir votre copie de FriendlyEats, connectée à votre projet Firebase.

L'application se connecte automatiquement à votre projet Firebase et vous connecte silencieusement en tant qu'utilisateur anonyme.

5. Créez et testez votre premier message

Intégrez la messagerie Firebase In-App dans votre application

L'intégration de base de la messagerie In-App est totalement sans code, tout ce que vous avez à faire est d'ajouter la dépendance et vous êtes prêt à partir ! Ajoutez la dépendance suivante à votre fichier pubspec.yaml

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

Composez un message dans la console Firebase

Maintenant que vous avez ajouté FIAM à votre application, rédigeons un message qui se déclenchera lors de la première ouverture de votre application.

Pour rédiger votre premier message :

Dans la section Engage de la console Firebase, cliquez sur Messagerie intégrée à l'application .
Cliquez sur Créer votre première campagne dans le volet Messagerie In-App.

Composons un message modal de base pour nous assurer que l'intégration fonctionne. N'hésitez pas à personnaliser le message comme vous le souhaitez : vous pouvez ajouter des images, des boutons ou modifier les couleurs.

Assurez-vous de cibler l'application avec laquelle vous souhaitez tester, en fonction du chemin d'intégration que vous suivez, vous pouvez avoir iOS, Android ou les deux.

Nous voulons nous assurer que le message se déclenche à l'ouverture de l'application, donc la configuration de planification par défaut fonctionnera ici.

Une fois la planification effectuée, nous pouvons publier le message. Cliquez sur "réviser" et vous devriez voir quelque chose comme ce qui suit

Afficher le message dans votre application

Maintenant, désinstallez et réinstallez votre application, et vous devriez voir le message que vous avez créé s'afficher à l'ouverture. Félicitations, vous venez d'envoyer votre premier message dans l'application ! Dans l'étape suivante, vous apprendrez comment ajouter un événement d'analyse, afin de déclencher un message dans l'application en fonction des actions effectuées par vos utilisateurs dans l'application.

6. Intégrez Firebase Analytics pour le déclenchement avancé de messages

Intégrez Firebase Analytics dans votre application

Afin de comprendre comment les utilisateurs interagissent avec notre application et de déclencher un message dans l'application en fonction de leurs actions, nous allons désormais ajouter un événement Analytics lorsqu'un utilisateur clique sur un restaurant.

Ajoutez la dépendance Firebase Analytics à Flutter dans pubspec.yaml

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

Importer des analyses dans home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

Ajoutez une instance de Firebase Analytics à la classe HomePage dans home_page.dart

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

Déclenchez un événement d'analyse lorsque l'utilisateur clique sur une carte de restaurant dans home_page.dart

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

Modifiez votre message pour déclencher l'événement d'analyse

Maintenant que nous avons un événement "click_restaurant", déclenchons notre message dans l'application en fonction de cela plutôt que lorsque l'utilisateur ouvre l'application.

Dans la console Firebase, revenez au message intégré à l'application et modifiez votre campagne existante.

Modifiez maintenant la section de planification pour déclencher le message du nouvel événement

De là, nous pouvons publier nos modifications en cliquant sur le bouton « réviser »

Testez votre déclencheur dans l'application

À ce stade, vous devriez pouvoir exécuter votre application avec

flutter run

Et lorsque vous cliquez sur un restaurant, vous devriez voir votre message dans l'application

7. Créez une campagne FIAM+ABT

Commencez par un objectif

Notre application Friendlyeats a déjà fière allure, mais pour qu'elle soit utile, nous avons besoin de quelques critiques. Ceux-ci proviendront des utilisateurs de Friendlyeats, trouvons donc un moyen d'encourager les utilisateurs à laisser des avis.

Définissons d’abord notre événement de conversion

Puisque nous voulons voir si les utilisateurs évaluent les restaurants, ajoutons un événement d'analyse pour mesurer ce comportement.

Importez Firebase Analytics comme avant et ajoutez une instance d'Analytics à RestaurantPage dans 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);
}

Déclenchons maintenant un événement dans _onCreateReviewPressed lorsque nous enregistrons un avis dans 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);
 }

Configurer le test A/B dans la console Firebase

Maintenant que nous savons comment créer des campagnes de messagerie dans l'application, il est temps de réfléchir au type de comportement que nous aimerions encourager dans notre application à travers ces campagnes. Pour FriendlyEats, nous aimerions que davantage de personnes laissent des avis, ce qui rendrait l'application plus utile ! Nous pouvons encourager cela de plusieurs manières en utilisant des messages intégrés à l'application. La première consiste à envoyer un simple message dans l'application qui indique simplement à l'utilisateur qu'il doit donner un avis au restaurant pour l'aider à améliorer l'application FriendlyEats. Une autre façon consiste à utiliser un message dans l'application pour offrir un certain type d'incitation à donner un avis, comme un coupon ou un code de réduction pour un restaurant donné.

Les deux approches pourraient augmenter la fréquence à laquelle les utilisateurs fournissent des avis sur les restaurants sur FriendlyEats, et il semble que fournir un coupon pourrait avoir un impact encore plus fort dans ce cas. Mais dans quelle mesure le fait de fournir ce coupon inciterait-il les utilisateurs à rédiger un avis ? Est-ce que cela vaut le prix du coupon en premier lieu ? Pour le déterminer, nous lancerons une expérience de messagerie dans l'application ! Nous pouvons utiliser Firebase A/B Testing pour afficher de manière aléatoire l'un de nos messages intégrés à l'application aux utilisateurs et mesurer l'effet que cela a sur le comportement des utilisateurs, un peu comme un essai clinique. Mieux encore, cela peut être fait entièrement via la console Firebase, sans avoir besoin de code !

Pour composer votre première expérience de messagerie dans l'application :

Dans la section Engage de la console Firebase, cliquez sur A/B Testing .
Cliquez sur Créer une expérience et sélectionnez ce que vous souhaitez expérimenter avec la messagerie intégrée à l'application . Cela vous amènera au compositeur d’expériences présenté ci-dessous.

Donnez un nom à votre expérience et une description facultative.

L'étape suivante consiste à rédiger les différents messages intégrés à l'application que vous enverrez aux utilisateurs de votre expérience. Le premier message in-app que nous rédigerons est la « ligne de base », ou le contrôle de notre expérience. Nous pouvons en faire notre simple message « Veuillez faire un avis » :

Maintenant que nous avons une base de référence, nous allons maintenant composer une variante, le message in-app qui propose aux utilisateurs un code promo pour les encourager à laisser un avis. Ceci n'est pas entièrement visible dans l'aperçu ci-dessous, mais le titre du message est "Prenez un coupon, laissez un avis!", et le corps du message est "La prochaine fois que vous serez au Burrito Café, utilisez le code promo FRIENDLYEATS-15 à passez à la caisse pour 15 % de réduction sur votre commande. Et n'oubliez pas de laisser un avis après!". Nous espérons que cela incitera certains utilisateurs à découvrir le Burrito Café !

Dans la prochaine étape, nous ciblerons notre application et définirons l'exposition. Il s'agit du pourcentage d'utilisateurs éligibles (ceux qui satisfont aux conditions de ciblage/déclenchement) qui verront l'un des messages du test. Nous pouvons simplement définir cette valeur sur 100 % pour cet exemple, car nous aimerions que tous les utilisateurs voient soit la référence, soit notre variante de coupon. Si vous souhaitez avoir un groupe témoin qui ne reçoit aucun message dans l'application, vous pouvez réduire ce pourcentage d'exposition.

Ensuite, vous définirez quelques objectifs pour l’expérience. C'est le résultat de l'expérience que nous aimerions mesurer. Nous définirons cela comme l'événement d'analyse review_success que nous avons défini dans la section précédente, car nous aimerions voir l'impact de nos différents messages dans l'application sur les utilisateurs qui laissent des avis sur les restaurants.
Pour la planification, nous laisserons la campagne démarrer immédiatement et définirons click_restaurant comme condition de déclenchement, afin que les utilisateurs voient l'un des deux messages intégrés à l'application lorsqu'ils cliquent sur un restaurant.

Il ne reste plus qu'à revoir notre expérience et à cliquer sur Démarrer l'expérience . Ensuite, nous pouvons nous asseoir et attendre que les données de notre expérience arrivent !

Consultez la collecte de données en temps réel

Maintenant que nous avons commencé notre expérience, les utilisateurs de FriendlyEats verront aléatoirement l'un des deux messages intégrés à l'application que nous avons composés lorsqu'ils cliquent sur un restaurant, soit le message de base , soit le message variante . Cela divisera nos utilisateurs en deux groupes, en fonction du message qu'ils ont vu. Nous pouvons ensuite consulter la console Firebase (à nouveau sous la section Tests A/B) pour comparer les données d'analyse en direct des deux groupes. Il faudra un certain temps pour que les données arrivent, car nous devons attendre que les utilisateurs voient réellement les messages dans l'application et agissent en conséquence. Voici à quoi pourraient ressembler vos résultats après suffisamment de données :

Dans ce cas, la variante s'est considérablement améliorée par rapport à la ligne de base, nous avons donc pu choisir de sélectionner la variante Déployer , qui diffuserait ensuite le message dans l'application avec le coupon à tous les utilisateurs.

8. Félicitations

Félicitations, vous avez créé et exécuté avec succès votre première expérience de messagerie dans l'application. Vous pouvez désormais réaliser un test dans votre propre application et utiliser les résultats pour rendre vos campagnes de messagerie dans l'application plus efficaces.

Et après?

Découvrez certains de ces ateliers de programmation...

Lectures complémentaires

Nous venons d'effleurer la surface de ce qui peut être fait avec la messagerie intégrée à l'application Firebase et les tests A/B Firebase. Consultez-les si vous souhaitez en savoir plus...

Documents de référence

Créez des expériences de messagerie dans l'application avec les tests A/B