Google Wallet bietet leistungsstarke Tools, mit denen Sie das Erscheinungsbild und das 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.
Die Stiftung: cardTemplateOverride
Das primäre Tool zum Anpassen des Layouts einer Karte ist das classTemplateInfo.cardTemplateOverride-Objekt, das Sie in der Class-Ressource der Karte definieren (z.B. EventTicketClass, LoyaltyClass: Mit diesem Objekt können Sie den Pass 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 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. die sekundäre Punktzahl oder die Abschnitts-/Trainernummer.
Klassendefinition:
...
"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",
...
Objektdefinition
...
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "28250000",
"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. Mit entwicklerdefinierten Feldern anpassen
Google Wallet bietet Ihnen die Möglichkeit, mit textModulesData eigene benutzerdefinierte Datenfelder zu erstellen. Das ist ideal, um einzigartige Informationen zu 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 eine Karte/ein Ticket mit einem, zwei oder drei Datenelementen pro Karte/Ticket 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 die Ansicht mit den Kartendetails oder andere Wallet-Funktionen wie
messages,linksModuleDataoderlinkedOfferIds. So bleibt die Hauptansicht der Karte ü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 einer Eintrittskarte für eine Veranstaltung könnten das „Abschnitt“, „Reihe“ und „Sitzplatz“ sein.
Klassendefinition:Die cardTemplateOverride verweist auf drei eindeutige IDs: detail1, detail2 und 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",
Objektdefinition:Die Object enthält die Daten und entsprechenden IDs für jedes Feld.
...
"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"
}
]
...
Klassen- und Objektdaten für Variationen
Sie können Daten auf Klassen- und Objektebene kombinieren, um dynamische, personalisierte Karten zu erstellen. Dies ist nützlich, wenn Sie verschiedene Versionen desselben Passes erstellen möchten.
textModulesDataauf Kursebene:Verwenden Sie diese Option 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 Platz hat eine eingeschränkte Sicht.“
Beispiel: Anzeigen von tierbezogenen Pässen
Sie können verschiedene Class-Ressourcen für verschiedene Passvarianten 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 in der Ansicht „Kartendetails“
Felder aus linksModuleData und imageModulesData werden nicht auf der Vorderseite der Karte oder des Tickets gerendert, wenn in cardTemplateOverride darauf verwiesen wird. Diese Inhalte werden automatisch in der Ansicht Details zur Karte/zum Ticket (der „Rückseite der Karte/des Tickets“) angezeigt, sodass Nutzer leichter auf Kundenservicelinks, Werbebilder, Nutzungsbedingungen und andere zusätzliche Informationen zugreifen können.
3. Über die Kartenansicht 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: Hiermit werden die Zeilen und das Layout der Ansicht „Details der Karte bzw. des Tickets“ (die Rückseite der Karte bzw. des Tickets) strukturiert. So erhalten Sie einen flexiblen Bereich für zusätzliche Informationen, Links und Text.cardBarcodeSectionDetails: Damit können Sie den Barcodebereich auf der Karte anpassen.