Votre première expérience de messagerie dans l'application

1. Introduction

Objectifs

Dans cet atelier de programmation, vous allez instrumenter un test de messagerie intégrée pour une application mobile multiplate-forme de recommandation de restaurants utilisant Flutter et Cloud Firestore.

Une fois terminé, vous pourrez concevoir et implémenter des tests de messages intégrés pour augmenter efficacement l'engagement des utilisateurs pour n'importe quelle application iOS ou Android, tout en écrivant un minimum de code.

Points abordés

• Utiliser la messagerie dans l'application Firebase (FIAM) dans une application Flutter
• Personnaliser l'apparence de vos messages intégrés
• Concevoir un test de la messagerie dans l'application et l'implémenter dans votre application
• Interpréter les résultats d'un test de la messagerie dans l'application

Firebase In-App Messaging

Firebase In-App Messaging (FIAM) vous aide à susciter l'intérêt des utilisateurs actifs de votre application en leur envoyant des messages ciblés et contextuels pour les inciter à effectuer des actions clés dans l'application (par exemple, dépasser un niveau de jeu, acheter un article ou s'abonner à du contenu).

Firebase A/B Testing

Optimisé par Google Optimize, Firebase A/B Testing (ABT) vous aide à optimiser l'expérience dans votre application en vous permettant d'exécuter, d'analyser et d'adapter facilement vos tests produits et vos expériences marketing. Vous pourrez tester les modifications apportées à l'UI ou aux fonctionnalités de votre application, ou encore aux campagnes axées sur l'engagement, afin de déterminer si ces changements sont vraiment efficaces pour vos métriques clés (comme les revenus et la fidélisation) avant de les déployer à grande échelle.

Conditions requises

Si vous ne connaissez pas bien Flutter ou Firestore, commencez par suivre l'atelier de programmation Firebase pour Flutter :

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

• Un appareil physique (Android ou iOS) connecté à votre ordinateur et réglé en mode développeur
• Le simulateur iOS (nécessite d'installer les outils Xcode)
• L'émulateur Android (doit être configuré dans Android Studio)

En plus de ce qui précède, vous aurez également besoin des éléments suivants :

• Un navigateur de votre choix, tel que Chrome.
• Un IDE ou un éditeur de texte de votre choix, tel qu'Android Studio ou VS Code configuré avec les plug-ins Dart et Flutter. Nous vous recommandons d'utiliser VS Code avec Flutter.
• La dernière version stable de Flutter (ou la version bêta si vous aimez prendre des risques).
• Un compte Google, comme un compte Gmail, pour créer et gérer votre projet Firebase.
• Exemple de code de l'atelier de programmation. Consultez l'étape suivante pour savoir comment obtenir le code.

2. Configuration

Obtenir 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 des commandes à partir du répertoire ci-dessous :

cd friendlyeats-flutter

Accédez ensuite au répertoire du codelab et extrayez la branche fiam-abt :

git checkout fiam-abt

Cette branche contient tout le code nécessaire pour cet atelier de programmation, y compris une version complète dans le dossier done. Les autres branches de ce dépôt contiennent le code permettant de créer l'application FriendlyEats, comme indiqué dans l'atelier de programmation Flutter multiplates-formes Firestore. 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 l'IDE de votre choix. Ce répertoire contient le code de départ de l'atelier de programmation, qui correspond à une application de recommandation de restaurants. Dans cet atelier de programmation, vous allez instrumenter un test de messagerie intégré pour les utilisateurs de cette application.

Créer un projet Firebase

1. Connectez-vous à la console Firebase à l'aide de votre compte Google.
2. Cliquez sur le bouton pour créer un projet, puis saisissez un nom de projet (par exemple, FriendlyEats).
   
3. Cliquez sur Continuer.
4. Si vous y êtes invité, lisez et acceptez les Conditions d'utilisation de Firebase, puis cliquez sur Continuer.
5. (Facultatif) Activez l'assistance IA dans la console Firebase (appelée "Gemini dans Firebase").
6. Pour cet atelier de programmation, vous avez besoin de Google Analytics pour utiliser de manière optimale les produits Firebase. Par conséquent, laissez l'option Google Analytics activée. Suivez les instructions à l'écran pour configurer Google Analytics.
7. Cliquez sur Créer un projet, attendez que votre projet soit provisionné, puis cliquez sur Continuer.

Félicitations ! Vous venez de créer votre premier projet Firebase.

Vous allez ensuite apprendre à configurer et activer les services nécessaires à l'aide de la console Firebase.

Activer l'authentification anonyme

Bien que cet aspect ne soit pas l'objectif principal de cet atelier de programmation, il est important d'avoir une forme d'authentification dans votre application. Vous utiliserez une connexion anonyme, ce qui signifie que l'utilisateur sera automatiquement connecté sans être invité à fournir ses identifiants.

Pour activer la connexion anonyme :

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

L'activation de l'option Connexion anonyme permet à l'application de connecter les utilisateurs à l'application sans leur demander leurs identifiants. Pour en savoir plus, consultez la documentation sur l'authentification anonyme pour Android et iOS.

Configurer Cloud Firestore

L'application utilise Cloud Firestore pour enregistrer et recevoir des informations et des notes sur un restaurant.

Voici comment configurer Cloud Firestore dans votre projet Firebase :

1. Dans le panneau de gauche de la console Firebase, développez Créer, puis sélectionnez Base de données Firestore.
2. Cliquez sur Créer une base de données.
3. Laissez le champ ID de la base de données défini sur (default).
4. Sélectionnez un emplacement pour votre base de données, puis cliquez sur Suivant.
   Pour une application réelle, choisissez un emplacement proche de vos utilisateurs.
5. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Dans cet atelier de programmation, vous ajouterez des règles de sécurité pour protéger vos données. Ne distribuez ni n'exposez publiquement une application sans ajouter de règles de sécurité pour votre base de données.
6. Cliquez sur Créer.

3. Configuration Firebase pour les mobiles

La plupart des modifications de code requises pour activer la compatibilité Firebase sont déjà activées dans le projet sur lequel vous travaillez. Toutefois, afin d'ajouter la compatibilité avec les plates-formes mobiles, vous devez :

• Enregistrez la plate-forme souhaitée sur le projet Firebase.
• Téléchargez le fichier de configuration correspondant à la plate-forme, puis ajoutez-le au code.

Dans le répertoire de premier niveau de votre application Flutter, vous trouverez des sous-répertoires appelés ios et android. Ces répertoires contiennent les fichiers de configuration propres aux plates-formes 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.

La boîte de dialogue suivante doit s'afficher :

1. La valeur importante à indiquer est l'ID du bundle iOS. Pour obtenir l'ID du bundle, vous devez effectuer les trois opérations suivantes.

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

4. Dans Xcode, cliquez sur le premier niveau Runner dans le volet de gauche pour afficher l'onglet General (Général) dans le volet de droite, comme illustré. Copiez la valeur de l'identifiant du bundle.

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

6. Dans Firebase, suivez les instructions pour télécharger le fichier de configuration GoogleService-Info.plist.
7. Revenez à Xcode. Notez que l'élément Runner possède un sous-dossier également nommé Runner (illustré dans l'image précédente).
8. Faites glisser le fichier GoogleService-Info.plist (que vous venez de télécharger) dans ce sous-dossier Runner.
9. Dans la boîte de dialogue qui s'affiche dans Xcode, cliquez sur Finish (Terminer).
10. Revenez à la console Firebase. À l'étape de configuration, cliquez sur Suivant, ignorez les étapes restantes, puis revenez à la page principale de la console Firebase.

La configuration de votre application Flutter pour iOS est terminée.

Configurer Android

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

La boîte de dialogue suivante doit s'afficher :

2. La valeur importante à indiquer est le nom du package Android. Effectuez les deux opérations suivantes pour l'obtenir :

3. Dans le répertoire de votre application Flutter, ouvrez le fichier android/app/src/main/AndroidManifest.xml.
4. Dans l'élément manifest, recherchez la valeur de chaîne de l'attribut package. Cette valeur correspond au nom du package Android (du type com.yourcompany.yourproject). Copiez cette valeur.
5. Dans la boîte de dialogue Firebase, collez le nom du package copié dans le champ Nom du package Android.
6. Vous n'avez pas besoin du certificat de signature de débogage SHA-1 pour cet atelier de programmation. Laissez ce champ vide.
7. Cliquez sur Register App (Enregistrer l'application).
8. Dans Firebase, suivez les instructions pour télécharger le fichier de configuration google-services.json.
9. 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.
10. Revenez dans la console Firebase, ignorez les étapes restantes, puis accédez de nouveau à la page principale de la console Firebase.
11. Toute la configuration Gradle est déjà activée. Si votre application est toujours en cours d'exécution, fermez-la et générez-la de nouveau pour permettre à Gradle d'installer des dépendances.

La configuration de votre application Flutter pour Android est à présent terminée.

4. Exécutez l'application en local

Vous êtes prêt à travailler sur votre application. Commencez par exécuter l'application en local. Vous pouvez désormais exécuter l'application sur toutes les plates-formes que vous avez configurées (et pour lesquelles un appareil et un émulateur sont disponibles).

Découvrez quels appareils sont disponibles à l'aide de la commande suivante :

flutter devices

Selon les appareils disponibles, le résultat de la commande précédente peut se présenter ainsi :

Exécutez maintenant l'application en local à l'aide de la commande suivante :

flutter run

Votre copie de FriendlyEats doit maintenant être associée à votre projet Firebase.

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

5. Créer et tester votre premier message

Intégrer la messagerie dans l'application Firebase à votre application

L'intégration de base de la messagerie dans l'application est totalement sans code. Il vous suffit d'ajouter la dépendance pour commencer. Ajoutez la dépendance suivante à votre fichier pubspec.yaml.

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

Rédiger un message dans la console Firebase

Maintenant que vous avez ajouté FIAM à votre application, composons un message qui se déclenchera lorsque votre application sera ouverte pour la première fois.

Pour rédiger votre premier message :

1. Dans la section Engage (Engager) de la console Firebase, cliquez sur In-App Messaging (Messagerie dans l'application).
2. Cliquez sur Créer votre première campagne dans le volet "Messages intégrés".

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 ou des boutons, ou modifier les couleurs.

Veillez à cibler l'application avec laquelle vous souhaitez effectuer le test. Selon le 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. La configuration de planification par défaut fonctionnera donc ici.

Une fois la programmation terminée, nous pouvons publier le message. Cliquez sur "Examiner". Vous devriez voir quelque chose comme ceci :

Afficher le message dans votre application

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

6. Intégrer Firebase Analytics pour un déclenchement avancé des messages

Intégrer Firebase Analytics à votre application

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

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

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

2. Importer des données analytiques dans home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

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

4. Déclenchez un événement Analytics lorsque l'utilisateur clique sur une fiche 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 qu'il se déclenche lors de l'événement Analytics.

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

Dans la console Firebase, revenez à "Messages dans l'application" et modifiez votre campagne existante.

Modifiez maintenant la section de programmation pour déclencher le message à partir du nouvel événement.

À partir de là, nous pouvons publier nos modifications en cliquant sur le bouton "Examiner".

Tester votre déclencheur dans l'application

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

flutter run

Lorsque vous cliquez sur un restaurant, votre message intégré à l'application devrait s'afficher.

7. Créer une campagne FIAM+ABT

Commencer avec un objectif

Notre application Friendlyeats est déjà très bien, mais pour qu'elle soit utile, nous avons besoin d'avis. Ces avis proviendront des utilisateurs de Friendlyeats. Nous devons donc trouver un moyen de les inciter à laisser des avis.

Commençons par définir notre événement de conversion

Comme nous voulons savoir si les utilisateurs consultent les avis sur les restaurants, ajoutons un événement Analytics pour mesurer ce comportement.

1. 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);
}

2. 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 un test A/B dans la console Firebase

Maintenant que nous savons comment créer des campagnes de messages intégrés, il est temps de réfléchir au type de comportement que nous souhaitons encourager dans notre application grâce à ces campagnes. Pour FriendlyEats, nous aimerions que plus de personnes laissent des avis, ce qui rendrait l'application plus utile. Il existe plusieurs façons d'encourager les utilisateurs à le faire à l'aide de messages dans l'application. La première consiste à afficher un simple message dans l'application pour indiquer à l'utilisateur qu'il doit laisser un avis sur le restaurant afin d'améliorer l'application FriendlyEats. La seconde consiste à utiliser un message dans l'application pour proposer une sorte d'incitation à laisser un avis, comme un bon de réduction ou un code promotionnel pour un restaurant donné.

Les deux approches pourraient augmenter la fréquence à laquelle les utilisateurs fournissent des avis sur les restaurants sur FriendlyEats. Il semble que l'offre d'un bon de réduction pourrait avoir un impact encore plus important dans ce cas. Mais dans quelle mesure le fait de proposer ce bon de réduction incitera-t-il les utilisateurs à rédiger un avis ? Le bon de réduction vaut-il la peine d'être proposé ? Pour le déterminer, nous allons effectuer un test de la messagerie dans l'application. Nous pouvons utiliser Firebase A/B Testing pour afficher de manière aléatoire l'un de nos messages dans l'application aux utilisateurs et mesurer l'effet que cela a sur leur comportement, un peu comme un essai clinique. Et le meilleur, c'est que vous pouvez le faire entièrement dans la console Firebase, sans avoir à écrire de code.

Pour composer votre premier test de la messagerie dans l'application :

1. Dans la section Engager de la console Firebase, cliquez sur A/B Testing.
2. Cliquez sur Créer un test, puis sélectionnez Messagerie dans l'application. Vous serez redirigé vers le compositeur de tests, comme illustré ci-dessous.

Attribuez un nom et éventuellement une description à votre test.

4. L'étape suivante consiste à rédiger les différents messages intégrés à l'application que vous enverrez aux utilisateurs de votre test. Le premier message intégré que nous allons composer est la "référence", ou le contrôle de notre test. Voici un exemple de message simple pour demander un avis :

5. Maintenant que nous avons une référence, nous allons composer une variante, à savoir le message intégré à l'application qui propose aux utilisateurs un code promotionnel pour les inciter à laisser un avis. Le titre du message est "Prenez un bon de réduction, laissez un avis !" et le corps du message est "La prochaine fois que vous irez au Burrito Cafe, utilisez le code promotionnel FRIENDLYEATS-15 au moment du paiement pour bénéficier de 15 % de remise sur votre commande. N'oubliez pas de laisser un avis !". Nous espérons que cela incitera certains utilisateurs à découvrir le Burrito Cafe.

À l'étape suivante, nous allons cibler notre application et définir l'exposition. Il s'agit du pourcentage d'utilisateurs éligibles (ceux qui remplissent les conditions de ciblage/déclenchement) qui verront l'un des messages du test. Pour cet exemple, nous pouvons simplement définir cette valeur sur 100 %, car nous souhaitons que tous les utilisateurs voient la variante de référence ou celle avec le bon de réduction. Si vous souhaitez disposer d'un groupe de contrôle qui ne voit aucun message intégré, vous pouvez réduire ce pourcentage d'exposition.

7. Vous allez ensuite définir des objectifs pour le test. Il s'agit du résultat du test que nous souhaitons mesurer. Nous allons définir cet événement analytique review_success comme celui que nous avons défini dans la section précédente, car nous souhaitons voir l'impact de nos différents messages intégrés sur les utilisateurs qui laissent des avis sur les restaurants.
8. Pour la planification, nous allons laisser la campagne commencer immédiatement et définir click_restaurant comme condition de déclenchement. Ainsi, les utilisateurs verront l'un des deux messages intégrés à l'application lorsqu'ils cliqueront sur un restaurant.

9. Il ne vous reste plus qu'à examiner votre test et à cliquer sur Démarrer le test. Il ne nous reste plus qu'à attendre les données de notre test.

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

Maintenant que nous avons lancé notre test, les utilisateurs de FriendlyEats verront au hasard l'un des deux messages intégrés à l'application que nous avons rédigés lorsqu'ils cliqueront sur un restaurant, à savoir le message de référence ou le message de variante. Cela divisera nos utilisateurs en deux groupes, en fonction du message qu'ils ont vu. Nous pouvons ensuite consulter la console Firebase (à nouveau dans la section "A/B Testing") pour comparer les données analytiques en direct des deux groupes. Il faudra attendre un certain temps pour que les données soient disponibles, car nous devons attendre que les utilisateurs voient les messages dans l'application et agissent en conséquence. Voici à quoi pourraient ressembler vos résultats après avoir collecté suffisamment de données :

Dans ce cas, la variante a amélioré considérablement la référence. Nous pouvons donc choisir de sélectionner Déployer la variante, ce qui déploiera le message intégré à l'application avec le bon de réduction à tous les utilisateurs.

8. Félicitations

Félicitations, vous venez de créer et d'exécuter votre premier test de messagerie intégrée. Vous pouvez désormais effectuer un test dans votre propre application et utiliser les résultats pour rendre vos campagnes de messages dans l'application plus efficaces.

Étapes suivantes

Découvrez quelques-uns des ateliers de programmation...

• Flutter Firestore multiplate-forme
• Ajouter un test Firebase Remote Config à une application Android

Complément d'informations

Nous n'avons fait qu'effleurer la surface de ce qu'il est possible de faire avec Firebase In-App Messaging et Firebase A/B Testing. Pour en savoir plus, consultez les ressources suivantes :

• Créer des tests de messages avec les tests A/B
• Créer des tests Remote Config avec A/B Testing
• Découvrez les cas d'utilisation de Firebase In-App Messaging
• Personnaliser vos messages Firebase In-App Messaging

Documents de référence

• Créer des tests de messagerie dans l'application avec des tests A/B