Mobil Uygulamada Zenginleştirme

Zenginleştirme, web sitenizde ve mobil uygulamanızda aynı özelliktir: aynı bloklar, aynı yer tutucular, aynı segment ve test modu davranışı. Tek fark içeriğin nereye gireceğini nasıl söylediğinizdir.

Web seçiciyle, uygulama adla yerleşir

	Web sitesi kanalı	Uygulama kanalı
Yerleştirme	CSS seçicisi (.product-description)	Yuva adı (pdp-specs)
Ekleme konumu	Öncesine, sonrasına, içine, yerine	Yuvanın kendisi
Sunucu taraflı render	Var	Yok (aşağıda)
Render modu seçimi	Var	Yok; alan gizlenir
Test modu	Tarayıcıda bayrak	SDK testMode: true ile başlatılır

Bunun sebebi bir tercih değil: bir uygulama ekranının DOM'u yoktur, dolayısıyla eşleştirilecek bir seçici de yoktur. Buna karşılık bir ad verebilirsiniz ve uygulama o adı çizer. Uygulama kanalı kurulumu: Uygulama Kanalları, SDK kurulumu: Mobil Uygulama.

Uygulama kanalında kural kurma

Üst çubuktan uygulama kanalınızı seçin ve kuralı her zamanki gibi oluşturun (Kural Oluşturma). Rules adımının Where it goes bölümünde seçici ve ekleme konumu yerine App slot (Uygulama yuvası) alanını görürsünüz:

pdp-specs

Yazdığınız değer katlanır: boşluklar ve alt çizgiler tireye döner, harfler küçülür, yalnızca küçük harf, rakam ve tek tire kalır (en fazla 64 karakter). Panel kaydedilecek hâli hemen Saved as satırında gösterir; yazdığınız ad katlandıktan sonra geçersizse ("Use lowercase letters, digits and single dashes") kayıt reddedilir. Alanın altında uygulama kodunuza yapıştıracağınız hazır satır görünür. Yuva adı boş bırakılamaz; uygulama kuralının başka yerleşimi yoktur.

Uygulama tarafı

Yuvayı çizmenin iki yolu vardır.

Akinon App Maker eklentisi hazır bir bileşen taşır:

<SelwiseEnrichment plugin={Selwise} code={product.sku} slot="pdp-specs" />

Bileşen içeriği izole bir WebView'de çizer, yüksekliği ölçüp ayarlar, gösterimi ve tıklamayı kendisi raporlar. react-native-webview kurulu olmalıdır. Eklentinin plugin.enrichmentSlots() çağrısı, canlı kuralların kullandığı yuva adlarını listeler.

@selwise/react-native SDK'sını doğrudan kullanıyorsanız (0.6.0 ve sonrası) içeriği kendiniz çizersiniz:

const result = await selwise.getEnrichment(product.sku, ['pdp-specs']);

for (const item of selwise.enrichmentForSlot(result, 'pdp-specs')) {
  // item.html: yer tutucuları doldurulmuş, temizlenmiş, çizilmeye hazır
  // item.css: temizlenmiş ve bu kuralın bloklarına sınırlanmış
  // item.reservedHeightPx: ölçülene kadar ayrılacak yükseklik
  selwise.trackEnrichmentView(item);
}

getEnrichmentSlots() canlı kuralların taşıdığı tüm yuva adlarını döndürür; ekranınızın çizdiği yuvalarla karşılaştırıp bir yuvanın hiçbir ekran tarafından çizilmediğini fark edebilirsiniz. İçerik (kod, yuvalar, özet damgası) başına önbelleğe alınır, en fazla 20 ürün tutulur; invalidateEnrichment() temizler. Gösterim için trackEnrichmentView(item) (kural başına bir kez), tıklama için trackEnrichmentClick(item) çağrılır.

Aynı ürün, iki ayrı ekran

Bir yuva bir ekrandır. Ürün künyesini ürün ekranına, kargo notunu sepet ekranına koymak için iki kural yazıp iki farklı yuva adı verirsiniz; kurallar, bloklar ve koşullar tamamen aynı mantıkla çalışır.

Bir yuvaya birden fazla kural yığabilirsiniz. Sıralamayı Priority belirler; Only the highest priority çakışma davranışı webde olduğu gibi çalışır ve kapsamı yuvadır: aynı yuva adını paylaşan kurallar birbiriyle yarışır.

Yer tutucular ve kendi alanlarınız

Fark yok: ${title}, ${brand}, ${formattedPrice}, ${imageUrl} ve besleme dosyanızın kendi alanları için ${attr.gtin}, ${attr.garanti_suresi}. Tam liste: Yer Tutucular, kendi alanlar: Ürün Özellikleri.

Uygulama kanalınız kataloğu web kanalınızdan ödünç alıyorsa (uygulama kanallarında olağan durum, çünkü ürünler aynı ve besleme iki kez senkronlanmamalı) yer tutucular o katalogdan çözülür. Bkz. Paylaşılan Katalog.

Sunucu taraflı render uygulamada yok

Sunucu taraflı render JavaScript çalıştırmayan istemciler içindir: GPTBot, ClaudeBot, bağlantı önizleme botları, arama motorları. Bir mobil uygulamayı bunların hiçbiri taramaz; bu yüzden Where it renders ve Slot name alanları uygulama kanalında gösterilmez.

Bir kuralı web sitenizde SEO için Server only moduna aldıysanız bu, uygulamadaki görünürlüğünü etkilemez: uygulamanın tek bir çizici katmanı vardır ve kural orada görünmeye devam eder.

İçerik uygulamaya nasıl ulaşıyor

Uygulama, markup'ı bitmiş hâlde alır: yer tutucular yorumlanmış, HTML temizlenmiş, CSS bloğun kendi kapsamına alınmış. Webde bu iş widget'ta yapılır, çünkü içerik sizin sayfanıza girer ve oradaki stillerle çakışmaması gerekir; uygulamada içerik izole bir WebView'de çizildiği için çakışacak bir şey yoktur. İki yol da aynı hazırlama ve aynı temizleme adımını kullanır; yani panelde önizlemede onayladığınız şey, hangi kanalda çizilirse çizilsin aynıdır.

Uç nokta (SDK bunu sizin için çağırır):

curl "https://api.selwise.com/api/v1/public/sites/SITE_KEY/app/enrichments?code=04260&slots=pdp-specs,basket-shipping" \
  -H "x-selwise-api-key: UYGULAMA_API_ANAHTARI"

{
  "v": "mfb3k9a.3",
  "code": "04260",
  "resolved": true,
  "slots": ["pdp-specs", "basket-shipping"],
  "items": [
    {
      "assignmentId": "b7c0…",
      "placementKey": "pdp-specs",
      "order": 0,
      "html": "<div data-selwise-enrichment=\"…\">…</div>",
      "css": "[data-selwise-enrichment=\"…\"] .tablo { … }",
      "reservedHeightPx": 180,
      "segmentTargetingMode": "all",
      "segmentIds": [],
      "isTestMode": false
    }
  ]
}

• slots virgülle ayrılır, en fazla 10 yuva istenir; adlar sunucuda katlanır.
• code 100 karakteri aşarsa ya da slots boşsa hata değil boş yanıt (items: []) döner.
• Bir web kanalının anahtarıyla çağrılırsa 400 döner: web kanalı /enrichments uç noktasını kullanır.
• ?test=1 test modundaki kuralları da getirir.
• Test modu ve segment kararı SDK'da verilir (kuralın isTestMode ve segment alanları yanıtla gelir). Bu, tek bir ürün yanıtının tüm ziyaretçiler için önbelleğe alınabilmesini sağlar.

Raporlama

Gösterim ve tıklama webdekiyle aynı isimlerle kaydedilir, yani bir kuralın iki kanaldaki performansı tek raporda toplanır. Bir kural kaç blok yığarsa yığsın gösterimi bir kez sayılır; tıklama, dokunulan bağlantıyı içeren kurala atfedilir.