Çerez (Cookie) Onayı Nasıl Yapılır? Çerez Bildirimi Nasıl Yapılır?

Cookie onayı nasıl yapılır?

Çerez onayı, AB’nin Genel Veri Koruma Yönetmeliğinin temel taşlarından biridir. Web sitelerinin, kullanıcılarından kişisel verilerin yasal olarak işlenmesini sağlama yolu budur.

Çerez (Cookie) Nedir?

Ziyaret edilen web siteleri, tarayıcınızda küçük bilgiler saklarlar. Bunun nedeni siteye giren kullanıcıdan ufak veriler toplayıp, daha sonra tekrar siteye giren kullanıcıya o bilgilerle özel içerikler gösterir.

Çerezler genellikle internette gezinti deneyiminizi iyileştirmeye ve siteleri kişiselleştirmeye yarar. Örneğin bir siteye giriş yaparken “beni hatırla” seçeneğini işaretlerseniz o site, kullanıcı adınızı (veya özel bir kimlik numarasını) içeren bir çerezi tarayıcınıza kaydeder.

Daha detaylı bilgiye buradan ulaşabilirsiniz.

Çerez yani cookie bildirimini sitemize nasıl koyabiliriz?

Bunun için bir tasarıma ve javascript diline ihtiyacımız olacak. Tasarımı ayarladıktan sonra kabul et butonuna tıkladığımız zaman javascript aracılığıyla bir Cookie oluşturacağız ve belirleyeceğimiz bir süre boyunca o Cookie’yi saklayacağız.

Cookie saklandığı sürece web sitesindeki Cookie tasarım kısmını göstermeyeceğiz. Eğer cookie’nin süresi biterse tasarım kısmı tekrar sitede aktif olacaktır. Öncelikle tasarımımızı oluşturalım.

1- Tasarımımızı Oluşturalım

<div id="cookie">
  <span>GÖRÜNTÜLEME DENEYİMİNİZİ GELİŞTİRMEK İÇİN ÇEREZLERİ KULLANIYORUZ. SİTEMİZE GÖZ ATMAYA DEVAM EDEREK ÇEREZ POLİTİKAMIZI KABUL ETMİŞ OLURSUNUZ.</span>
  <div class="btn btn-success" id="accept-btn">Kabul Et</label></div>
</div>
#cookie {
  /*Bu kısım cookie bar'ını en alt kısma sabitler*/
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /*Bu kısım cookie bar'ını en alt kısma sabitler*/
  display: block;
  margin: 0;
  padding: 0;
  color: white;
  background-color: rgba(0,0,0,.8);
  text-align: center;
  z-index: 1222;
  line-height: 14px;
}
#cookie .btn{
	padding: 10px 15px;
}
#cookie > * {
  margin: 0.5em;
}
#cookie span{
	font-size: 10px;
}
/* .btn class'ı normalde bootstrap class'ıdır. Eğer projenizde bootstrap kullanıyorsanız bunu eklemenize gerek yoktur.*/
.btn {
    color: #FFF;
    background: #4c86e5;
    border: 0;
    font-size: 13px;
    letter-spacing: normal;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    border-radius: 0;
    text-shadow: none;
    -webkit-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: inline-block;
}

Bu şekilde basit bir görüntü oluşturalım. Bu tasarımın çıktısı aşağıdaki gibidir. Siz span tag’i içerisine istediğinizi yazabilirsiniz.

Cookie Onayı nasıl yapılır?

2- Javascript ile gerekli kontrollerimizi yapalım

Bu kısımda yapacağımız şey kabul et butonuna tıkladığımız zaman tıkladığımız #cookie div’ini gizlemek ve javascriptte bir cookie oluşturup belirli bir süre (5 dakika, 10 dakika, 1 saat vs.) tekrar gözükmesini engellemek.

$(document).ready(function(){

  /* bu fonksiyonumuza 3 değer gönderiyoruz ve bu fonksiyon bizim için bir cookie oluşturuyor. */
    function createCookie(name,value,minutes) {
        if (minutes) {
            var date = new Date();
            date.setTime(date.getTime()+(minutes*60*1000));
            var expires = "; expires="+date.toGMTString();
        } else {
            var expires = "";
        }
        document.cookie = name+"="+value+expires+"; path=/";
    }
	/* bu fonksiyonumuz Cookie var mı yok mu kontrol ediyor */
    function getCookie(c_name) {
        var c_value = document.cookie,
            c_start = c_value.indexOf(" " + c_name + "=");
        if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
        if (c_start == -1) {
            c_value = null;
        } else {
            c_start = c_value.indexOf("=", c_start) + 1;
            var c_end = c_value.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = c_value.length;
            }
            c_value = unescape(c_value.substring(c_start, c_end));
        }
        return c_value;
    }
	/* cookie adında bir cookie var mı diye sorgulayıp cookie değişkenine sonucu aktarıyoruz. true / false */
    var cookie = getCookie("cookie");
    if (cookie) {
        $("#cookie").remove(); // eğer böyle bir cookie varsa sayfadan cookie barı kaldırıyoruz.
    }
    
	/* kabul et butonuna basıldığında cookie barı kaldırıyoruz ve 5 dakika sonra sıfırlanacak cookie adında bir cookie oluşturuyoruz */
    $("#accept-btn").on("click", function(){
        $("#cookie").hide("400");
        createCookie("cookie", 1, 5);
    });

});

İşte işlem bu kadar. Kafanıza takılan bir soru olursa yorum yaparak veya [email protected] mail adresiyle bizimle iletişime geçebilirsiniz.

Bu yazımızda Çerez (Cookie) onayı yapmayı öğrendik. Tabii ki bu sistemi geliştirmek sizin elinizde. Dilediğiniz gibi animasyonlar, özellikler ekleyebilirsiniz.

Bu yazımıza da bakmak isteyebilirsiniz.

PHP, MySQL ve AJAX ile dinamik arama nasıl yapılır?