Siteye JS ile Çerez Uyarısı Ekleme

Web sitenizdeki kullanıcılara çerezler ile ilgili bir uyarı göstermek istiyorsanız kullanabileceğiniz bir hazır ve açık kaynak kodlu olan Cookie Consent javascript kütüphanesini kullanımını göstereceğim.

Bu kütüphaneyi kullanarak sitenizde kullanıcılarınıza kolay bir şekilde uyarı gösterebileceksiniz. Sitenize giren kullanıcı bir kere Tamam butonuna bastıktan sonra uyarı artık ona gözükmeyecektir ve çerezler politikası sayfasına link uyarı içerisinde direk çıkacaktır.

Bu kütüphaneyi kullanmanız için bir css dosyası ve birde js dosyası mevcuttur.

CSS dosyanızı sitenizin kodlarındaki </head> etiketinden öncesine ekleyiniz.

JS dosyasını da </body> etiketinden öncesine ekleyiniz.

Sonrada kodları özelleştirdiğiniz <script></script> etiketleri arasındaki kodlar js kütüphanesi linkinden sonra olmalı eğer öncesine eklerseniz kodlar hata verecektir. (Bu fonksiyon tanımlı değil vs. diye.)

Örnek olarak aşağıdaki kod size bilgi verecektir.

<html>
<head>
<link rel="stylesheet" href="https://konudenizi.com/assets/other/cookieconsent.min.css">
</head>
<body>
<script>
window.addEventListener("load", function(){
 window.cookieconsent.initialise({
   "palette": {
     "popup": {
       "background": "#646478", // Uyarının arkaplan rengi
       "text": "#ffffff" // Uyarının üzerindeki yazı rengi
     },
     "button": {
       "background": "#8ec760", // Tamam butonunun arkaplan rengi - "transparent" kullanırsanız border özelliğini açabilirsiniz.
       //"border": "#14a7d0", // Arkaplan rengini transparent yapıp çerçeve kullanabilmek için
      "text": "#ffffff" // Tamam butonunun yazı rengi
     }
   },
   "theme": "block", // Kullanabileceğiniz temalar; block, edgeless, classic. Sitenizin görüntüsüne uygun olanı seçebilirsiniz.
   "type": "opt-out", // Gizle uyarısını aktif etmek için
   // "position": "top", // Aktif ederseniz uyarı üst kısımda görünür
   //"static": true, //Aktif ederseniz uyarı üst kısımda sabit olarak görünür
   // "position": "bottom-left", // Aktif ederseniz uyarı solda görünür.
   //"position": "bottom-right", // Aktif ederseniz uyarı sağda görünür.
   "content": {
      "message": "Sitemizden en iyi şekilde faydalanabilmeniz için çerezler kullanılmaktadır. Sitemize giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz.",
      "dismiss": "Tamam",
      "link": "Daha fazla bilgi",
      "href": "https://konudenizi.com"
    }
})});
</script>
</body>
</html>

Kodlar css ve js dosyaları konu denizi sitesinde siz oradaki dosyaları kendi sunucunuza atıp oradan çekebilirsiniz.

Örnek olarak nasıl çalıştığını görmek için konu denizi sitesine bakabilirsiniz.

Uyarıyı özelleştirme için kodların devamındaki açıklama satırlarındaki açıklamalara göre değişiklik yapabilirsiniz. Sitenizin alt yapısı fark etmeksizin html etiketlerini yukarıdaki şekilde kodları eklediğinizde uyarı sitenizde gözükmeye başlayacaktır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir