# Mobil Uygulamada Zenginleştirme

Yuva adıyla yerleştirme ve webden farkları
Kaynak: https://selwise.com/docs/product-enrichment/mobile-app

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ı](/docs/channels/app-channels), SDK kurulumu: [Mobil Uygulama](/docs/mobile/overview).

## Uygulama kanalında kural kurma

Üst çubuktan uygulama kanalınızı seçin ve kuralı her zamanki gibi oluşturun ([Kural Oluşturma](/docs/product-enrichment/rules)). **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:

```jsx
<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:

```javascript
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.

> **Yeni kural için uygulama güncellemesi gerekmez**
>
> Uygulama bir yuvayı bir kez çizmeye başladıktan sonra o yuvaya atadığınız her kural görünür. Kuralı değiştirmek, durdurmak, yenisini eklemek ya da bloğun markup'ını baştan yazmak uygulamada hiçbir değişiklik gerektirmez. Yalnızca yeni bir yuva adı yeni bir ekran ister.

## 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](/docs/product-enrichment/placeholders), kendi alanlar: [Ürün Özellikleri](/docs/product-enrichment/product-attributes).

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](/docs/channels/shared-catalog).

## Sunucu taraflı render uygulamada yok

[Sunucu taraflı render](/docs/product-enrichment/server-side) 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):

```bash
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"
```

```json
{
  "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.