Kısa cevap: @cerezsuite/consent v0.1.0-beta paketi hazırdır, npm publish Q3 2026. Şimdilik React/Next.js için Script tag rehberi kullanılır.

CSP (Content Security Policy) için ayar gerekir mi?

Kısa cevap: script-src direktifinize https://erisilebilircerez.com eklemeniz yeterli. SDK inline script kullanmaz; nonce-free CSP ile çalışır.

Dokümantasyon, Kurulum, Konfigürasyon, Entegrasyonlar

Q: SDK CDN'den mi yüklenir, kendi sunucumdan mı yüklemeliyim?

Kısa cevap: SDK CDN üzerinden hızlı servis edilir ve otomatik güncellenir. Self-hosting sunulmaz.

Q: SDK Shadow DOM ile mi çalışır?

Kısa cevap: Evet. Hem Cookie SDK hem Accessibility SDK Shadow DOM mimarisi kullanır, site CSS'iyle çakışma olmaz, async yüklenir, ilk paint'i engellemez.

Q: Cache süresi nasıl ayarlanır?

Kısa cevap: Banner konfigürasyonu 5 dakika sunucu cache'lenir. Browser tarafında sessionStorage kullanılır. Cache temizlemek için admin panel > Site Ayarları > Cache'i Temizle.

Q: Birden fazla domain için tek embed kullanabilir miyim?

Kısa cevap: Hayır. Her domain için ayrı API key alınır. Tek planla birden fazla domain yönetebilirsiniz ama her domain kendi embed kodunu kullanmalıdır.

Q: SDK herhangi bir cookie yazar mı?

Kısa cevap: Sadece tek bir functional cookie yazar: cb_consent (consent kararını saklar). Bu cookie functional kategoride olduğu için kullanıcı onayı gerektirmez.

Q: Server-side rendering (SSR) ile uyumlu mu?

Kısa cevap: Evet. SDK browser-only çalışır, Next.js/Nuxt SSR sırasında render'a etki etmez. Script strategy='afterInteractive' kullanmanızı öneririz.

HIZLI BAŞLANGIÇ

3 Adımda Çalışan Banner

Aşağıdaki adımları takip edin. 5 dakika içinde sitenizde canlı banner görebilirsiniz.

Hesap Açın

14 gün ücretsiz Pro denemesi. Kredi kartı gerekmez; e-posta adresinizle saniyeler içinde hazırsınız.

Domain Ekleyin

Domain URL'nizi Admin Panel > Domainler ekranına girin. API key ve secret key otomatik üretilir.

Kodu Yapıştırın

Sitenizin <head> etiketine tek satır embed kodu ekleyin. Banner ve widget otomatik yüklenir.

EMBED KODU

Tek Satır, İki Ürün

Aşağıdaki kodu sitenizin <head> etiketinin kapanmadan hemen önüne ekleyin. data-cerez-key değerini Admin Panel > Kurulum sayfasından alın.

<!-- Erişilebilir Çerez Cookie Consent + Accessibility -->
<script src="https://erisilebilircerez.com/sdk/consent.js"
        data-cerez-key="YOUR_API_KEY"
        async></script>

Önemli async niteliği zorunludur; aksi hâlde SDK sayfanın ilk paint'ini geciktirebilir. Konfigürasyon 5 dakika sunucu tarafında önbelleklenir; SDK değişikliklerinizi bir sonraki yüklemede yansıtır.

PLATFORMLAR

6 Platform için Hazır Rehber

Her platform için ayrıntılı adım adım kurulum kılavuzu mevcuttur.

HTML / Statik Site

<head> etiketine script ekleyin. Kurulum 30 saniye.

<head>
  <!-- mevcut etiketler -->
  <script src="https://erisilebilircerez.com/sdk/consent.js"
          data-cerez-key="YOUR_KEY" async></script>
</head>

WordPress

WP Plugin ZIP'i indirin, eklentiyi yükleyin, API key'i girin.

# Seçenek A: Plugin ile (önerilen)
Admin Panel > Eklentiler > Yeni Ekle
ZIP yükle > Etkinleştir > API Key gir

# Seçenek B: Manuel (functions.php)
add_action('wp_head', function() {
  echo '<script src="https://erisilebilircerez.com/sdk/consent.js"
  data-cerez-key="YOUR_KEY" async></script>';
});

Shopify

theme.liquid içine ekleyin veya Custom Code Injector kullanın.

<!-- theme.liquid içinde, </head> öncesine -->
<script
  src="https://erisilebilircerez.com/sdk/consent.js"
  data-cerez-key="YOUR_KEY"
  async></script>

Next.js / React

_app.tsx içinde <Script strategy="afterInteractive"> kullanın.

// pages/_app.tsx
import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://erisilebilircerez.com/sdk/consent.js"
        data-cerez-key="YOUR_KEY"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

Google Tag Manager

Custom HTML tag oluşturun, All Pages trigger ile yayınlayın.

<!-- GTM > Tags > New > Custom HTML -->
<script
  src="https://erisilebilircerez.com/sdk/consent.js"
  data-cerez-key="YOUR_KEY"
  async></script>

<!-- Trigger: All Pages / Consent Initialization -->

Webflow

Site Settings > Custom Code > Head Code alanına yapıştırın.

<!-- Site Settings > Custom Code > Head Code -->
<script
  src="https://erisilebilircerez.com/sdk/consent.js"
  data-cerez-key="YOUR_KEY"
  async></script>

JAVASCRIPT API

Programatik Kontrol: 5 Ana Metod

Banner'ı kendi arayüzünüzden açabilir, consent kontrolü yapabilir, event dinleyebilirsiniz. Tüm metodlar window.Erişilebilir Çerez namespace altındadır.

CerezBanner.show()

Banner'ı manuel olarak gösterir. "Çerez Tercihlerimi Yönet" butonu gibi özel tetikleyicilerden çağrılabilir.

// Footer'daki "Çerez Tercihlerim" linkine event listener
document.querySelector('#cookie-prefs').addEventListener('click', () => {
    CerezBanner.show();
});

CerezBanner.getConsent()

Kullanıcının mevcut consent durumunu döner. Henüz karar verilmediyse null döner.

const consent = CerezBanner.getConsent();
// Örnek dönüş:
// { necessary: true, analytics: true, marketing: false, functional: true, timestamp: 1717000000 }

if (consent?.analytics) {
    // Google Analytics'i yükle
}

CerezBanner.on(event, callback)

Consent değişimlerini dinleyin. Desteklenen eventler: consent.given, consent.updated, consent.rejected, banner.shown.

CerezBanner.on('consent.given', (data) => {
    console.log('Onay verildi:', data.categories);

    if (data.categories.marketing) {
        // Facebook Pixel başlat
        fbq('init', 'YOUR_PIXEL_ID');
    }
});

CerezBanner.reset()

Mevcut consent'i temizler ve banner'ı tekrar gösterir. "Tercihlerimi Sıfırla" gibi işlevler için uygundur.

CerezBanner.reset(); // cb_consent cookie silinir, banner yeniden açılır

CerezBanner.hide()

Banner'ı programatik olarak gizler. Consent kaydedilmez; yalnızca görünürlük değişir.

CerezBanner.hide(); // Banner DOM'dan kaldırılmaz, gizlenir

SCRIPT BLOCKING

3rd-party Script'leri Onay Öncesi Engelleyin

GA4, Facebook Pixel, Hotjar gibi script'leriniz onay alınana kadar çalışmamalıdır (KVKK/GDPR zorunluluğu). type="text/plain" ve data-cb-category nitelikleri ile otomatik engelleme sağlanır.

Uyumsuz (script anında çalışır)

<!-- YANLIŞ: script anında yüklenir -->
<script
  src="https://www.googletagmanager.com/gtag/js?id=G-XXX"
></script>

Uyumlu (onay sonrası çalışır)

<!-- DOĞRU: sadece onay sonrası yüklenir -->
<script
  type="text/plain"
  data-cb-src="https://www.googletagmanager.com/gtag/js?id=G-XXX"
  data-cb-category="analytics"
></script>

Inline Script Engelleme

<!-- Inline script için: type="text/plain" + data-cb-category -->
<script type="text/plain" data-cb-category="marketing">
    fbq('init', 'PIXEL_ID');
    fbq('track', 'PageView');
</script>

Desteklenen Kategoriler necessary (engellenemez), analytics, marketing, functional

GOOGLE CONSENT MODE V2

Otomatik Entegrasyon, Tek Toggle

Admin Panel > Site Ayarları > Google Entegrasyonu sayfasından "Consent Mode v2" toggle'ını açın. SDK otomatik olarak gtag('consent', 'default', {...}) ve güncelleme sinyallerini yönetir.

SDK Otomatik Olarak Şunu Yapar

// Sayfa yüklenir yüklenmez, kullanıcı henüz karar vermedi
gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'functionality_storage': 'denied',
    'personalization_storage': 'denied',
    'security_storage': 'granted'
});

// Kullanıcı onay verdikten sonra, analytics + marketing kabul edildi
gtag('consent', 'update', {
    'ad_storage': 'granted',
    'analytics_storage': 'granted'
});

Ayrıntılı GCM v2 rehberi için Google Consent Mode v2 sayfasına bakın.

GELİŞMİŞ AYARLAR

Özelleştirme ve Yapılandırma

Embed koduna ek nitelikler ekleyerek SDK davranışını özelleştirebilirsiniz.

Önizleme Modu

URL'e ?cb_preview=true ekleyerek mevcut consent'i atlayıp banner'ı her seferinde gösterebilirsiniz. Test ve geliştirme için idealdir.

Dil Tercihi

Admin Panel > Site Ayarları > Banner Dili ile sabit bir dil seçebilir ya da ziyaretçinin tarayıcı diline göre otomatik geçiş (auto) ayarlayabilirsiniz. TR / EN / DE desteklenir.

CSP Uyumu

script-src direktifinize https://erisilebilircerez.com eklemeniz yeterlidir. SDK inline script kullanmaz; nonce gerektirmez.

sessionStorage Cache

SDK, yüklendikten sonra banner konfigürasyonunu sessionStorage'da saklar. Aynı oturumda tekrar sunucu çağrısı yapılmaz; sayfa yükleme süresi kısalır.

Consent Süresi

Admin Panel > Site Ayarları > Consent Süresi ile cb_consent cookie'sinin geçerlilik süresini ayarlayın (varsayılan 180 gün). KVKK uyumu için önerilen süre 6 aydır.

IP Kısıtlama

Admin Panel > Kurulum > IP Restriction toggle'ını açıp izinli IP adreslerini (CIDR notation desteklenir) girerek API erişimini sınırlandırın.

SIK SORULAN SORULAR

Teknik Sorular

SDK CDN'den mi yüklenir, kendi sunucumdan mı yüklemeliyim?

Kısa cevap: SDK CDN üzerinden hızlı servis edilir ve otomatik güncellenir. Self-hosting sunulmaz; bu sayede yeni özellikler ve güvenlik güncellemeleri otomatik olarak tüm müşterilere ulaşır.

SDK Shadow DOM ile mi çalışır?

npm paketi var mı?

Kısa cevap: @cerezsuite/consent v0.1.0-beta paketi hazırlanmıştır. npm registry yayın hedefi Q3 2026. Şu an için <Script strategy="afterInteractive"> rehberi önerilir (bu sayfadaki Next.js bölümüne bakın).

Cache süresi nasıl ayarlanır?

Birden fazla domain için tek embed kullanabilir miyim?

SDK herhangi bir cookie yazar mı?

Kısa cevap: Sadece tek bir functional cookie yazar: cb_consent (consent kararını saklar, varsayılan 180 gün). Bu cookie functional kategoride olduğu için KVKK/GDPR kapsamında kullanıcı onayı gerektirmez.

Server-side rendering (SSR) ile uyumlu mu?

Kısa cevap: Evet. SDK browser-only çalışır; Next.js/Nuxt SSR sürecinde render'a etki etmez. <Script strategy="afterInteractive"> kullanmanızı öneririz. Hydration mismatch yaşanmaz.

CSP (Content Security Policy) için özel ayar gerekir mi?

Kısa cevap: script-src direktifinize https://erisilebilircerez.com eklemeniz yeterlidir. SDK inline script kullanmaz; nonce-free CSP ile çalışır.

5 dakikada kurulum, sınırsız özelleştirme