Google Cüzdan, etkinlik biletlerinden ve biniş kartlarından bağlılık ve hediye kartlarına kadar tüm kartların görünümünü ve düzenini özelleştirmek için güçlü araçlar sunar. Bu kılavuzda, kartın yapısını tanımlayarak ve dinamik, kullanıcıya özel bilgiler göstererek kullanıcı deneyimini nasıl özelleştirebileceğinize dair kapsamlı bir genel bakış sunulmaktadır.
Başlamadan önce, kullanılabilir alanların tam listesini görmek için kart türünüze özel REST API referans belgelerine göz atın.
Vakıf: cardTemplateOverride
Kartın düzenini özelleştirmek için kullanılan temel araç, kartın Class kaynağında (ör.EventTicketClass, LoyaltyClass) tanımladığınız classTemplateInfo.cardTemplateOverride nesnesidir. Bu nesne, satırları ve satırlardaki öğeleri tanımlayarak kartı yapılandırmanıza olanak tanır. Böylece, bilgilerin nasıl sunulacağı üzerinde kontrol sahibi olursunuz.
Hem Class kaynağındaki (tüm kullanıcılarla paylaşılan bilgiler için) hem de Object kaynağındaki (kullanıcıya özel ayrıntılar için) verilere başvurabilirsiniz.
1. Önceden Tanımlanmış Cüzdan Alanlarıyla Özelleştirme
Önceden tanımlanmış alanlar, belirli bir kart türü için Google Cüzdan API'sinde bulunan standart özelliklerdir. Bu alanların belirli adları vardır ve Cüzdan tarafından tutarlı bir şekilde oluşturulur. Örneğin, barkod, etkinlik adı, uçuş numarası veya hediye kartı bakiyesi.
Bu önceden tanımlanmış alanların fieldPath özelliğine başvurarak bunları kartınızda istediğiniz yere yerleştirebilirsiniz.
Örnek: Barkod ve karta özel ayrıntıları gösterme
Bu kart örneğinde "Üst satır" ve 2. satırda 3 veri alanı bulunuyor. İlk öğe, kullanıcının Object gibi puanlar veya kullanıcıya özel koltuk numarası gibi belirli değerlerini gösterir. İkinci öğe, Class içindeki ayrıntıları (ör. etkinlik adı veya bağlılık programı katmanı) gösterir. Üçüncü öğe ise Object içindeki kullanıcıya özel değerleri (ör. ikincil puan veya bölüm / antrenör numarası) gösterir.
Sınıf Tanımı:
...
"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",
...
Nesne Tanımı
...
"accountName": "Camille Walsh",
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "35050000",
"currencyCode": "USD",
}
},
"label": "Balance"
}
...
Tarih ve Saat Alanlarını Biçimlendirme
Desteklenen kartlardaki herhangi bir tarih veya saat alanı için dateFormat özelliğini kullanarak özel bir biçim belirtebilirsiniz. Bu ayar, kartta tarihin nasıl gösterileceğini (ör. yalnızca saat, tam tarih ve saat veya yalnızca tarih) kontrol etmenize olanak tanır. dateFormat belirtilmezse varsayılan bir biçim kullanılır.
"fields": [
{
"fieldPath": "object.validTimeInterval.start.date",
"dateFormat": "DATE_ONLY"
}
]
Kullanılabilir biçimlerin tam listesi için DateFormat belgelerine bakın.
2. Geliştirici Tarafından Tanımlanan Alanlarla Özelleştirme
Google Cüzdan, textModulesData kullanarak kendi özel veri alanlarınızı oluşturmanıza olanak tanır. Bu alan, önceden tanımlanmış alanlara uymayan benzersiz bilgileri (ör. özel kısa notlar, üyelere sunulan avantajlar veya konuma özgü ayrıntılar) göstermek için idealdir.
textModulesData öğesini Object veya Class içinde benzersiz bir id ile tanımlar, ardından cardTemplateOverride içinde bu id öğesine referans verirsiniz.
Kart Satırlarını Yapılandırma
Kart başına bir, iki veya üç veri öğesi içeren bir kart tasarlayabilirsiniz. Bu sayede bilgileri mantıksal olarak düzenleyebilirsiniz. Ekleyebileceğiniz satır sayısıyla ilgili kesin bir sınır yoktur ancak sorunsuz bir kullanıcı deneyimi için kartın ön yüzünde nelerin gösterilmesinin en önemli olduğunu göz önünde bulundurun.
- En iyi uygulama: Ek bilgiler için kartın alt bölümünü veya
messages,linksModuleDataya dalinkedOfferIdsgibi diğer Cüzdan özelliklerini kullanın. Bu sayede ana kart görünümü düzenli kalır.
Örnek: Özel veriler içeren üç öğeli satır
Özel ayrıntıları göstermek için bir satır oluşturun. Bağlılık kartı için bu bilgiler puanlar, katman ve bakiye olabilir. Etkinlik biletleri için "Bölüm", "Sıra" ve "Koltuk" olabilir.
Sınıf Tanımı:
cardTemplateOverride, üç benzersiz kimliğe (detail1, detail2 ve detail3) referans veriyor.
...
"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",
Nesne Tanımı:
Object, her alan için verileri ve ilgili kimlikleri sağlar.
...
"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"
},
]
...
Varyasyonlar için Sınıf ve Nesne Verileri
Dinamik ve kişiselleştirilmiş kartlar oluşturmak için sınıf düzeyindeki ve nesne düzeyindeki verileri birleştirebilirsiniz. Bu özellik, aynı kartın farklı versiyonlarını oluşturmak için kullanışlıdır.
- Sınıf düzeyi
textModulesData: Bir grup kullanıcı için aynı olan ayrıntılar (ör. tüm VIP bilet sahiplerine yönelik "VIP'ye hoş geldiniz" mesajı) için bu seçeneği kullanın. - Nesne düzeyi
textModulesData: Bir kullanıcıya özel ayrıntılar için kullanılır (ör. "Ayşe, koltuğunuzun manzarası sınırlı").
Örnek: Katmana özel kartları gösterme
Farklı kart varyasyonları için farklı Class kaynakları oluşturabilirsiniz. Örneğin, bir etkinlik için "Genel Giriş" ve "VIP" veya bir uçuş için "Ekonomi" ve "Business" gibi. Her sınıfın benzersiz bir tasarımı (banner resmi, renk) ve varsayılan metni olabilir.
 |
 |
 |
| Silver ile başlayan üyelik | Üye, Altın seviyesine yükseltildi | Elmas seviyesindeki başka bir üye |
Kartın alt bölümündeki içerik
linksModuleData, imageModulesData alanları cardTemplateOverride içinde referans verildiğinde oluşturulmaz. Bu içerik, kartın alt bölümünde otomatik olarak gösterilir. Böylece kullanıcılar, müşteri hizmetleri bağlantılarına, promosyon resimlerine, hüküm ve koşullara ve diğer ek bilgilere daha iyi erişebilir.
3. Kart Yüzünün Ötesinde: Diğer Şablon Geçersiz Kılmaları
classTemplateInfo nesnesi, cardTemplateOverride dışında daha fazla özellik sunar. Kartlarınızın daha zengin ve sezgisel bir şekilde gösterilmesi için Google Cüzdan deneyiminin diğer kısımlarını özelleştirebilirsiniz.
Kullanılabilir tüm geçersiz kılmalarla ilgili ayrıntılı bilgi için ClassTemplateInfo referans belgelerine bakın.
listTemplateOverride: Google Cüzdan uygulamasının ana liste görünümündeki satır düzenini özelleştirir. Böylece, kullanıcı kartını açmadan önce en önemli alanları vurgulayabilirsiniz.detailsTemplateOverride: Kartın alt bölümünün satırlarını ve düzenini yapılandırarak ek bilgiler, bağlantılar ve metin için esnek bir alan sağlar.cardBarcodeSectionDetails: Karttaki barkod bölümünü özelleştirmenizi sağlar.