Banner Persetujuan Cookie dan Halaman Kebijakan Privasi Website

Pengertian

Banner persetujuan cookie adalah pemberitahuan yang muncul saat pengunjung pertama kali membuka situs, memberi tahu bahwa situs memakai penyimpanan lokal atau cookie, sekaligus meminta izin untuk hal yang tidak bersifat esensial (mis. analitik). Halaman kebijakan privasi menjelaskan data apa yang dikumpulkan, mengapa, dan hak pengguna.

Untuk website statis, pendekatan paling sederhana: simpan pilihan pengguna di localStorage, dan muat skrip non-esensial (analitik) hanya setelah pengguna menyetujui.

Basis aturan yang umum dirujuk:

• GDPR (Uni Eropa) — persetujuan harus bebas, spesifik, dan dapat ditarik kembali.
• UU PDP (Indonesia) — data pribadi wajib dilindungi dan pengguna berhak mengetahui pemakaiannya.
• ePrivacy — cookie non-esensial butuh persetujuan sebelum dipasang.

Kelebihan

• Transparan: pengguna tahu apa yang disimpan dan mengapa.
• Kepatuhan: sejalan dengan GDPR/UU PDP untuk pemrosesan dasar.
• Ringan: implementasi localStorage tanpa backend.
• Terukur: pilihan pengguna tercatat dan bisa diterapkan ke analitik.

Kekurangan

• Tanpa backend, tidak ada audit server: bukti persetujuan hanya tersimpan di perangkat.
• Bisa mengganggu UX bila banner dirancang buruk atau muncul berulang.
• Perlu perawatan konten: kebijakan privasi harus diperbarui saat praktik berubah.
• Tidak otomatis memblokir pihak ketiga: skrip harus digating manual.
• Bukan nasihat hukum: untuk kebutuhan korporat, konsultasikan dengan ahli.

Catatan penting: Jangan memuat skrip analitik atau pelacak pihak ketiga sebelum pengguna menyetujui. Memasang pelacak lebih dulu lalu "meminta izin" melanggar prinsip persetujuan.

Struktur Data Persetujuan

Simpan satu kunci localStorage, misalnya tw-cookie-consent, berisi pilihan kategori:

const CONSENT_KEY = 'tw-cookie-consent';

function getConsent() {
  try { return JSON.parse(localStorage.getItem(CONSENT_KEY) || 'null'); }
  catch (_) { return null; }
}

function setConsent(value) {
  const data = { ...value, ts: new Date().toISOString() };
  localStorage.setItem(CONSENT_KEY, JSON.stringify(data));
  return data;
}

Banner Persetujuan

<div class="cookie-banner" id="cookieBanner" role="dialog" aria-live="polite" hidden>
  <p>
    Kami memakai penyimpanan lokal untuk tema dan, bila Anda setuju, untuk analitik.
    Lihat <a href="/kebijakan-privasi.html">Kebijakan Privasi</a>.
  </p>
  <div class="cookie-actions">
    <button type="button" data-consent="accept">Terima</button>
    <button type="button" data-consent="reject">Tolak</button>
  </div>
</div>

const banner = document.getElementById('cookieBanner');
const consent = getConsent();

if (!consent) banner.hidden = false;

banner.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-consent]');
  if (!btn) return;

  const analytics = btn.dataset.consent === 'accept';
  const saved = setConsent({ essential: true, analytics });

  banner.hidden = true;
  if (saved.analytics) loadAnalytics();
});

function loadAnalytics() {
  if (document.getElementById('analytics-js')) return;
  const s = document.createElement('script');
  s.id = 'analytics-js';
  s.src = '/analytics.js';
  s.defer = true;
  document.head.appendChild(s);
}

Menyediakan Tombol Pengaturan Ulang

Pengguna harus bisa mengubah pilihan kapan saja. Sediakan tautan di footer:

document.querySelectorAll('[data-cookie-reopen]').forEach((el) => {
  el.addEventListener('click', (e) => {
    e.preventDefault();
    banner.hidden = false;
  });
});

Tawarkan juga opsi ubah preferensi per kategori agar persetujuan granular.

Kategori Penyimpanan

Menulis Kebijakan Privasi

Halaman kebijakan-privasi.html sebaiknya memuat:

1. Identitas pengelola dan kontak.
2. Jenis data yang dikumpulkan (mis. preferensi tema, statistik anonim).
3. Tujuan pemakaian data.
4. Dasar hukum (persetujuan, kepentingan sah).
5. Penyimpanan lokal/cookie yang dipakai beserta masa berlakunya.
6. Berbagi data dengan pihak ketiga (bila ada).
7. Hak pengguna: akses, koreksi, penghapusan, penarikan persetujuan.
8. Tanggal pembaruan kebijakan.

Contoh Isi Ringkas

<main class="container">
  <h1>Kebijakan Privasi</h1>
  <p>Terakhir diperbarui: 19 September 2026</p>

  <h2>Data yang Kami Simpan</h2>
  <p>Situs ini menyimpan preferensi tema di perangkat Anda. Statistik kunjungan
     hanya diaktifkan setelah Anda memberi persetujuan.</p>

  <h2>Penyimpanan Lokal</h2>
  <ul>
    <li><code>tw-theme</code> — preferensi tema terang/gelap (esensial).</li>
    <li><code>tw-cookie-consent</code> — mencatat pilihan Anda (esensial).</li>
  </ul>

  <h2>Hak Anda</h2>
  <p>Anda dapat menarik persetujuan kapan saja melalui tautan "Cookie" di footer.</p>
</main>

Aksesibilitas dan Etika

• Banner harus bisa dioperasikan dengan keyboard dan terbaca pembaca layar (role="dialog").
• Jangan menutupi konten utama tanpa cara menutup.
• Perbedaan tombol "Terima" dan "Tolak" jangan dibuat menyesatkan (no dark patterns).
• Jangan memasang cookie non-esensial sebelum persetujuan diberikan.

Troubleshooting

• Banner muncul setiap kali membuka: periksa nama kunci localStorage konsisten antara penulis dan pembaca, serta pastikan bukan di mode penyamaran.
• Banner tidak muncul padahal seharusnya: mungkin kunci sudah tersimpan dari sesi sebelumnya. Hapus tw-cookie-consent lalu muat ulang.
• Analitik tetap jalan setelah menolak: pastikan skrip hanya dimuat di dalam loadAnalytics() yang dipanggil saat menyetujui.
• Pilihan hilang setelah ganti domain: localStorage terikat pada origin; subdomain berbeda dianggap situs berbeda.
• Banner bergeser (CLS): sediakan ruang atau tampilkan sebagai elemen tetap di bawah agar tidak menggeser tata letak.
• Pengguna menarik persetujuan tapi skrip tetap ada: saat menarik, hapus skrip analitik dari DOM, bukan hanya menutup banner.

Kesimpulan

Banner persetujuan cookie dan kebijakan privasi bukan sekadar formalitas. Untuk website statis, pola localStorage plus pemuatan skrip secara kondisional sudah memberi kepatuhan dasar: pengguna tahu apa yang disimpan, bisa menerima atau menolak, dan dapat mengubah pilihan kapan saja.