Google Wallet propose des outils puissants pour personnaliser l'apparence et la mise en page de n'importe quelle carte, qu'il s'agisse de billets pour des événements, de cartes d'embarquement, de cartes de fidélité ou de cartes cadeaux. Ce guide vous explique en détail comment personnaliser l'expérience utilisateur en définissant la structure de la carte et en affichant des informations dynamiques spécifiques à l'utilisateur.
Avant de commencer, veillez à consulter la documentation de référence de l'API REST spécifique à votre type de carte pour obtenir la liste complète des champs disponibles.
La Fondation : cardTemplateOverride
L'outil principal pour personnaliser la mise en page d'une carte est l'objet classTemplateInfo.cardTemplateOverride, que vous définissez dans la ressource Class de la carte (par exemple, EventTicketClass, LoyaltyClass). Cet objet vous permet de structurer la carte en définissant des lignes et les éléments qu'elles contiennent, ce qui vous permet de contrôler la façon dont les informations sont présentées.
Vous pouvez référencer des données à partir de la ressource Class (pour les informations partagées par tous les utilisateurs) et de la ressource Object (pour les informations spécifiques à un utilisateur).
1. Personnaliser avec des champs Wallet prédéfinis
Les champs prédéfinis sont les propriétés standards disponibles dans l'API Google Wallet pour un type de carte spécifique. Ces champs ont des noms spécifiques et sont affichés par Wallet de manière cohérente. Il peut s'agir, par exemple, d'un code-barres, d'un nom d'événement, d'un numéro de vol ou du solde d'une carte cadeau.
En référençant le fieldPath de ces champs prédéfinis, vous pouvez les organiser n'importe où sur votre carte.
Exemple : Afficher le code-barres et les détails spécifiques à la carte
Cet exemple de pass comporte une "ligne supérieure" et trois champs de données dans la deuxième ligne. Le premier élément affiche les valeurs spécifiques de l'utilisateur à partir de Object, comme les points ou le numéro de siège qui lui sont propres. Le deuxième élément affiche les détails de Class, comme le nom d'un événement ou le niveau d'un programme de fidélité. Le troisième élément affiche à nouveau les valeurs spécifiques de l'utilisateur à partir de Object, comme le point secondaire ou le numéro de section / de coach.
Définition de la classe :
...
"classTemplateInfo": {
"cardTemplateOverride": {
"cardRowTemplateInfos": [
{
"threeItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.loyaltyPoints.label",
"fieldPath": "object.loyaltyPoints.balance",
}
]
}
},
"middleItem": {
"firstValue": {
"fields": [
{
"fieldPath": "class.rewardsTierLabel",
"fieldPath": "class.rewardsTier",
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.secondaryLoyaltyPoints.label",
"fieldPath": "object.secondaryLoyaltyPoints.balance",
}
]
}
}
}
},
]
}
}
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",
...
Définition de l'objet
...
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "28250000",
"currencyCode": "USD",
}
},
"label": "Balance"
}
...
Mettre en forme les champs de date et d'heure
Pour n'importe quel champ de date ou d'heure dans les cartes compatibles, vous pouvez spécifier un format personnalisé à l'aide de la propriété dateFormat. Cela vous permet de contrôler la façon dont la date est affichée sur la carte, par exemple en n'affichant que l'heure, la date et l'heure complètes, ou uniquement la date. Si dateFormat n'est pas spécifié, un format par défaut est utilisé.
"fields": [
{
"fieldPath": "object.validTimeInterval.start.date",
"dateFormat": "DATE_ONLY"
}
]
Pour obtenir la liste complète des formats disponibles, consultez la documentation DateFormat.
2. Personnaliser avec des champs définis par le développeur
Pour une flexibilité optimale, Google Wallet vous permet de créer vos propres champs de données personnalisés à l'aide de textModulesData. C'est idéal pour afficher des informations uniques qui ne tiennent pas dans les champs prédéfinis, comme des notes courtes personnalisées, des avantages réservés aux membres ou des informations spécifiques à un lieu.
Vous définissez un élément textModulesData avec un id unique dans Object ou Class, puis vous référencez ce id dans cardTemplateOverride.
Structurer les lignes de cartes
Vous pouvez concevoir un pass avec un, deux ou trois éléments de données par pass, ce qui vous permet d'organiser les informations de manière logique. Il n'y a pas de limite stricte au nombre de lignes que vous pouvez ajouter, mais pour une expérience utilisateur fluide, réfléchissez à ce qui est le plus important à afficher sur la face de la carte.
- Bonne pratique : Pour obtenir des informations supplémentaires, utilisez la vue des détails du pass ou d'autres fonctionnalités Wallet telles que
messages,linksModuleDataoulinkedOfferIds. Cela permet de ne pas encombrer la vue principale du pass.
Exemple : Ligne de trois éléments avec des données personnalisées
Créez une ligne pour afficher des détails personnalisés. Pour une carte de fidélité, il peut s'agir de points, d'un niveau et d'un solde. Pour un billet d'événement, il peut s'agir de "Section", "Rangée" et "Siège".
Définition de la classe :
cardTemplateOverride fait référence à trois ID uniques : detail1, detail2 et detail3.
...
"classTemplateInfo": {
"cardTemplateOverride": {
"cardRowTemplateInfos": [
{
"oneItem": {
"item": {
"firstValue": {
"fields": [
{
"fieldPath": "object.accountName",
}
]
}
}
}
},
{
"threeItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.loyaltyPoints.label",
"fieldPath": "object.loyaltyPoints.balance",
}
]
}
},
"middleItem": {
"firstValue": {
"fields": [
{
"fieldPath": "class.rewardsTierLabel",
"fieldPath": "class.rewardsTier",
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.secondaryLoyaltyPoints.label",
"fieldPath": "object.secondaryLoyaltyPoints.balance",
}
]
}
}
}
},
{
"threeItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['row1left']",
}
]
}
},
"middleItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['row1mid']"
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['row1right']"
}
]
}
}
}
},
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['mem_since']",
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['park']",
}
]
}
}
}
},
]
}
}
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",
Définition de l'objet : l'Object fournit les données et les ID correspondants pour chaque champ.
...
"accountName": "Lorenaisabel Aliwarringlen",
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "28250000",
"currencyCode": "USD",
}
},
"label": "Balance"
},
"textModulesData": [
{
"header": "Visits",
"body": "17",
"id": "row1left"
},
{
"header": "Rides",
"body": "259",
"id": "row1mid"
},
{
"header": "Park hours",
"body": "140",
"id": "row1right"
},
{
"header": "Member since",
"body": "Mar 01, 2017",
"id": "mem_since"
},
{
"header": "Parking",
"body": "Included (Free)",
"id": "park"
}
]
...
Données de classe et d'objet pour les variantes
Vous pouvez combiner des données au niveau de la classe et de l'objet pour créer des pass dynamiques et personnalisés. Cela est utile pour créer différentes versions du même pass.
textModulesDataau niveau de la classe : utilisez cette option pour les informations identiques pour un groupe d'utilisateurs (par exemple, un message "Bienvenue dans le programme VIP" pour tous les détenteurs de billets VIP).textModulesDataau niveau de l'objet : utilisez cette option pour obtenir des informations spécifiques à un utilisateur (par exemple, "Jane, la vue de votre place est limitée").
Exemple : Afficher les pass spécifiques à un niveau
Vous pouvez créer différentes ressources Class pour différentes variantes de pass, comme "Entrée générale" et "VIP" pour un événement, ou "Économique" et "Affaires" pour un vol. Chaque classe peut avoir une conception unique (image de bannière, couleur) et un texte par défaut.
 |
 |
 |
| Membre à partir du niveau Silver | Membre passé au niveau Or | Un autre membre du niveau Diamant |
Contenu de la vue détaillée du pass
Les champs de linksModuleData et imageModulesData ne sont pas affichés au recto de la carte lorsqu'ils sont référencés dans cardTemplateOverride. Ce contenu s'affiche automatiquement dans la vue Détails du pass (le "dos du pass"), ce qui permet aux utilisateurs d'accéder plus facilement aux liens du service client, aux images promotionnelles, aux conditions d'utilisation et à d'autres informations supplémentaires.
3. Au-delà de la face de la carte : autres remplacements de modèles
L'objet classTemplateInfo offre bien plus que cardTemplateOverride. Vous pouvez personnaliser d'autres aspects de l'expérience Google Wallet pour présenter vos cartes de manière plus riche et plus intuitive.
Pour en savoir plus sur tous les remplacements disponibles, consultez la documentation de référence ClassTemplateInfo.
listTemplateOverride: personnalise la mise en page des lignes dans la vue Liste principale de l'application Google Wallet. Vous pouvez ainsi mettre en avant les champs les plus importants avant même qu'un utilisateur ouvre son pass.detailsTemplateOverride: structure les lignes et la mise en page de la vue "Détails de la carte" (le dos de la carte), ce qui vous offre un espace flexible pour les informations supplémentaires, les liens et le texte.cardBarcodeSectionDetails: vous permet de personnaliser la section du code-barres sur la carte.