Apakah generator ini saja sudah membuat situs saya patuh GDPR?

Banner memberi pengunjung pilihan jelas untuk menerima atau menolak dan menyimpan preferensinya, sehingga sisi antarmuka persetujuan terpenuhi. Anda tetap perlu halaman kebijakan privasi dan harus benar-benar memblokir skrip di kategori yang ditolak.

Bagaimana memblokir Google Analytics sampai pengunjung setuju?

Ada dua cara. Yang paling mudah adalah mencentang kotak Mode Persetujuan Google v2: skrip yang dihasilkan lalu mengirim sinyal persetujuan gtag, yang awalnya ditolak dan berubah menjadi diizinkan hanya setelah pengunjung menyetujui kategori terkait. Cara lain, bungkus sendiri tag gtag dengan pemeriksaan yang membaca cookie yang disetel banner, agar skrip tidak pernah disisipkan sebelum persetujuan diberikan.

Bisakah saya mengubah teks setelah banner sudah tayang?

Bisa. Buka kembali generator dengan setelan yang mirip, buat ulang, lalu ganti string di dalam div banner. Pengunjung lama tidak akan melihat banner lagi karena nama cookie tidak berubah.

Apa beda mode opt-in dan opt-out?

Opt-in memulai semua kategori non-esensial dalam keadaan mati dan baru aktif setelah pengguna menerima. Opt-out memulainya dalam keadaan aktif, yang diizinkan CCPA tetapi tidak oleh GDPR. Jika ada pengunjung dari UE, pilih opt-in.

Apakah banner muncul setiap kali pengunjung datang?

Tidak. Saat pengunjung menyimpan pilihan, cookie bertahan selama masa berlaku yang Anda tetapkan (enam bulan secara bawaan). Banner baru muncul lagi setelah cookie kedaluwarsa, dihapus, atau ketika Anda menaikkan nomor versi persetujuan di dalam file JS.

Generator Persetujuan Cookie

Buat kode banner persetujuan cookie

Pengaturan

Gaya Banner

Teks Banner

Teks Tombol Terima

Teks Tombol Tolak

Teks Kelola Preferensi

URL kebijakan privasi

Teks tautan

Mode Persetujuan

Masa berlaku cookie

hari

WajibAnalitikPemasaranFungsional

Mode Persetujuan Google v2Menambahkan sinyal persetujuan gtag (ad_storage, analytics_storage, ad_user_data, ad_personalization) untuk Google Ads dan GA4.

Warna

Tema Siap Pakai

Latar

Teks

Teks Tombol Terima

Teks Tombol Terima Teks

Teks Tombol Tolak

Teks Tombol Tolak Teks

Pratinjau

Kami menggunakan cookie untuk meningkatkan pengalaman Anda. Dengan terus mengunjungi situs ini, Anda menyetujui penggunaan cookie kami.

Hasil

<!-- Cookie Consent Banner -->
<style>
#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1a1a2e;
  color: #ffffff;
  padding: 20px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

#cookie-consent-banner .cc-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

#cookie-consent-banner .cc-link:hover {
  opacity: 0.85;
}

#cookie-consent-banner .cc-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

#cookie-consent-banner .cc-text {
  flex: 1;
  min-width: 200px;
}

#cookie-consent-banner .cc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#cookie-consent-banner button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.2s;
}

#cookie-consent-banner button:hover {
  opacity: 0.9;
}

#cc-accept-btn {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-reject-btn {
  background: transparent;
  color: #ffffff;
}

#cc-manage-btn {
  background: transparent;
  color: #ffffff;
  text-decoration: underline;
  border: none;
  padding: 10px 12px;
}

@media (max-width: 600px) {
  #cookie-consent-banner .cc-content {
    flex-direction: column;
    text-align: center;
  }
  #cookie-consent-banner .cc-buttons {
    justify-content: center;
    width: 100%;
  }
  #cookie-consent-banner button {
    flex: 1;
    min-width: 120px;
  }
}
#cookie-consent-prefs {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#cookie-consent-prefs .cc-pref-box {
  background: #1a1a2e;
  color: #ffffff;
  width: 90%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

#cookie-consent-prefs .cc-pref-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

#cookie-consent-prefs .cc-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
}

#cookie-consent-prefs .cc-pref-info { flex: 1; }

#cookie-consent-prefs .cc-pref-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

#cookie-consent-prefs .cc-pref-desc {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}

#cookie-consent-prefs .cc-pref-always {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
  padding-top: 2px;
}

#cookie-consent-prefs .cc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

#cookie-consent-prefs .cc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#cookie-consent-prefs .cc-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(127, 127, 127, 0.5);
  border-radius: 24px;
  transition: background 0.2s;
}

#cookie-consent-prefs .cc-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

#cookie-consent-prefs input:checked + .cc-slider {
  background: #e94560;
}

#cookie-consent-prefs input:checked + .cc-slider:before {
  transform: translateX(18px);
}

#cookie-consent-prefs .cc-pref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

#cookie-consent-prefs .cc-pref-actions button {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(127, 127, 127, 0.3);
}

#cc-prefs-save {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-prefs-cancel {
  background: transparent;
  color: #ffffff;
}
</style>

<div id="cookie-consent-banner" style="display:none;">
  <div class="cc-content">
    <div class="cc-text">Kami menggunakan cookie untuk meningkatkan pengalaman Anda. Dengan terus mengunjungi situs ini, Anda menyetujui penggunaan cookie kami.</div>
    <div class="cc-buttons">
      <button id="cc-accept-btn">Terima semua</button>
      <button id="cc-reject-btn">Tolak semua</button>
      <button id="cc-manage-btn">Kelola preferensi</button>
    </div>
  </div>
</div>
<div id="cookie-consent-prefs" style="display:none;" role="dialog" aria-modal="true" aria-label="Preferensi Cookie">
  <div class="cc-pref-box">
    <h2 class="cc-pref-title">Preferensi Cookie</h2>
    <div class="cc-pref-list">
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Diperlukan</div>
          <div class="cc-pref-desc">Dibutuhkan agar situs berfungsi. Tidak dapat dimatikan.</div>
        </div>
        <span class="cc-pref-always">Selalu aktif</span>
      </div>
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Analitik</div>
          <div class="cc-pref-desc">Membantu kami memahami cara pengunjung menggunakan situs agar dapat kami tingkatkan.</div>
        </div>
        <label class="cc-switch"><input type="checkbox" data-cc-cat="analytics" aria-label="Analitik"><span class="cc-slider"></span></label>
      </div>
    </div>
    <div class="cc-pref-actions">
      <button id="cc-prefs-save">Simpan preferensi</button>
      <button id="cc-prefs-cancel">Batal</button>
    </div>
  </div>
</div>

<script>
(function() {
  var COOKIE_NAME = 'cookie_consent';
  var CATEGORIES = ["necessary","analytics"];
  var OPTIONAL_CATEGORIES = ["analytics"];
  var DEFAULT_CONSENT = false;
  var EXPIRY_DAYS = 180;

  function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
  }

  function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + '=' + encodeURIComponent(value) +
      ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
  }

  function hideBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'none';
  }

  function showBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'block';
  }

  function getPrefs() { return document.getElementById('cookie-consent-prefs'); }
  function openPrefs() {
    var p = getPrefs();
    if (!p) return;
    // Reflect the last saved choice (or the defaults) in the toggles.
    var saved = {};
    try { saved = JSON.parse(getCookie(COOKIE_NAME) || '{}'); } catch (e) {}
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p.querySelector('[data-cc-cat="' + cat + '"]');
      if (box) box.checked = (cat in saved) ? !!saved[cat] : DEFAULT_CONSENT;
    });
    p.style.display = 'flex';
  }
  function closePrefs() {
    var p = getPrefs();
    if (p) p.style.display = 'none';
  }

  // Persist a consent object and broadcast it. `necessary` is always true.
  function persist(consent) {
    consent.necessary = true;
    setCookie(COOKIE_NAME, JSON.stringify(consent), EXPIRY_DAYS);
    hideBanner();
    closePrefs();
    window.dispatchEvent(new CustomEvent('cookieConsent', { detail: consent }));
  }

  // Accept-all / reject-all set every optional category the same way.
  function saveConsent(accepted) {
    var consent = {};
    CATEGORIES.forEach(function(cat) {
      consent[cat] = cat === 'necessary' ? true : accepted;
    });
    persist(consent);
  }

  // Save exactly what the visitor toggled in the preference center.
  function savePreferences() {
    var p = getPrefs();
    var consent = { necessary: true };
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p && p.querySelector('[data-cc-cat="' + cat + '"]');
      consent[cat] = !!(box && box.checked);
    });
    persist(consent);
  }

  // Check existing consent
  var existing = getCookie(COOKIE_NAME);
  if (!existing) {
    if (DEFAULT_CONSENT) {
      // Opt-out mode: set default consent, still show banner
      var defaultCons = {};
      CATEGORIES.forEach(function(cat) { defaultCons[cat] = true; });
      setCookie(COOKIE_NAME, JSON.stringify(defaultCons), EXPIRY_DAYS);
    }
    showBanner();
  }

  document.getElementById('cc-accept-btn').addEventListener('click', function() {
    saveConsent(true);
  });

  document.getElementById('cc-reject-btn').addEventListener('click', function() {
    saveConsent(false);
  });

  document.getElementById('cc-manage-btn').addEventListener('click', openPrefs);

  var saveBtn = document.getElementById('cc-prefs-save');
  if (saveBtn) saveBtn.addEventListener('click', savePreferences);
  var cancelBtn = document.getElementById('cc-prefs-cancel');
  if (cancelBtn) cancelBtn.addEventListener('click', closePrefs);
})();
</script>

Apa itu Generator Persetujuan Cookie?

Membuat banner persetujuan cookie yang sesuai GDPR dan memberi Anda kode HTML, CSS, dan JavaScript untuk dipasang ke situs. Pilih gaya, tentukan kategori cookie, lalu atur cara penyimpanan persetujuan.

Hasilnya berupa potongan kode mandiri: HTML untuk banner, CSS untuk gaya, dan sedikit JavaScript yang menyimpan pilihan pengunjung ke cookie dan hanya memuat skrip dari kategori yang disetujui. Bisa langsung ditempelkan ke situs atau diunduh sebagai tiga file dalam zip.

Cara menggunakan

Pilih gaya banner (bilah atas, bilah bawah, modal, popup sudut) dan sesuaikan warna, teks, dan label tombol.
Konfigurasikan kategori cookie (wajib, analitik, pemasaran, fungsional), berapa lama persetujuan diingat, dan perilaku persetujuan (opt-in vs opt-out).
Salin atau unduh kode HTML/CSS/JS yang dihasilkan dan tambahkan ke situs web Anda.

Kapan menggunakan

Menambahkan pemberitahuan GDPR atau UU PDP ke situs statis atau landing pemasaran.
Mengganti CMP pihak ketiga yang memuat 200 KB sebelum pengunjung mengklik apa pun.
Membuat prototipe desain banner sebelum spesifikasi diserahkan ke tim engineering.

Hasil

Pemilik situs yang membangun blog sesuai GDPR memilih banner bilah bawah dengan tombol "Terima Semua" dan "Kelola Preferensi", mengaktifkan kategori analitik dan pemasaran, lalu mengunduh potongan kode untuk disisipkan sebelum tag penutup body.

FAQ

Apakah generator ini saja sudah membuat situs saya patuh GDPR?: Banner memberi pengunjung pilihan jelas untuk menerima atau menolak dan menyimpan preferensinya, sehingga sisi antarmuka persetujuan terpenuhi. Anda tetap perlu halaman kebijakan privasi dan harus benar-benar memblokir skrip di kategori yang ditolak.
Bagaimana memblokir Google Analytics sampai pengunjung setuju?: Ada dua cara. Yang paling mudah adalah mencentang kotak Mode Persetujuan Google v2: skrip yang dihasilkan lalu mengirim sinyal persetujuan gtag, yang awalnya ditolak dan berubah menjadi diizinkan hanya setelah pengunjung menyetujui kategori terkait. Cara lain, bungkus sendiri tag gtag dengan pemeriksaan yang membaca cookie yang disetel banner, agar skrip tidak pernah disisipkan sebelum persetujuan diberikan.
Bisakah saya mengubah teks setelah banner sudah tayang?: Bisa. Buka kembali generator dengan setelan yang mirip, buat ulang, lalu ganti string di dalam div banner. Pengunjung lama tidak akan melihat banner lagi karena nama cookie tidak berubah.
Apa beda mode opt-in dan opt-out?: Opt-in memulai semua kategori non-esensial dalam keadaan mati dan baru aktif setelah pengguna menerima. Opt-out memulainya dalam keadaan aktif, yang diizinkan CCPA tetapi tidak oleh GDPR. Jika ada pengunjung dari UE, pilih opt-in.
Apakah banner muncul setiap kali pengunjung datang?: Tidak. Saat pengunjung menyimpan pilihan, cookie bertahan selama masa berlaku yang Anda tetapkan (enam bulan secara bawaan). Banner baru muncul lagi setelah cookie kedaluwarsa, dihapus, atau ketika Anda menaikkan nomor versi persetujuan di dalam file JS.

Generator Persetujuan Cookie

Pengaturan

Warna

Pratinjau

Hasil

Apa itu Generator Persetujuan Cookie?

Cara menggunakan

Kapan menggunakan

Hasil

FAQ

Alat terkait

Generator Data Terstruktur

Halaman Web ke PDF

Generator Kebijakan Privasi

Generator Syarat Layanan

Minifikasi CSS

Minifier HTML

Generator Persetujuan Cookie

Pengaturan

Warna

Pratinjau

Hasil