Personnaliser vos messages de messagerie dans l'application Firebase


Firebase In-App Messaging fournit un ensemble utile de comportements et de types de messages préconfigurés avec une apparence par défaut. Toutefois, dans certains cas, vous pouvez étendre les comportements et le contenu des messages. In-App Messaging vous permet d'ajouter des actions aux messages et de personnaliser leur apparence.

Ajouter une action à votre message

Grâce aux actions, vous pouvez utiliser vos messages intégrés à l'application pour rediriger les utilisateurs vers un site Web ou un écran spécifique de votre application.

Firebase In-App Messaging utilise des gestionnaires de liens pour traiter les actions. Le SDK peut utiliser plusieurs gestionnaires. Par conséquent, si votre application en possède déjà un, Firebase In-App Messaging peut l'utiliser sans aucune configuration supplémentaire. Si vous n'avez pas encore de gestionnaire, vous pouvez utiliser Firebase Dynamic Links. Pour en savoir plus, consultez Créer des liens dynamiques sur iOS.

Ajouter l'action à votre message à l'aide de la console Firebase

Une fois que votre application dispose d'un gestionnaire de liens, vous pouvez créer une campagne avec une action. Ouvrez la console Firebase dans Messaging, puis démarrez une campagne ou modifiez-en une existante. Dans cette campagne, fournissez une carte, un texte de bouton et une action de bouton, une action d'image ou une action de bannière , où l'action est un lien profond pertinent.

Le format de l'action dépend de la mise en page du message que vous choisissez. Les modales comportent des boutons d'action avec un contenu de texte, une couleur de texte et une couleur d'arrière-plan personnalisables. Les images et les bannières en haut de page, quant à elles, deviennent interactives et appellent l'action spécifiée lorsque l'utilisateur appuie dessus.

Modifier l'apparence des messages

Firebase In-App Messaging vous permet de personnaliser l'affichage des messages afin de modifier la façon dont votre application affiche la mise en page, les styles de police, les formes des boutons et d'autres détails des messages. Vous pouvez modifier l'affichage des messages de deux manières : en modifiant les affichages Firebase In-App Messaging par défaut ou en créant votre propre bibliothèque d'affichage de messages à partir de zéro.

Remarque : Ce produit n'est pas disponible sur les cibles macOS, Mac Catalyst, App Clip ni watchOS.

Modifier les affichages par défaut

Le moyen le plus simple de personnaliser vos messages consiste à vous appuyer sur le code d'affichage des messages par défaut de Firebase In-App Messaging.

Cloner le dépôt firebase-ios-sdk

Pour commencer, clonez la dernière version du dépôt firebase-ios-sdk, puis ouvrez le répertoire InAppMessaging.

Sélectionner les types de messages à modifier

Une fois le dépôt cloné, vous pouvez modifier tout ou partie des types de messages Firebase In-App Messaging : Card, Modal, Banner et ImageOnly. Chaque type correspond à une mise en page de message dans le Firebase In-App Messaging flux de création de campagne.

Par conséquent, chaque type a accès à un ensemble de données différent, déterminé par les options de personnalisation de la campagne dans la Firebase console :

Type titleText bodyText textColor backgroundColor imageData actionButton secondaryActionButton
Carte
Modale
Bannière
Image uniquement

Modifier le code de rendu de l'affichage des messages

En gardant à l'esprit les limites des types de messages, vous pouvez les modifier comme vous le souhaitez. Vous pouvez créer une bannière qui s'affiche en bas de votre application, déplacer le bouton d'action sur une modale, intégrer le message intégré à l'application dans le flux d'un utilisateur ou effectuer toute autre modification qui permettrait d'adapter l'apparence des messages à votre application.

Lorsque vous modifiez l'affichage des messages, vous devez tenir compte de deux éléments principaux :

  • Répertoires de types de messages : chaque type de message possède un répertoire distinct contenant des fichiers qui déterminent la logique de ce type :
  • Storyboard : la bibliothèque InAppMessaging comporte également un fichier .storyboard qui permet de définir l'interface utilisateur pour les trois types de messages :

Modifiez les fichiers dans les répertoires des types de messages de votre choix et les sections correspondantes du fichier .storyboard pour créer vos affichages de messages personnalisés.

Mettre à jour votre podfile pour utiliser votre code InAppMessaging modifié

Pour que Firebase In-App Messaging utilise vos affichages de messages modifiés au lieu des affichages par défaut, mettez à jour votre podfile afin d'utiliser votre bibliothèque InAppMessaging personnalisée : 

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YourProject' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for YourProject
pod 'Firebase'

# Remove the default InAppMessaging pod:
# pod 'Firebase/InAppMessaging'

# Overwrite it with a version that points to your local copy:
pod `FirebaseInAppMessaging', :path => '~/Path/To/The/Cloned/Repo/'

end
Une fois cette opération effectuée, vous pouvez mettre à jour vos pods, recréer votre application et afficher vos nouveaux affichages de messages personnalisés.

Créer votre propre bibliothèque d'affichage de messages

Vous n'êtes pas limité à l'utilisation de la bibliothèque InAppMessaging pour créer une interface utilisateur permettant d'afficher des messages. Vous pouvez également écrire votre propre code à partir de zéro.

Créer une classe qui implémente le protocole InAppMessagingDisplay

Firebase In-App Messaging utilise la classe InAppMessaging pour gérer les communications entre les serveurs Firebase et votre application. Cette classe utilise à son tour le InAppMessagingDisplay protocole pour afficher les messages qu'elle reçoit. Pour créer votre propre bibliothèque d'affichage, écrivez une classe qui implémente le protocole.

La définition du protocole et la documentation sur la manière de s'y conformer se trouvent dans le FIRInAppMessagingDisplay.h fichier de la InAppMessaging bibliothèque.

Définir messageDisplayComponent pour utiliser votre bibliothèque d'affichage de messages

InAppMessaging utilise sa messageDisplayComponent propriété pour déterminer l'objet à utiliser lors de l'affichage des messages. Définissez cette propriété sur un objet de votre classe d'affichage de messages personnalisée afin que Firebase In-App Messaging sache qu'il doit utiliser votre bibliothèque pour afficher les messages :

InAppMessaging.inAppMessaging().messageDisplayComponent = yourInAppMessagingRenderingInstance