# Script ile kurulum

> Yorumların her sitede tek bir script etiketi ve bir container ile gösterilmesi.

Kaynak: /tr/integrate/script/

En kısa kurulum yöntemidir ve her sitede çalışır: sayfaya Sayproof script'i ve yorumların gösterileceği yere bir container eklenir. Script yorumları getirir; özeti, fotoğraf şeridini ve listeyi oluşturur; filtreleri, aramayı, sıralamayı, "Faydalı mı?" oylarını, bildirimleri, fotoğraf görüntüleyiciyi ve yorum yazma akışını yönetir. React, Vue gibi bir framework gerekmez.

## Script'in eklenmesi

Sayfanın sonuna, `</body>` etiketinden önce ekleyin:

```html
<script type="module"
        src="https://cdn.sayproof.example/sayproof.js"
        data-review-site-key="SITE-ANAHTARINIZ"
        data-review-base="https://api.sayproof.example"
        data-review-locale="tr"></script>
```

| Attribute | Açıklama |
|---|---|
| `src` | Script'in adresi. Gerçek adres panelde **Entegrasyon › Sitede gösterim** sekmesindeki **Yorumları ürün sayfasında gösterin** kartında, **Script (tarayıcıda)** yolu seçildiğinde **Kurulumda kullanılacak değerler** listesinin **Script adresi** satırında yer alır. |
| `data-review-site-key` | Kanalınızın site anahtarı. |
| `data-review-base` | Sayproof API adresi. |
| `data-review-locale` | `tr` ya da `en`. Belirtilmezse sayfanın `<html lang>` değeri, o da yoksa kanalın dili kullanılır. |

Script bir ES modülüdür ve CORS ile yüklenir; bu nedenle `type="module"` zorunludur. Sayfa başına bir kez eklenmesi yeterlidir.

## Container'ın eklenmesi

Yorumların gösterileceği yere şu öğeyi ekleyin:

```html
<div data-review-mount
     data-review-product="URUN-KODU"
     data-review-product-name="Ürün adı"></div>
```

| Attribute | Açıklama |
|---|---|
| `data-review-mount` | Öğenin yorum container'ı olduğunu belirtir. |
| `data-review-product` | Ürün kodu. Sipariş aktarımında gönderilen `variant_key` (grup düzeyinde gösterimde `group_key`) ile **aynı** olmalıdır. |
| `data-review-scope` | `variant` (varsayılan): yalnızca bu varyantın yorumları. `group`: ürün grubunun tüm yorumları; bu durumda `data-review-product` grup kodudur. |
| `data-review-product-name` | Ürün adı. İsteğe bağlıdır. |
| `data-review-layout` | `list` (varsayılan) ya da `grid`. |
| `data-review-style` | `cards` ya da `sidebar`: yorum bölümünün düzeni. Belirtilmezse kanalın panelde seçilen düzeni kullanılır. Bkz. [Düzen ve CSS seçicileri](/tr/customize/css-hooks.md). |
| `data-review-theme` | `warm`, `trust`, `editorial`, `minimal`, `soft`, `bold`, `natural` ya da `night`: yorum bölümünün hazır tasarımı. Belirtilmezse ya da tanınmayan bir değer verilirse kanalın panelde seçilen tasarımı kullanılır. |
| `data-review-gate` | Yorum yazma alanının container dışında başka bir yerde gösterilmesi isteniyorsa o yerin CSS selector'ı; örneğin `#yorum-yaz`. |

Bir sayfada birden fazla container bulunabilir; her container kendi ürününün yorumlarını gösterir.

## Sayfa değişiklikleri

Script sayfadaki değişiklikleri izler. Container sonradan eklenir ya da kaldırılırsa veya `data-review-product` değeri değişirse (örneğin varyant seçildiğinde) bileşen kendini günceller. Tek sayfalı uygulamalarda (SPA) ek bir işlem gerekmez.

Elle kontrol gerektiğinde script'in genel API'si `window.Sayproof` nesnesidir:

```js
window.addEventListener("sayproof:ready", () => {
  const container = document.querySelector("#reviews");
  window.Sayproof.update(container, { product: "URUN-KODU-2" });
});
```

Tüm metotlar için: [JavaScript API](/tr/reference/javascript-api.md).

## Yorum yazma akışı

Varsayılan bileşen, oturum açmamış ziyaretçiye genel bir "Yorum yaz" düğmesi **göstermez**; bu, ürünü satın almamış kişileri yorum yazmaya yönlendirmek anlamına gelir. Bunun yerine kısa bir bilgi metni ve "Siparişimi doğrulayıp yorum yazmak istiyorum" bağlantısı gösterilir:

1. Müşteri sipariş numarasını ve siparişte kullandığı e-posta adresini girer.
2. Sayproof siparişi kontrol eder: ödemenin tamamlanıp tamamlanmadığını, ürünün teslim edilip edilmediğini, yorum yazma süresinin dolup dolmadığını ve bu satır için daha önce yorum yazılıp yazılmadığını.
3. Koşullar sağlanıyorsa yorum formu açılır. Sağlanmıyorsa tek ve genel bir hata mesajı gösterilir; siparişin bulunamadığı durum ile e-posta adresinin yanlış olduğu durum birbirinden ayırt edilmez.

Davet e-postasındaki bağlantıdan gelen müşteri için bu doğrulama gerekmez: script bağlantının `#review_token=…` bölümünü (eski davetlerde `?review_token=…` parametresini) algılar, adres çubuğundan siler ve formu otomatik olarak açar. İptal ya da iade edilen sipariş için gönderilen alışveriş deneyimi davetinde form değerlendirme başlıkları olmadan açılır. Oturum açmış müşteri için: [Oturum açmış müşteri](/tr/integrate/signed-in-customers.md).

Müşteri fotoğraf ya da video eklediğinde script dosyayı yüklemeden önce tarayıcıda hazırlar. Fotoğraf, uzun kenarı en fazla 2.560 piksel olacak şekilde küçültülür ve yeniden JPEG olarak kaydedilir (saydam alanı varsa WebP ya da PNG); bu işlem fotoğrafın taşıdığı konum ve cihaz bilgisini de siler. Video, kısa kenarı en fazla 1.080 piksel, yaklaşık 3 Mbps ve saniyede en fazla 30 kare olacak şekilde H.264'e dönüştürülür; sesi ve konum etiketleri bırakılmaz. Bu değerlere zaten uyan video yeniden kodlanmaz, yalnız sesi ve etiketleri çıkarılır. Sınırdan uzun video dönüştürülmez. Bu sırada dosyanın yanında "Hazırlanıyor %42", ardından "Yükleniyor %17" ve dosyayı iptal eden bir düğme görünür. Tarayıcı dosyayı hazırlayamazsa (örneğin HEIC fotoğrafı okuyamayan bir tarayıcı ya da video kodlayamayan bir tarayıcı; video dönüştürme 20 saniye boyunca ilerlemezse ya da toplam 4 dakikayı aşarsa da hazırlanamamış sayılır ve durdurulur) dosya boyut sınırının içindeyse olduğu gibi yüklenir; değilse form dosyanın bu tarayıcıda küçültülemediğini söyler ve yüklemez.

## İçerik güvenliği politikası (CSP)

Siteniz CSP kullanıyorsa:

- `script-src` direktifi script'in adresini, `connect-src` direktifi Sayproof API adresini içermelidir.
- `img-src` ve `media-src` direktifleri yorum fotoğraf ve videolarının sunulduğu adresi içermelidir.
- Server-side rendering kullanıyorsanız `style-src` direktifi script ile aynı adresteki `sayproof.css` dosyasına izin vermelidir.
- Nonce kullanıyorsanız script etiketine `nonce` attribute'unu ekleyin. Script stillerini `<style>` öğeleriyle ekler (`#sayproof-style`; form ilk açıldığında ya da sipariş detayındaki değerlendirme kurulduğunda `#sayproof-style-form`, fotoğraf görüntüleyici ilk açıldığında `#sayproof-style-lightbox`) ve etiketteki nonce değerini bu öğelere de yazar. `style-src` yönergeniz `'unsafe-inline'`'a izin vermiyorsa nonce zorunludur: nonce olmadan tarayıcı bu stilleri engeller, bileşen ve yorum formu stilsiz görünür.

## Performans

Script'in ilk yüklemesi yaklaşık 13 KB'tır (gzip). Varsayılan bileşenin stilleri ayrı bir parçadır ve ilk yorum listesi isteğiyle paralel yüklenir (yaklaşık 6 KB); bileşen, liste yanıtı ve stiller hazır olduğunda bir kez çizilir. Headless kullanımda bu stiller hiç yüklenmez. Yorum formu ayrı bir parça olarak yalnızca form açıldığında yüklenir (fotoğraf görüntüleyiciyle ortak dialog bölümü dahil yaklaşık 7,5 KB). Fotoğraf görüntüleyici de ayrı bir parçadır ve yalnızca bir fotoğraf ya da video ilk kez açıldığında yüklenir (yaklaşık 1,5 KB; form daha önce açılmadıysa ortak dialog bölümüyle birlikte yaklaşık 3 KB). Ziyaretçi fotoğraf ya da video seçtiğinde dosyayı hazırlayan bir parça daha yüklenir (yaklaşık 2,3 KB); ilk video seçildiğinde ve tarayıcı video kodlayabiliyorsa video dönüştürücüyü içeren ikinci bir parça yüklenir (yaklaşık 100 KB). Dosya seçilmedikçe ikisi de yüklenmez. İstekler cookie göndermez; okuma istekleri tarayıcıda preflight isteğine neden olmaz.

`sayproof.js` ve `sayproof.css` 5 dakika önbellekte tutulur; yeni bir sürüm sitenize en geç birkaç dakika içinde ulaşır, adresi değiştirmeniz gerekmez. Script'in yüklediği diğer parçaların adı içerikle birlikte değişir ve bir yıl önbellekte kalır. Dosyalar tarayıcının desteklediği sıkıştırmayla (brotli ya da gzip) sunulur.

## Ürün sayfası görüntülenmeleri

Script, her container için sayfa yüklemesi başına bir kez ürünün görüntülendiğini Sayproof'a bildirir. Bu sayım **İstatistikler › Ürün puanları** sekmesindeki "1.000 görüntülenmede yorum" değerinde kullanılır. Bildirim anonimdir: kişi, cookie, IP adresi ya da tarayıcı bilgisi saklanmaz; bot, bağlantı önizleme ve önceden yükleme (prefetch) istekleri sayılmaz. Önceden hazırlanan (prerender) bir sayfada bildirim, sayfa gerçekten gösterildiğinde gönderilir.

## Deneme

Bir ürün sayfasını açın, ardından paneldeki **Entegrasyon › Sitede gösterim** sekmesinde "Sitede görüldü mü?" bölümünü kontrol edin. Yorumlar görünmüyorsa: [Sorun giderme](/tr/integrate/troubleshooting.md).