# Yerleşim

Konum ve seçici ile yerleştirme
Kaynak: https://selwise.com/docs/widgets/placement

Yerleşim, kampanyanın sayfada nereye konacağını belirler. İki yöntem vardır ve hangisini kullanabileceğinizi tip belirler: **sabit konum** ya da **CSS seçici**.

## Panelde nerede

Kampanya kurucusu → **Rules** (Kurallar) adımı → **Placement** (Yerleşim) kartı. Kartta tipe göre şunlar çıkar: **Position** (Konum) düğmeleri, **Place on my site** (Sitemde yerleştir) düğmesi, **Target Selector** (Hedef Seçici) ve **Insert Position** (Ekleme Konumu). Yerleşimi listeden de açabilirsiniz: satır menüsü → **Place on site** (Sitede yerleştir).

## Sabit yerleşim

Kampanya ekrana göre konumlanır; sayfa kaydırılsa da yerinde kalır. Seçenekler tipe göre değişir:

| Tip | Seçenekler |
|---|---|
| Announcement Bar, Countdown Timer, Goal Bar, Custom Widget | `top` (Üst), `bottom` (Alt) |
| Sticky Footer | `bottom` |
| Modal | `center` |
| Slide In | `right` (Sağ), `left` (Sol), `bottom` (Alt) |
| Floating Button | `bottom-right`, `bottom-left`, `top-right`, `top-left` |
| Newsletter | `bottom-right`, `bottom-left`, `center` |
| Tab Talk | Konum yoktur; mesaj tarayıcı sekmesine yazılır |

Tek seçenekli tiplerde (Sticky Footer, Modal) konum düğmeleri çıkmaz. Üst ve alt çubuklar sayfa içeriğini **itmez**, üstüne biner; sitenizin sabit menüsüyle çakışırsa menüyü aşağı alın ya da çubuğu alta koyun.

## Seçici ile yerleşim

Kampanya, sitenizdeki bir HTML elementinin yanına konur. **Inline Banner**, **Embedded Card**, **Product View Count** ve **Cart Count** her zaman seçici kullanır; **Newsletter**, **Custom Widget** ve **Goal Bar** hem sabit hem seçici olabilir (seçici doluysa seçici geçerlidir). İki alan doldurulur:

**Target Selector** — hedef elementin CSS seçicisi, örn. `.product-price` ya da `#description`. Yalnızca seçici kullanan dört tipte (Inline Banner, Embedded Card ve iki sayaç) seçici zorunludur; boşsa kampanya kaydedilmez. Diğer üçünde boş bırakırsanız sabit konum kullanılır.

**Insert Position** — kampanyanın o elemente göre nereye gireceği:

| Değer | Panel etiketi | Sonuç |
|---|---|---|
| `before` | Before element (Öğeden önce) | Elementin hemen öncesine |
| `after` | After element (Öğeden sonra) | Elementin hemen sonrasına (varsayılan) |
| `inside-start` | Inside element (start) | Elementin içine, en başa |
| `inside-end` | Inside element (end) | Elementin içine, en sona |
| `replace` | Replace element (Öğeyi değiştir) | Elementin yerine geçer |

Seçici birden fazla elemente uyarsa **ilk** eşleşen kullanılır.

## Seçiciyi bulmak: görsel yerleştirme

CSS seçici yazmak yerine **Place on my site** düğmesiyle mağazanızı açıp yerleştireceğiniz noktaya tıklayabilirsiniz; seçici ve ekleme konumu forma kendi kendine yazılır — bkz. [Görsel Yerleştirme](/docs/channels/visual-placement). Sabit yerleşimli tiplerde aynı düğme seçim yapmaz, yalnızca kampanyanın mağazanızın üstünde nasıl göründüğünü gösterir.

Elle bulmak isterseniz:

1. Sitenizde hedef yerin üzerine sağ tıklayın → **İncele** (Inspect).
2. Açılan panelde vurgulanan elemente sağ tıklayın → **Copy** → **Copy selector**.
3. Kopyalanan değeri sadeleştirin: `body > div:nth-child(3) > div.wrapper > h2` yerine elementin kendi sınıfı varsa yalnızca onu kullanın (`.product-title`).

> **Kırılgan seçicilerden kaçının**
>
> `nth-child` ve uzun zincirler sitenizin teması güncellendiğinde bozulur. Sabit bir `id` ya da anlamlı bir sınıf adı tercih edin. Ayrıntılı rehber: [Seçici Bulma](/docs/product-enrichment/finding-selectors).

## Seçici bulunamazsa

Sayfa açıldığı anda eleman henüz yoksa (React ya da Next.js ile geç çizilen mağazalarda sık olur) kampanya yaklaşık **6 saniye** boyunca elemanın belirmesini bekler ve belirince yerleşir. Eleman bu sürede hiç gelmezse kampanya çizilmez, gösterim sayılmaz ve ekranda hata çıkmaz; yalnızca hata ayıklama modunda konsola "Selector not found" yazılır. Mağazanızın çerçevesi sonradan elemanı yeniden çizip kampanyayı silerse Selwise yerleşimi sınırlı sayıda yeniden dener. Görünmüyorsa ilk bakacağınız şey seçicidir — [Widget Görünmüyor](/docs/troubleshooting/widget-not-showing).

## Aynı yerde birden fazla kampanya

Aynı seçiciyi ya da aynı sabit konumu paylaşan kampanyalar yarışır; hangisinin çizileceğini öncelik seviyesi ve gösterim davranışı belirler — [Öncelik ve Çakışma](/docs/campaigns/priority).

## Uygulama kanalında

Uygulamada CSS seçici ve DOM yoktur; yüzeyi SDK'nın verdiği karara göre uygulama kendi bileşeniyle çizer ve nereye koyacağını uygulama belirler — bkz. [Kampanya ve Widget (mobil)](/docs/mobile/surfaces).

## Sırada ne var

- [Tetikleyiciler](/docs/widgets/triggers)
- [Hedefleme](/docs/campaigns/targeting)