Google Wallet bietet leistungsstarke Tools, mit denen Sie das Erscheinungsbild und Layout jeder Karte/jedes Tickets anpassen können, von Veranstaltungstickets und Bordkarten bis hin zu Kundenkarten und Geschenkkarten. In dieser Anleitung finden Sie einen umfassenden Überblick darüber, wie Sie die Nutzererfahrung anpassen können, indem Sie die Struktur der Karte definieren und dynamische, nutzerspezifische Informationen anzeigen.
Bevor Sie beginnen, sollten Sie die spezifische REST API-Referenzdokumentation für Ihren Kartentyp aufrufen, um eine vollständige Liste der verfügbaren Felder zu sehen.
Das Fundament: cardTemplateOverride
Das primäre Tool zum Anpassen des Layouts einer Karte oder eines Tickets ist das classTemplateInfo.cardTemplateOverride-Objekt, das Sie in der Class-Ressource der Karte oder des Tickets definieren (z. B. EventTicketClass, LoyaltyClass). Mit diesem Objekt können Sie die Karte oder das Ticket strukturieren, indem Sie Zeilen und die darin enthaltenen Elemente definieren. So haben Sie die Kontrolle darüber, wie Informationen präsentiert werden.
Sie können auf Daten aus der Class-Ressource (für Informationen, die für alle Nutzer freigegeben sind) und der Object-Ressource (für nutzerspezifische Details) verweisen.
1. Anpassen mit vordefinierten Wallet-Feldern
Vordefinierte Felder sind die Standardattribute, die in der Google Wallet API für einen bestimmten Kartentyp verfügbar sind. Diese Felder haben bestimmte Namen und werden von Wallet einheitlich gerendert. Beispiele sind ein Barcode, ein Veranstaltungsname, eine Flugnummer oder das Guthaben einer Geschenkkarte.
Wenn Sie auf die fieldPath dieser vordefinierten Felder verweisen, können Sie sie an einer beliebigen Stelle auf Ihrer Karte oder Ihrem Ticket anordnen.
Beispiel: Barcode und kartenbezogene Details anzeigen
Dieses Beispiel für eine Karte enthält eine obere Zeile und drei Datenfelder in der zweiten Zeile. Im ersten Element werden die spezifischen Werte des Nutzers aus Object angezeigt, z. B. Punkte oder die Sitzplatznummer. Das zweite Element enthält die Details aus Class, z. B. einen Ereignisnamen oder eine Stufe des Treuepunkteprogramms. Das dritte Element enthält wieder die spezifischen Werte des Nutzers aus Object, z. B. den sekundären Punkt oder die Abschnitts-/Trainernummer.
Klassendefinition:
...
"classTemplateInfo": {
"cardTemplateOverride": {
"cardRowTemplateInfos": [
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.accountName",
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.secondaryLoyaltyPoints.label"
},
{
"fieldPath": "object.secondaryLoyaltyPoints.balance"
}
]
}
}
}
},
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.loyaltyPoints.label"
},
{
"fieldPath": "object.loyaltyPoints.balance"
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "class.rewardsTierLabel"
},
{
"fieldPath": "class.rewardsTier"
}
]
}
}
}
},
]
}
}
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",
...
Objektdefinition
...
"accountName": "Camille Walsh",
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "35050000",
"currencyCode": "USD",
}
},
"label": "Balance"
}
...
Datums- und Zeitfelder formatieren
Für jedes Datums- oder Zeitfeld in unterstützten Karten können Sie mit dem Attribut dateFormat ein benutzerdefiniertes Format angeben. So können Sie festlegen, wie das Datum auf der Karte angezeigt wird, z. B. nur die Uhrzeit, das vollständige Datum und die Uhrzeit oder nur das Datum. Wenn dateFormat nicht angegeben ist, wird ein Standardformat verwendet.
"fields": [
{
"fieldPath": "object.validTimeInterval.start.date",
"dateFormat": "DATE_ONLY"
}
]
Eine vollständige Liste der verfügbaren Formate finden Sie in der Dokumentation zu DateFormat.
2. Anpassen mit entwicklerdefinierten Feldern
Mit Google Wallet können Sie mit textModulesData eigene benutzerdefinierte Datenfelder erstellen. So können Sie einzigartige Informationen präsentieren, die nicht in die vordefinierten Felder passen, z. B. benutzerdefinierte kurze Notizen, Mitgliedervorteile oder standortspezifische Details.
Sie definieren ein textModulesData-Element mit einem eindeutigen id im Object oder Class und verweisen dann im cardTemplateOverride auf dieses id.
Kartenzeilen strukturieren
Sie können einen Ausweis mit einem, zwei oder drei Datenelementen pro Ausweis gestalten, sodass Sie Informationen logisch organisieren können. Es gibt keine feste Obergrenze für die Anzahl der Zeilen, die Sie hinzufügen können. Um die Nutzerfreundlichkeit zu gewährleisten, sollten Sie jedoch überlegen, was auf der Vorderseite der Karte am wichtigsten ist.
- Best Practice:Verwenden Sie für zusätzliche Informationen den unteren Bereich der Karte oder des Tickets oder andere Wallet-Funktionen wie
messages,linksModuleDataoderlinkedOfferIds. So bleibt die Hauptansicht für Karten übersichtlich.
Beispiel: Zeile mit drei Elementen und benutzerdefinierten Daten
Erstellen Sie eine Zeile, um benutzerdefinierte Details anzuzeigen. Bei einer Kundenkarte können das Punkte, Stufe und Guthaben sein. Bei einem Veranstaltungsticket könnten das „Bereich“, „Reihe“ und „Sitzplatz“ sein.
Klassendefinition:Die cardTemplateOverride verweist auf drei eindeutige IDs: detail1, detail2 und detail3.
...
"classTemplateInfo": {
"cardTemplateOverride": {
"cardRowTemplateInfos": [
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.accountName",
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['mem_since']",
}
]
}
}
}
},
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.loyaltyPoints.label"
},
{
"fieldPath": "object.loyaltyPoints.balance"
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "class.rewardsTierLabel"
},
{
"fieldPath": "class.rewardsTier"
}
]
}
}
}
},
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.secondaryLoyaltyPoints.label"
},
{
"fieldPath": "object.secondaryLoyaltyPoints.balance"
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['visits']",
}
]
}
}
}
},
]
}
}
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",
Objektdefinition:Die Object enthält die Daten und entsprechenden IDs für jedes Feld.
...
"accountName": "Camille Walsh",
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "28250000",
"currencyCode": "USD",
}
},
"label": "Balance"
},
"textModulesData": [
{
"header": "Visits",
"body": "17",
"id": "visits"
},
{
"header": "Member since",
"body": "Mar 01, 2024",
"id": "mem_since"
},
]
...
Klassen- und Objektdaten für Variationen
Sie können Daten auf Klassen- und Objektebene kombinieren, um dynamische, personalisierte Karten zu erstellen. Das ist nützlich, wenn Sie verschiedene Versionen desselben Passes erstellen möchten.
- Klassenebene
textModulesData:Verwenden Sie diese Ebene für Details, die für eine Gruppe von Nutzern gleich sind, z.B. eine „Willkommen bei VIP“-Nachricht für alle Inhaber von VIP-Tickets. - Objektebene
textModulesData:Verwenden Sie diese Ebene für Details, die sich auf einen bestimmten Nutzer beziehen, z.B. „Jane, dein Sitzplatz hat eine eingeschränkte Sicht“.
Beispiel: Anzeigen von Pässen für bestimmte Stufen
Sie können verschiedene Class-Ressourcen für verschiedene Kartenvarianten erstellen, z. B. „Allgemeiner Eintritt“ im Vergleich zu „VIP“ für eine Veranstaltung oder „Economy“ im Vergleich zu „Business“ für einen Flug. Jede Klasse kann ein eigenes Design (Hero-Bild, Farbe) und einen eigenen Standardtext haben.
 |
 |
 |
| Mitgliedschaft ab Silber | Mitglied auf Gold hochgestuft | Ein anderes Mitglied im Diamond Tier |
Inhalte im unteren Bereich der Karte
Felder aus linksModuleData und imageModulesData werden nicht gerendert, wenn in cardTemplateOverride darauf verwiesen wird. Diese Inhalte werden automatisch unten im Ticket oder der Karte angezeigt, sodass Nutzer leichter auf Kundenservicelinks, Werbebilder, Nutzungsbedingungen und andere zusätzliche Informationen zugreifen können.
3. Über die Kartenvorderseite hinaus: Andere Vorlagenüberschreibungen
Das classTemplateInfo-Objekt bietet mehr als nur cardTemplateOverride. Sie können andere Teile von Google Wallet anpassen, um Ihre Karten/Tickets besser und intuitiver zu präsentieren.
Ausführliche Informationen zu allen verfügbaren Überschreibungen finden Sie in der Referenzdokumentation zu ClassTemplateInfo.
listTemplateOverride: Damit lässt sich das Zeilenlayout in der Hauptlistenansicht der Google Wallet App anpassen. So können Sie die wichtigsten Felder hervorheben, bevor ein Nutzer seine Karte überhaupt öffnet.detailsTemplateOverride: Strukturiert die Zeilen und das Layout des unteren Bereichs der Karte oder des Tickets und bietet Ihnen so einen flexiblen Bereich für zusätzliche Informationen, Links und Text.cardBarcodeSectionDetails: Damit können Sie den Barcodebereich auf der Karte anpassen.