Widget Kurulumu

Detayli kurulum rehberi

Selwise script'ini sitenize eklemenin üç yolu vardır: CDN (önerilen), npm paketi ve React Native (mobil). Çoğu e-ticaret sitesi için CDN yöntemi yeterlidir.

Ön koşul: site oluşturun ve site key alın

Kurulumdan önce Dashboard'da bir site tanımlamanız gerekir.

selwise.com/dashboard adresinde oturum açın.
Siteler > Site Ekle adımından e-ticaret alan adınızı girin (örn. magaza.com) ve para biriminizi seçin (ISO-4217, örn. TRY, EUR, USD).
Oluşturulan sitenin Site Key değerini kopyalayın. Tüm kurulum bu anahtarla çalışır.

API üzerinden oluşturmak isterseniz:

curl -X POST https://api.selwise.com/api/v1/sites \
  -H "Authorization: Bearer <ACCESS_TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{ "domain": "magaza.com", "currency": "TRY" }'

Yanıt, kurulumda kullanacağınız siteKey alanını içerir.

Site Key gizli değildir

siteKey tarayıcıda görünür ve gizli bir sır değildir. Güvenlik, gizlilikten değil domain doğrulamasından gelir: Selwise, event ve içerik isteklerini yalnızca doğrulanmış alan adınızın Origin / Referer başlığından kabul eder.

Yöntem 1: CDN (önerilen)

Aşağıdaki tek satırı sitenizin tüm sayfalarında, </body> etiketinden hemen önce (veya <head> içinde) yerleştirin. SITE_KEY değerini kendi anahtarınızla değiştirin.

<script
  src="https://widget.selwise.com/client.js"
  data-site-key="SITE_KEY"
></script>

Script yüklendiğinde document.currentScript üzerindeki data-* özniteliklerini okuyarak otomatik başlatılır — ayrıca Selwise.init() çağırmanıza gerek yoktur.

Script öznitelikleri

Öznitelik	Zorunlu	Açıklama
`data-site-key`	Evet	Sitenizin Selwise anahtarı. Bu olmadan başlatma yapılmaz.
`data-api-url`	Hayır	API taban adresini geçersiz kılar. Varsayılan: `https://api.selwise.com`. Değer otomatik olarak `/api/v1` ile normalize edilir.
`data-env`	Hayır	`development` verilirse geliştirme modu açılır (ek hata ayıklama araçları).

Tek bir kez ekleyin

Script'i sayfa başına yalnızca bir kez ekleyin. SPA (tek sayfa uygulaması) yönlendirmelerinde script'i yeniden eklemeyin — Selwise sayfa geçişlerini kendisi algılar (MutationObserver + history API) ve içeriği yeniden değerlendirir.

Yöntem 2: npm paketi

React, Vue veya kendi build sisteminizi kullanan modern uygulamalar için:

npm install @selwise/widget

import Selwise from '@selwise/widget';

const widget = new Selwise();

await widget.init({
  siteKey: 'SITE_KEY',
  apiUrl: 'https://api.selwise.com/api/v1',
  exposeGlobal: true, // window.Selwise'ı da tanımlar
});

init() seçenekleri (WidgetConfig):

Alan	Tip	Varsayılan	Açıklama
`siteKey`	`string`	—	Zorunlu. Sitenizin anahtarı.
`apiUrl`	`string`	`https://api.selwise.com`	API taban adresi. `/api/v1` yoksa eklenir.
`exposeGlobal`	`boolean`	`false`	`true` ise `window.Selwise` global API'sini tanımlar.

Next.js / SSR

Script yalnızca tarayıcıda çalışır. Next.js gibi SSR ortamlarında init() çağrısını useEffect içinde (yalnızca istemcide) yapın veya CDN yöntemini bir <Script strategy="afterInteractive"> etiketiyle kullanın.

Yöntem 3: React Native (mobil)

Mobil uygulamalar için ayrı bir SDK ve API anahtarı kullanılır:

npm install @selwise/react-native @react-native-async-storage/async-storage

import Selwise from '@selwise/react-native';

const selwise = new Selwise();

await selwise.init({
  siteKey: 'SITE_KEY',
  apiUrl: 'https://api.selwise.com/api/v1',
  apiKey: 'YOUR_MOBILE_API_KEY', // Dashboard > site ayarlarından üretilir
  sdkVersion: '0.1.0',
});

await selwise.setScreenContext({ name: 'Home', path: '/home' });

selwise.track('page_view', {
  entityType: 'page',
  metadata: { source: 'react-native' },
});

Mobil istekler tarayıcı Origin başlığı içermediğinden domain doğrulaması yerine x-selwise-api-key başlığıyla kimlik doğrular. Mobil API anahtarını Dashboard'daki site ayarlarından üretebilirsiniz.

Dağıtılan dosyalar

CDN'de aşağıdaki dosyalar yayınlanır. Yalnızca client.js'i eklersiniz; geri kalanı Selwise gerektiğinde otomatik yükler.

Dosya	Ne zaman yüklenir
`client.js`	Her zaman — ana giriş dosyası (gzip 15 KB altında hedeflenir).
`selwise-search.[hash].js`	Arama modülü kullanıldığında (tembel).
`selwise-reco.[hash].js`	Öneri modülü kullanıldığında (tembel).
`selwise-renderers.[hash].js`	Widget şablonları gerektiğinde (tembel).
`selwise-datalayer.[hash].js`	Veri katmanı devreye girdiğinde (tembel).
`selwise-vendor.[hash].js`	Paylaşılan üçüncü taraf bağımlılıklar (tembel).

Başlatma akışı

init() çağrıldığında Selwise şu adımları sırayla yürütür:

/api/v1/public/sites/:siteKey/tracking-config — takip/batch yapılandırmasını yükler.
Deney (experiment) varyant atamalarını başlatır.
Segment hedeflemesini yükler.
Kampanyaları ve widget'ları çeker (/config toplu endpoint'i veya ayrı çağrılar).
Özel script'leri çeker.
Journey (yolculuk) takibini başlatır.
Kampanya ve widget'ları render eder.
Arama ve öneri modüllerini gerektiğinde tembel yükler.

Kurulumu doğrulayın

Kurulumdan sonra:

Domain doğrulaması yapın. Doğrulanmamış domain'lerde widget render edilmez ve event'ler reddedilir. Bkz. Domain Doğrulama.
Tarayıcı konsolunda debug modunu açın:

localStorage.setItem('selwise_debug', 'true');
location.reload();

Ağ (Network) sekmesinde tracking-config ve events/batch isteklerinin oluştuğunu doğrulayın.

Sorun yaşarsanız Widget Görünmüyor ve Takip Sorunları sayfalarına bakın.

Son güncelleme: 1 Temmuz 2026

Bu makale yardimci oldu mu?