Google Wallet offre strumenti potenti per personalizzare l'aspetto e il layout di qualsiasi tessera, dai biglietti per eventi e dalle carte d'imbarco alle carte fedeltà e alle carte regalo. Questa guida fornisce una panoramica completa di come personalizzare l'esperienza utente definendo la struttura della scheda e visualizzando informazioni dinamiche specifiche per l'utente.
Prima di iniziare, consulta la documentazione di riferimento specifica dell'API REST per il tuo tipo di tessera per visualizzare un elenco completo dei campi disponibili.
La base: cardTemplateOverride
Lo strumento principale per personalizzare il layout di una tessera è l'oggetto classTemplateInfo.cardTemplateOverride, che definisci nella risorsa Class della tessera (ad es. EventTicketClass, LoyaltyClass). Questo oggetto ti consente di strutturare la tessera definendo le righe e gli elementi al loro interno, offrendoti il controllo sulla modalità di presentazione delle informazioni.
Puoi fare riferimento ai dati sia della risorsa Class (per le informazioni condivise da tutti gli utenti) sia della risorsa Object (per i dettagli specifici dell'utente).
1. Personalizzazione con i campi Wallet predefiniti
I campi predefiniti sono le proprietà standard disponibili nell'API Google Wallet per un tipo di tessera specifico. Questi campi hanno nomi specifici e vengono visualizzati da Wallet in modo coerente. Alcuni esempi sono un codice a barre, il nome di un evento, un numero di volo o il saldo di una carta regalo.
Se fai riferimento al fieldPath di questi campi predefiniti, puoi disporli ovunque nella tessera.
Esempio: visualizzazione del codice a barre e dei dettagli specifici della tessera
Questo esempio di tessera ha una "Riga superiore" e tre campi di dati all'interno della seconda riga. Il primo elemento mostra i valori specifici dell'utente da Object, ad esempio punti o numero di posto specifici per l'utente. Il secondo elemento mostra i dettagli di Class, ad esempio il nome di un evento o il livello del programma fedeltà, mentre il terzo mostra di nuovo i valori specifici dell'utente di Object, ad esempio il punto o la sezione secondari / il numero di allenatore.
Definizione della 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",
...
Definizione dell'oggetto
...
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "28250000",
"currencyCode": "USD",
}
},
"label": "Balance"
}
...
Formattare i campi data e ora
Per qualsiasi campo di data o ora nelle tessere supportate, puoi specificare un formato personalizzato utilizzando la proprietà dateFormat. In questo modo puoi controllare come viene visualizzata la data sulla tessera, ad esempio mostrando solo l'ora, la data e l'ora complete o solo la data. Se dateFormat non è specificato, verrà utilizzato un formato predefinito.
"fields": [
{
"fieldPath": "object.validTimeInterval.start.date",
"dateFormat": "DATE_ONLY"
}
]
Per un elenco completo dei formati disponibili, consulta la documentazione DateFormat.
2. Personalizzazione con i campi definiti dallo sviluppatore
Per la massima flessibilità, Google Wallet ti consente di creare i tuoi campi di dati personalizzati utilizzando textModulesData. È ideale per visualizzare informazioni uniche che non rientrano nei campi predefiniti, come brevi note personalizzate, vantaggi per gli abbonati o dettagli specifici per la località.
Definisci un elemento textModulesData con un id univoco in Object o Class, quindi fai riferimento a id in cardTemplateOverride.
Strutturare le righe delle schede
Puoi progettare una tessera con uno, due o tre elementi di dati per tessera, il che ti consente di organizzare le informazioni in modo logico. Non esiste un limite rigido al numero di righe che puoi aggiungere, ma per un'esperienza utente ottimale, valuta quali informazioni sono più importanti da visualizzare sulla parte anteriore della scheda.
- Best practice:per informazioni supplementari, utilizza la visualizzazione dei dettagli della tessera o altre funzionalità di Wallet come
messages,linksModuleDataolinkedOfferIds. In questo modo, la visualizzazione principale della tessera rimane ordinata.
Esempio: una riga di tre elementi con dati personalizzati
Crea una riga per visualizzare i dettagli personalizzati. Per una carta fedeltà, potrebbero essere punti, livello e saldo. Per un biglietto per un evento, potrebbero essere "Sezione", "Fila" e "Posto".
Definizione della classe:cardTemplateOverride fa riferimento a tre ID unici: detail1, detail2 e 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",
Definizione oggetto:
Object fornisce i dati e gli ID corrispondenti per ogni campo.
...
"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"
}
]
...
Dati di classe e dati degli oggetti per le varianti
Puoi combinare dati a livello di classe e di oggetto per creare tessere dinamiche e personalizzate. Ciò è utile per creare versioni diverse della stessa tessera.
- A livello di classe
textModulesData: utilizza questa opzione per i dettagli che sono gli stessi per un gruppo di utenti (ad es. un messaggio "Benvenuto nella sezione VIP" per tutti i possessori di biglietti VIP). - A livello di oggetto
textModulesData: utilizza questa opzione per i dettagli specifici di un utente (ad es. Jane, il tuo posto ha una visuale limitata.
Esempio: visualizzazione di abbonamenti specifici per livello
Puoi creare diverse risorse Class per diverse varianti di tessera, ad esempio "Ingresso generale" anziché "VIP" per un evento oppure "Economy" anziché "Business" per un volo. Ogni classe può avere un design unico (immagine di copertina, colore) e un testo predefinito.
 |
 |
 |
| Abbonato con abbonamento Silver | Upgrade a Gold eseguito | Un altro membro del livello Diamante |
Contenuti nella visualizzazione dei dettagli della tessera
I campi di linksModuleData e imageModulesData non vengono visualizzati sulla parte anteriore della tessera quando vengono citati in cardTemplateOverride. Questi contenuti vengono visualizzati automaticamente nella visualizzazione Dettagli della tessera (il "retro della tessera"), offrendo agli utenti un accesso più semplice ai link dell'assistenza clienti, alle immagini promozionali, ai termini e condizioni e ad altre informazioni supplementari.
3. Oltre alla parte anteriore della scheda: altri override dei modelli
L'oggetto classTemplateInfo offre molto più di cardTemplateOverride. Puoi personalizzare altre parti dell'esperienza Google Wallet per fornire una presentazione più ricca e intuitiva dei tuoi pass.
Per tutti i dettagli su tutti gli override disponibili, consulta la documentazione di riferimento di ClassTemplateInfo.
listTemplateOverride: personalizza il layout delle righe nella visualizzazione elenco principale dell'app Google Wallet, consentendoti di evidenziare i campi più importanti prima che un utente apra la tessera.detailsTemplateOverride: struttura le righe e il layout della visualizzazione "Dettagli della tessera" (il retro della tessera), offrendoti uno spazio flessibile per informazioni, link e testo supplementari.cardBarcodeSectionDetails: consente di personalizzare la sezione del codice a barre sulla tessera.