Cookie Consent Banner Đúng Luật: 5 Bước Cài Cho WordPress & Code

Cookie consent banner là lớp bảo vệ pháp lý đầu tiên và dễ triển khai nhất theo Luật Bảo vệ Dữ liệu Cá nhân 91/2025/QH15. Bài viết này hướng dẫn cài đặt đúng chuẩn trong 5 bước, có code mẫu cho cả WordPress, HTML/JavaScript thuần, và React — làm xong trong khoảng 15 phút.

📌 Trả lời nhanh: Cookie consent banner hợp lệ phải: (1) hiển thị trước khi bất kỳ cookie không thiết yếu nào được set, (2) cho phép từ chối dễ như đồng ý (không thiết lập mặc định là “đồng ý”), (3) nêu rõ mục đích sử dụng dữ liệu, và (4) lưu lại lựa chọn của người dùng để không hỏi lại liên tục. Thiếu 1 trong 4 điều kiện này, banner vẫn bị coi là chưa hợp lệ dù đã có “hình thức” banner.

Vì sao nhiều website đã có banner nhưng vẫn chưa hợp lệ?

Đây là lỗi phổ biến nhất Sunteco phát hiện khi rà soát website khách hàng: có banner nhưng cookie đã bị set từ trước khi người dùng bấm nút. Nghị định 356/2025/NĐ-CP quy định các bên kiểm soát dữ liệu cá nhân không được thiết lập phương thức mặc định đồng ý hoặc tạo chỉ dẫn không rõ ràng gây nhầm lẫn giữa đồng ý và không đồng ý. Nói cách khác — banner chỉ mang tính hình thức, còn Google Analytics/Facebook Pixel vẫn chạy ngầm phía sau, là vi phạm thực chất dù trông “có vẻ tuân thủ”.

5 bước cài đặt cookie consent banner đúng chuẩn

5 buoc cai dat cookie consent 01 sunteco

Bước 1 — Kiểm kê toàn bộ cookie/script đang chạy trên website

Trước khi cài banner, cần biết chính xác website đang set những cookie gì. Mở Developer Tools (F12) → tab Application → Cookies, load lại trang và ghi lại toàn bộ cookie xuất hiện. Phân loại theo 3 nhóm:

Loại cookie	Ví dụ	Cần consent?
Thiết yếu (essential)	Session ID, giỏ hàng, đăng nhập	Không cần hỏi, nhưng nên nêu trong chính sách
Phân tích (analytics)	Google Analytics, Hotjar	Cần consent trước khi chạy
Marketing/Quảng cáo	Facebook Pixel, Google Ads remarketing	Cần consent trước khi chạy

Bước 2 — Chặn script phân tích/marketing chạy trước khi có consent

chan script truoc khi co consent 01 sunteco

Đây là bước kỹ thuật quan trọng nhất, thường bị bỏ qua. Script GA/Pixel phải được load ở dạng “chờ lệnh” (deferred), chỉ thực thi sau khi người dùng bấm “Đồng ý”.

Với HTML/JavaScript thuần — dùng kỹ thuật chặn script bằng type="text/plain" và kích hoạt lại sau khi có consent:

html

<!-- Script bị "khóa" — trình duyệt sẽ KHÔNG chạy vì type sai -->
<script type="text/plain" data-consent="analytics" data-src="https://www.googletagmanager.com/gtag/js?id=GA_ID"></script>

<script>
function activateConsentedScripts(category) {
  document.querySelectorAll(`script[data-consent="${category}"]`).forEach(oldScript => {
    const newScript = document.createElement('script');
    newScript.src = oldScript.getAttribute('data-src');
    newScript.async = true;
    oldScript.replaceWith(newScript);
  });
}

// Gọi hàm này khi người dùng bấm "Đồng ý" ở banner
// activateConsentedScripts('analytics');
</script>

Với WordPress — dùng hook wp_enqueue_scripts kết hợp điều kiện đọc cookie consent, hoặc đơn giản hơn là dùng plugin CMP (Consent Management Platform) hỗ trợ tự động “Script Blocking” mà không cần sửa code:

php

// functions.php - Chỉ enqueue GA khi đã có consent (đọc từ cookie riêng)
function sunteco_enqueue_ga_conditional() {
    if ( isset( $_COOKIE['cookie_consent_analytics'] ) && $_COOKIE['cookie_consent_analytics'] === 'granted' ) {
        wp_enqueue_script( 'google-analytics', 'https://www.googletagmanager.com/gtag/js?id=GA_ID', array(), null, true );
    }
}
add_action( 'wp_enqueue_scripts', 'sunteco_enqueue_ga_conditional' );

Với React/Next.js — dùng conditional rendering kết hợp state consent:

jsx

import { useState, useEffect } from 'react';

function AnalyticsLoader({ consentGranted }) {
  useEffect(() => {
    if (!consentGranted) return;
    const script = document.createElement('script');
    script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_ID';
    script.async = true;
    document.head.appendChild(script);
  }, [consentGranted]);

  return null;
}

Bước 3 — Thiết kế banner với lựa chọn từ chối dễ như đồng ý

Yêu cầu bắt buộc: nút “Từ chối” phải rõ ràng, cùng cấp độ hiển thị với nút “Đồng ý” — không được ẩn trong “Cài đặt nâng cao” hay làm mờ/nhỏ hơn.

html

<div id="cookie-consent-banner" style="position:fixed; bottom:0; ...">
  <p>Website sử dụng cookie để phân tích lưu lượng và cải thiện trải nghiệm.</p>
  <button id="btn-accept">Đồng ý</button>
  <button id="btn-reject">Từ chối</button>
  <a href="/chinh-sach-bao-mat">Xem chi tiết</a>
</div>

javascript

document.getElementById('btn-accept').addEventListener('click', () => {
  document.cookie = "cookie_consent_analytics=granted; max-age=31536000; path=/";
  activateConsentedScripts('analytics');
  document.getElementById('cookie-consent-banner').style.display = 'none';
});

document.getElementById('btn-reject').addEventListener('click', () => {
  document.cookie = "cookie_consent_analytics=denied; max-age=31536000; path=/";
  document.getElementById('cookie-consent-banner').style.display = 'none';
});

Bước 4 — Lưu lựa chọn và không hỏi lại liên tục

Lưu lựa chọn vào cookie/localStorage với thời hạn hợp lý (thường 6-12 tháng), kèm cơ chế cho phép người dùng thay đổi lựa chọn bất kỳ lúc nào — thường đặt 1 link nhỏ “Cài đặt cookie” ở footer, không chỉ hỏi 1 lần duy nhất khi vào trang.

Bước 5 — Kiểm tra lại bằng chính công cụ Developer Tools

Xoá toàn bộ cookie, tải lại trang ở tab ẩn danh, xác nhận: banner hiện ra → chưa có cookie GA/Pixel nào trong tab Application → bấm “Từ chối” → tải lại trang → vẫn không có cookie phân tích nào xuất hiện. Nếu qua được bài test này, banner đã tuân thủ đúng yêu cầu kỹ thuật.

Nhanh nhất: dùng công cụ có sẵn thay vì tự code

Nếu không có đội dev riêng để làm 5 bước trên, các nền tảng Consent Management Platform (CMP) như CookieYes, Termly, Iubenda, hoặc giải pháp Website Compliance của Sunteco đều tự động hoá toàn bộ quy trình chặn script + hiển thị banner + lưu lựa chọn, cài đặt bằng 1 đoạn script duy nhất, không cần sửa code từng trang.

Câu hỏi thường gặp

Cookie consent banner có bắt buộc với mọi website không? Có, nếu website đặt bất kỳ cookie không thiết yếu nào (phân tích, marketing, remarketing) cho người dùng tại Việt Nam. Cookie thiết yếu (giữ session đăng nhập, giỏ hàng) không cần consent nhưng vẫn nên công khai trong chính sách bảo mật.

Có cần banner nếu website chỉ dùng Google Analytics, không bán hàng? Có. Google Analytics thuộc nhóm cookie phân tích, luôn cần consent trước khi chạy, bất kể website có bán hàng hay không.

Plugin cookie consent có sẵn trên WordPress dùng được không? Được, miễn là plugin đó có tính năng “Script Blocking” thực sự (chặn script chạy trước khi có đồng ý), không chỉ hiển thị banner mà vẫn để script chạy ngầm phía sau — đây là lỗi phổ biến nhất của các plugin miễn phí đời cũ.

Nút “Từ chối” có bắt buộc phải cùng màu/kích thước với nút “Đồng ý” không? Luật không quy định cụ thể màu/kích thước, nhưng yêu cầu không được “gây hiểu lầm giữa đồng ý và không đồng ý” — trong thực hành tốt nhất, hai nút nên có mức độ nổi bật tương đương, tránh làm nút từ chối quá nhỏ/mờ để “ép” người dùng bấm đồng ý.

Sau khi cài banner, có cần làm gì thêm để tuân thủ luật không? Cookie consent chỉ là 1 phần. Doanh nghiệp còn cần Chính sách Bảo mật đầy đủ, quy trình xử lý yêu cầu xoá/sửa dữ liệu (DSAR), và rà soát các điểm thu thập dữ liệu khác ngoài cookie (form, camera, lưu trữ nội bộ). Xem Checklist 15 điểm tuân thủ đầy đủ để rà soát toàn diện.