Script ile kurulum

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:

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

<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.
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:

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

Tüm metotlar için: JavaScript API.

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.

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.