Çerez kabul ve reddet düğmesi nasıl çalışmalı? JavaScript ile küçük bir örnek

Bir çerez bildiriminin ekranda görünmesi tek başına tercih yönetimi değildir. “Reddet” düğmesine basıldıktan sonra aynı isteğe bağlı ölçüm devam ediyorsa kullanıcıya sunulan seçim işlevini yerine getirmemiş olur. Bu rehberde gerçek bir üçüncü taraf izleme servisi bağlamadan onay akışını göstereceğiz. Ekrandaki örnek sayaç yalnızca kabulden sonra çalışacak, reddedildiğinde duracak. Amaç, arayüz ile davranışın birlikte tasarlanmasını öğrenmektir.

1. Önce işlemleri ayırın

Hesabın oturumunu sürdürmek ile ziyaret istatistiği toplamak aynı iş değildir. Sitenizde hangi kodun hangi depolamayı kullandığını araştırın. Tema tercihi, alışveriş sepeti, reklam etiketi ve analiz kodunu tek bir belirsiz kategoriye koymayın. Bu örnek yalnızca isteğe bağlı bir işlemin açılıp kapanmasını gösterir; belirli bir ülkenin tüm hukuki gerekliliklerini karşıladığı iddiası taşımaz. Gerçek site metni, kullanılan hizmetleri doğru anlatmalıdır.

2. Örnekte ne saklanıyor?

Kararı localStorage içinde sürüm, seçim ve zaman bilgisiyle tutuyoruz. Bu bir HTTP çerezi değildir; cihazda tercih saklama yöntemidir. Yazının başlığındaki çerez bildirimi, kullanıcıya sunulan seçim arayüzünü anlatır. Örnekte tercih süresi 180 gün olarak seçilmiştir. Depolama engellenirse sayfa mevcut oturumda çalışır, fakat yenilendiğinde karar yeniden sorulabilir. Böyle bir durumu “kalıcı kaydedildi” diye sunmamak gerekir.

3. Kopyalanabilir HTML ve JavaScript

Aşağıdakini index.html olarak kaydedip yerel sunucuda açın. Kod hiçbir analiz sunucusuna veri göndermez. Sayaç yalnızca seçim davranışını görünür kılan bir eğitim gösterimidir.

<!doctype html><html lang="tr"><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tercih örneği</title>
<style>
body{font:18px/1.6 system-ui;margin:32px;max-width:760px}
button{font:inherit;padding:10px 18px;margin:4px;cursor:pointer}
button:focus-visible{outline:3px solid #2161c8;outline-offset:3px}
#banner{border:1px solid #aab7cc;padding:20px;border-radius:12px}
</style>
<h1>Tercih yönetimi denemesi</h1>
<p id="status" role="status">İsteğe bağlı işlem kapalı.</p>
<section id="banner" aria-labelledby="title">
<h2 id="title">İsteğe bağlı ölçüme izin veriyor musunuz?</h2>
<p>Bu örnekte yalnızca ekranda bir sayaç çalışır; veri gönderilmez.</p>
<button id="reject">Reddet</button><button id="accept">Kabul et</button>
</section>
<button id="edit" hidden>Tercihi değiştir</button>
<script>
const key='demo-consent-v1', maxAge=180*86400000;
const banner=document.getElementById('banner');
const edit=document.getElementById('edit');
const status=document.getElementById('status');
let timer=null, count=0;
function read(){
  try{
    const value=JSON.parse(localStorage.getItem(key));
    const age=Date.now()-value.at;
    return ['accepted','rejected'].includes(value.choice)&&age>=0&&age<maxAge?value.choice:null;
  }catch{return null;}
}
function apply(choice){
  clearInterval(timer); timer=null; count=0;
  banner.hidden=choice!==null; edit.hidden=choice===null;
  status.textContent='İsteğe bağlı işlem kapalı.';
  if(choice==='accepted'){
    status.textContent='İzin verildi. Örnek sayaç başladı.';
    timer=setInterval(()=>{status.textContent='Örnek sayaç: '+(++count);},1000);
  }
}
function save(choice){
  let saved=true;
  try{localStorage.setItem(key,JSON.stringify({choice,at:Date.now()}));}
  catch{saved=false;}
  apply(choice); edit.focus();
  if(!saved) status.textContent+=' Tercih bu sayfa açıkken geçerli.';
}
document.getElementById('accept').onclick=()=>save('accepted');
document.getElementById('reject').onclick=()=>save('rejected');
edit.onclick=()=>{banner.hidden=false;document.getElementById('reject').focus();};
window.addEventListener('storage',event=>{if(event.key===key)apply(read());});
apply(read());
</script></html>

4. Üç temel denemeyi yapın

İlk açılışta sayaç çalışmamalıdır. Reddet düğmesine basıp sayfayı yenileyin; kapalı durum korunmalıdır. Tercihi değiştir üzerinden kabul edin; sayaç başlamalıdır. Sonra yeniden reddedin; sayaç durmalıdır. İki sekme açarak birindeki kararın diğerine aktarılmasını da deneyebilirsiniz. Örnekte storage olayı farklı sekmelerdeki değişiklikleri dinler. Aynı sayfada seçim yapıldığında durumu doğrudan apply günceller.

5. Gerçek analiz servisine bağlama

Gerçek sitede sayaç yerine servis başlatma ve durdurma mantığı gerekir. Analiz kodu sayfanın başında koşulsuz yükleniyorsa sonradan banner eklemek yeterli değildir. İsteğe bağlı kodun ilk yüklenmesini de izne bağlayın. Tercih geri alındığında yeni veri gönderimini durdurun; servisinizin kendi kapatma veya izin güncelleme yöntemini resmî belgesinden doğrulayın. Yalnızca script öğesini silmek, başlamış işlemleri her zaman durdurmaz.

6. Sunucu tarafını unutmayın

Kendi ölçüm API’niz varsa tarayıcıdan gönderilen izni sunucuda da değerlendirin. Arayüzde düğmenin kapalı olması, eski bir istemcinin veya başka bir kodun istek göndermesini otomatik olarak engellemez. Hangi verinin hangi koşulda kaydedildiği açık olmalıdır. Tercih çerezi kullanacaksanız yol, süre ve güvenli aktarım seçeneklerini uygulamanıza göre belirleyin. Kimlik doğrulama çerezini analiz tercihiyle aynı anahtar altında saklamayın.

7. Kullanıcıya anlaşılır bir seçim verin

Kabul ve ret seçeneklerini kolay bulunur, okunur ve klavyeyle kullanılabilir tutun. Kararı sonradan değiştirecek bağlantıyı sayfada bırakın. Bildirim metnini sitenin gerçekten yaptığı işlemlerle eşleştirin. Bu örneğin en önemli kontrolü düğmeye basıldığında yalnızca kutunun kapanması değil, isteğe bağlı davranışın da değişmesidir. Yayına almadan önce yeni ziyaret, kabul, ret, geri çekme ve süre dolması durumlarını ayrı ayrı inceleyin.

İlgili okumalar

• FFmpeg ile yatay videodan dikey video hazırlama: merkez kırpma ve kadraj kontrolü
• FFmpeg ile videodan kapak karesi çıkarma: doğru anı seçme ve kalite kontrolü

Bu uygulamayı forumda tartışın.