Tạo banner cookie consent: code nhúng, lưu lựa chọn và ánh xạ Consent Mode v2
Công cụ sinh một khối HTML, CSS và JavaScript thuần để gắn banner xin đồng ý cookie vào website. Bạn chọn kiểu hiển thị, ngôn ngữ, các nhóm cookie, màu sắc và thời hạn lưu lựa chọn, rồi chép nguyên khối mã dán trước thẻ đóng body. Mã sinh ra tự lưu lựa chọn vào localStorage kèm dấu thời gian và số phiên bản, đồng thời phát lệnh consent update cho bảy tín hiệu của Google Consent Mode v2.
Tính năng nổi bật
- Ba kiểu hiển thị: thanh dưới màn hình, hộp góc trái hoặc phải, hộp giữa màn có lớp phủ tối
- Hai ngôn ngữ banner là tiếng Việt và tiếng Anh, toàn bộ nhãn nút và mô tả nhóm cookie đổi theo
- Bốn nhóm cookie gồm bắt buộc, phân tích, quảng cáo và cá nhân hóa, bật tắt từng nhóm có xuất hiện trong bảng chi tiết
- Ba nút hành động Chấp nhận tất cả, Từ chối và Tùy chỉnh, bảng chi tiết mở ngay trong banner chứ không nhảy sang trang khác
- Lưu lựa chọn vào localStorage kèm dấu thời gian và số phiên bản, hết thời hạn thì banner tự hiện lại
- Sinh sẵn khối consent default và lệnh consent update cho bảy tín hiệu của Google Consent Mode v2, có ô nhập Measurement ID
- Tùy biến màu nền, màu chữ, màu nút chính, màu nút phụ và độ bo góc, có khung xem trước cập nhật tức thì
- Xuất trong một khối chép được kèm hàm CookieConsent.open để gắn vào link cài đặt cookie ở footer, hoặc tải về file html chạy thử
Vì sao nên tự sinh code thay vì cài một dịch vụ bên ngoài
Phần lớn website vừa và nhỏ ở Việt Nam gắn banner cookie bằng cách nhúng một đoạn script của dịch vụ nước ngoài. Cách đó nhanh nhưng kéo theo ba cái giá. Thứ nhất là hiệu năng: script bên thứ ba thường nặng vài chục kilobyte, tải chặn hiển thị và làm chậm chỉ số Largest Contentful Paint trên chính màn hình đầu tiên người dùng nhìn thấy. Thứ hai là quyền kiểm soát: giao diện, chữ nghĩa và cả việc dịch vụ đó gửi dữ liệu đi đâu đều nằm ngoài tay bạn, trong khi banner này lại là nơi bạn cam kết với người dùng về chuyện dữ liệu. Thứ ba là chi phí lặp lại theo tháng cho một tính năng vốn chỉ vài trăm dòng mã. Khối mã sinh ra ở đây chạy hoàn toàn trong trình duyệt, không gọi máy chủ nào, không đặt cookie của bên thứ ba, và bạn đọc được từng dòng để biết chính xác nó làm gì. Đổi lại, bạn phải tự lo phần khó hơn: chặn thẻ theo dõi trước khi có đồng ý và lưu bằng chứng đồng ý nếu hoạt động của bạn cần tới mức đó.
Lợi ích khi sử dụng
- Không thêm thư viện, không gọi máy chủ ngoài, không làm chậm lần tải trang đầu tiên
- Đọc được toàn bộ mã nên biết chính xác dữ liệu lựa chọn được lưu ở đâu và trong bao lâu
- Ánh xạ sẵn sang bảy tín hiệu Consent Mode v2 nên GA4 và Google Ads nhận đúng trạng thái đồng ý
- Có sẵn hàm mở lại bảng tùy chỉnh để đáp ứng yêu cầu rút lại đồng ý dễ như khi đưa ra đồng ý
- Số phiên bản cho phép hỏi lại toàn bộ người dùng khi bạn thay đổi mục đích thu thập dữ liệu
- Dùng lại được cho nhiều dự án vì mã là HTML, CSS và JavaScript thuần, không phụ thuộc framework
Cách tạo và gắn banner cookie consent
- 1Nhập tên website và đường dẫn trang chính sách bảo mật, đây là hai chuỗi sẽ xuất hiện trong câu mô tả của banner.
- 2Chọn kiểu hiển thị và ngôn ngữ, rồi bật tắt từng nhóm cookie theo đúng những gì website bạn thật sự đang dùng.
- 3Đặt thời hạn lưu lựa chọn tính bằng ngày, mặc định 180, và tăng số phiên bản mỗi khi bạn thay đổi danh sách nhóm cookie.
- 4Bật Google Consent Mode v2 nếu bạn dùng GA4 hoặc Google Ads, điền Measurement ID nếu muốn công cụ chèn luôn thẻ đo lường đúng thứ tự.
- 5Chỉnh màu và bo góc cho khớp giao diện, xem lại ở tab Xem trước, rồi sang tab Mã nguồn bấm chép và dán toàn bộ khối vào ngay trước thẻ đóng body.
Bốn nhóm cookie và bảy tín hiệu Consent Mode v2 ánh xạ với nhau ra sao
Cách chia nhóm cookie phổ biến trong thực tế gồm bốn loại. Nhóm bắt buộc là những cookie thiếu chúng thì trang hỏng: phiên đăng nhập, giỏ hàng, mã chống giả mạo biểu mẫu, cân bằng tải. Nhóm phân tích phục vụ đo lường lưu lượng và hành vi. Nhóm quảng cáo phục vụ đo hiệu quả chiến dịch và tiếp thị lại. Nhóm cá nhân hóa ghi nhớ tùy chọn không thiết yếu như ngôn ngữ, vùng hiển thị hay giao diện sáng tối. Google Consent Mode v2 lại không dùng bốn nhóm này mà dùng bảy tín hiệu riêng, nên phải có một bảng ánh xạ rõ ràng. Công cụ sinh mã theo quy tắc sau: nhóm quảng cáo điều khiển cùng lúc ba tín hiệu ad_storage, ad_user_data và ad_personalization, vì đây là ba mặt khác nhau của cùng một mục đích tiếp thị; nhóm phân tích điều khiển analytics_storage; nhóm cá nhân hóa điều khiển personalization_storage; còn functionality_storage và security_storage luôn ở trạng thái granted vì chúng thuộc nhóm bắt buộc. Khi bạn tắt một nhóm trong phần cấu hình, các tín hiệu tương ứng được sinh ra với giá trị cố định denied thay vì đọc lựa chọn người dùng, tức trạng thái mặc định luôn nghiêng về từ chối. Đây là điểm cần kiểm lại nếu website của bạn có mục đích thu thập khác với bốn nhóm chuẩn này, chẳng hạn cookie phục vụ khảo sát hay cá nhân hóa nội dung theo hồ sơ người dùng.
Prior blocking: phần khó nhất và cũng là phần banner không tự làm được
Nguyên tắc chung của các khung pháp lý về đồng ý là thẻ theo dõi không được chạy trước khi người dùng đồng ý. Trong thực tế, đây là chỗ hầu hết website triển khai sai. Banner hiện lên rất đẹp, nhưng mở tab Network của trình duyệt lên thì thấy pixel quảng cáo và script đo lường đã bắn đi từ mili giây đầu tiên, trước cả khi người dùng kịp đọc dòng chữ đầu tiên. Khi đó banner chỉ còn giá trị trang trí. Có ba cách xử lý. Cách thứ nhất là đừng chèn thẻ vào trang cho tới khi có đồng ý, tức tạo thẻ script bằng JavaScript sau khi người dùng bấm chấp nhận. Cách thứ hai là dùng trình quản lý thẻ và đặt điều kiện kích hoạt dựa trên sự kiện đồng ý, thay vì kích hoạt theo lượt xem trang. Cách thứ ba, dành riêng cho hệ sinh thái Google, là dùng Consent Mode: thẻ vẫn tải nhưng ở trạng thái hạn chế, không ghi cookie, chỉ gửi tín hiệu ẩn danh cho tới khi nhận lệnh update. Khối mã sinh ra ở đây làm sẵn cách thứ ba và phát một sự kiện DOM tên tp-cookie-consent để bạn nối vào cách thứ nhất hoặc thứ hai. Phần còn lại, tức việc rà soát xem còn thẻ nào đang chạy sớm, vẫn phải làm thủ công trên chính website của bạn.
Lưu lựa chọn: localStorage, dấu thời gian, số phiên bản và thời hạn hỏi lại
Mã sinh ra lưu một đối tượng JSON vào localStorage với bốn trường. Trường v là số phiên bản, trường t là dấu thời gian tính bằng mili giây lúc người dùng bấm nút, trường exp là mốc hết hạn tính sẵn cho dễ đọc, và trường c chứa trạng thái từng nhóm. Khi trang tải, đoạn mã đọc lại giá trị này và chỉ coi là hợp lệ khi ba điều kiện cùng đúng: đọc được JSON, số phiên bản khớp với phiên bản trong mã, và khoảng cách từ dấu thời gian tới hiện tại chưa vượt thời hạn. Thiếu bất kỳ điều kiện nào thì banner hiện lại. Thời hạn mặc định để 180 ngày, không phải con số bắt buộc mà là một mức thường gặp nằm giữa hai thái cực: hỏi lại quá dày gây phiền, để quá lâu thì lựa chọn không còn phản ánh ý muốn hiện tại của người dùng. Nhiều hướng dẫn thực hành ở châu Âu gợi ý mức từ sáu tháng đến một năm, bạn nên đối chiếu với yêu cầu cụ thể áp dụng cho mình. Số phiên bản là công cụ quan trọng hơn người ta tưởng: khi bạn thêm một nhóm cookie mới hoặc đổi mục đích thu thập, đồng ý cũ không còn bao trùm mục đích mới, và việc tăng số phiên bản lên một đơn vị sẽ khiến toàn bộ người dùng được hỏi lại. Cần nhớ rằng localStorage nằm trên từng trình duyệt và từng thiết bị, nên đây không phải hệ thống ghi nhận bằng chứng đồng ý ở phía máy chủ.
Ranh giới giữa công cụ này, trình tạo chính sách bảo mật và công cụ đọc chuỗi cookie
Ba công cụ này hay bị gộp làm một trong đầu người mới bắt đầu, nhưng chúng giải quyết ba việc khác hẳn nhau và thường được dùng theo thứ tự. Bước đầu tiên là biết website đang thật sự đặt những cookie gì. Công cụ đọc và phân tích chuỗi cookie giúp bạn dán chuỗi lấy từ trình duyệt vào rồi tách thành từng cặp tên và giá trị, từ đó lập được danh sách thật thay vì đoán. Bước thứ hai là viết văn bản: trình tạo chính sách bảo mật sinh ra nội dung trình bày mục đích thu thập, loại dữ liệu, thời gian lưu, bên thứ ba có liên quan và quyền của chủ thể dữ liệu. Đây là phần chữ nghĩa, đăng thành một trang riêng trên website. Bước thứ ba mới là công cụ này: sinh phần chạy được, tức giao diện banner, logic lưu lựa chọn và phần ánh xạ tín hiệu đo lường. Nói ngắn gọn, trình tạo chính sách sinh văn bản còn công cụ này sinh code. Hai thứ bổ trợ nhau chứ không thay thế nhau: banner bắt buộc phải có một link trỏ tới trang chính sách để người dùng đọc chi tiết, và ngược lại trang chính sách nên nói rõ người dùng thay đổi lựa chọn cookie ở đâu, thường là một link Cài đặt cookie ở footer gọi hàm mở lại bảng tùy chỉnh mà mã này cung cấp sẵn.
Giới hạn pháp lý: code chỉ là một mảnh của bức tranh tuân thủ
Điều cần nói thẳng là không có công cụ sinh mã nào làm cho một website tuân thủ pháp luật về bảo vệ dữ liệu cá nhân. Khối mã ở đây là khung kỹ thuật để hỏi và ghi nhớ lựa chọn của người dùng, còn việc tuân thủ nằm ở cách doanh nghiệp thực sự xử lý dữ liệu phía sau. Ít nhất bốn câu hỏi vượt ra ngoài phạm vi của banner. Một, bạn có thật sự chặn thẻ theo dõi trước khi có đồng ý không, hay banner chỉ chạy song song trong khi pixel vẫn bắn. Hai, bạn có ghi nhận bằng chứng về việc đồng ý gồm thời điểm, phạm vi và phiên bản văn bản đã hiển thị không, vì bằng chứng lưu trong localStorage của người dùng thì bạn không truy xuất được khi cần chứng minh. Ba, người dùng rút lại đồng ý có dễ như khi đưa ra đồng ý không. Bốn, bạn có bản mô tả rõ dữ liệu chuyển cho bên thứ ba nào và chuyển ra nước ngoài hay không. Tại Việt Nam, khung pháp lý hiện hành là Luật Bảo vệ dữ liệu cá nhân 2025, thông qua ngày 26/06/2025 và có hiệu lực từ 01/01/2026, cùng Nghị định 356/2025/NĐ-CP hướng dẫn thi hành. Hai văn bản này thay thế Nghị định 13/2023/NĐ-CP vốn đã hết hiệu lực từ 01/01/2026. Luật mới siết chặt tiêu chí thế nào là đồng ý hợp lệ, yêu cầu sự đồng ý phải rõ ràng, chủ động, không kèm điều kiện và gắn với mục đích cụ thể, đồng thời mở rộng phạm vi điều chỉnh so với nghị định cũ. Lĩnh vực này thay đổi nhanh nên trước khi triển khai bạn vẫn phải tự kiểm tra văn bản nào đang có hiệu lực. Công cụ này không phải tư vấn pháp lý và không thay thế được ý kiến của người có chuyên môn.
Những chi tiết kỹ thuật hay bị bỏ sót khi tự dựng banner
Có vài điểm nhỏ nhưng gây lỗi thật khi triển khai. Thứ nhất là thứ tự script: khối consent default phải nằm trước mọi thẻ đo lường, kể cả trước đoạn nhúng trình quản lý thẻ, nếu không thì thẻ đã kịp chạy ở trạng thái mặc định do Google quy định chứ không phải trạng thái bạn muốn. Thứ hai là z-index: banner cần chỉ số chồng lớp đủ cao để không bị header dính hay nút chat che mất, mã sinh ra dùng mức rất cao và bạn chỉ nên hạ xuống khi có lý do rõ ràng. Thứ ba là khả năng tiếp cận: khối này đặt role dialog, gắn nhãn mô tả cho hộp thoại, dùng thẻ button thật thay vì thẻ div bấm được, có viền tiêu điểm khi điều hướng bằng bàn phím, và trả tiêu điểm về phần tử cũ sau khi đóng. Với kiểu hộp giữa màn, phím Escape chỉ đóng banner khi trình duyệt đã có lựa chọn hợp lệ, tránh việc bấm nhầm bị hiểu thành đã trả lời. Thứ tư là chuỗi do người dùng nhập: tên website, đường dẫn chính sách và mã màu đều được lọc trước khi ghép vào mã, đường dẫn chỉ nhận dạng bắt đầu bằng dấu gạch chéo hoặc giao thức http và https, mã màu chỉ nhận dạng hex, giá trị sai bị bỏ qua thay vì chèn thẳng. Thứ năm là chế độ riêng tư của trình duyệt: khi localStorage bị chặn, các thao tác đọc ghi được bọc trong khối try nên trang không vỡ, đổi lại banner sẽ hiện lại ở mỗi lần tải.
Câu hỏi thường gặp (FAQ)
Dán khối mã này vào đâu trên website?
Dán toàn bộ khối vào ngay trước thẻ đóng body của mọi trang. Riêng phần khai báo consent default phải nằm càng sớm càng tốt trong head và luôn đứng trước thẻ GA4, Google Ads hay trình quản lý thẻ. Nếu bạn dùng một hệ quản trị nội dung, chỗ thích hợp thường là ô chèn mã tùy chỉnh trong phần cài đặt giao diện.
Gắn banner này thì website đã tuân thủ Luật Bảo vệ dữ liệu cá nhân chưa?
Chưa. Banner chỉ là khung kỹ thuật để hỏi và lưu lựa chọn. Tuân thủ còn phụ thuộc việc bạn có thật sự chặn thẻ theo dõi trước khi có đồng ý, có ghi nhận bằng chứng đồng ý không, có cơ chế rút lại đồng ý không, và có hồ sơ mô tả hoạt động xử lý dữ liệu không. Hãy đối chiếu quy định đang có hiệu lực và hỏi người có chuyên môn pháp lý, công cụ này không phải tư vấn pháp lý.
Mã sinh ra có tự chặn Google Analytics trước khi người dùng đồng ý không?
Không chặn theo nghĩa gỡ thẻ ra khỏi trang. Nó dùng Consent Mode: thẻ vẫn tải nhưng ở trạng thái hạn chế, không ghi cookie đo lường cho tới khi nhận lệnh consent update. Nếu bạn muốn chặn triệt để, hãy nghe sự kiện DOM tên tp-cookie-consent mà mã phát ra rồi mới chèn thẻ script vào trang.
Lựa chọn của người dùng được lưu ở đâu và trong bao lâu?
Lưu trong localStorage của chính trình duyệt người dùng, dưới một khóa do bạn đặt tên, gồm số phiên bản, dấu thời gian, mốc hết hạn và trạng thái từng nhóm. Thời hạn mặc định là 180 ngày và bạn đổi được. Hết hạn thì bản ghi bị coi là không hợp lệ và banner hiện lại.
Vì sao dùng localStorage mà không dùng cookie để lưu lựa chọn?
Vì localStorage không được gửi kèm mọi yêu cầu HTTP nên nhẹ hơn, và nó đủ cho một giá trị chỉ đọc phía trình duyệt. Nếu máy chủ của bạn cần biết trạng thái đồng ý ngay từ lúc dựng trang, chẳng hạn để quyết định có nhúng thẻ hay không, thì bạn nên đổi sang cookie hoặc ghi thêm một cookie song song, khi đó phải sửa mã.
Số phiên bản dùng để làm gì và khi nào nên tăng?
Nó khiến toàn bộ lựa chọn cũ trở nên không hợp lệ và banner hỏi lại tất cả người dùng. Hãy tăng lên một đơn vị mỗi khi bạn thêm nhóm cookie mới, đổi mục đích thu thập, hoặc thêm một bên thứ ba mới, vì đồng ý cũ không bao trùm được mục đích mới.
Bảy tín hiệu của Consent Mode v2 ánh xạ với bốn nhóm cookie thế nào?
Nhóm quảng cáo điều khiển ba tín hiệu ad_storage, ad_user_data và ad_personalization. Nhóm phân tích điều khiển analytics_storage. Nhóm cá nhân hóa điều khiển personalization_storage. Hai tín hiệu functionality_storage và security_storage luôn ở trạng thái granted vì thuộc nhóm bắt buộc.
Tôi tắt nhóm quảng cáo trong phần cấu hình thì tín hiệu quảng cáo ra sao?
Ba tín hiệu quảng cáo được sinh ra với giá trị cố định là denied thay vì đọc lựa chọn của người dùng, vì nhóm đó không xuất hiện trong banner nên người dùng chưa từng đồng ý. Đây là hướng an toàn, nếu website bạn có chạy quảng cáo thì đừng tắt nhóm này.
Làm sao để người dùng mở lại bảng tùy chỉnh sau khi đã chọn?
Mã sinh ra tạo đối tượng CookieConsent trên window với hàm open. Bạn thêm một link Cài đặt cookie ở footer và gắn onclick gọi CookieConsent.open rồi trả về false. Ngoài open còn có acceptAll, rejectAll, get để đọc trạng thái hiện tại và reset để xóa hẳn bản ghi.
Nút Từ chối có bắt buộc phải nằm ngang hàng với nút Chấp nhận không?
Nhiều cơ quan quản lý ở châu Âu đã xử phạt các trường hợp giấu nút từ chối vào lớp thứ hai hoặc làm nó mờ nhạt hơn hẳn nút chấp nhận, vì như vậy lựa chọn không còn tự do. Mã sinh ra để hai nút cùng một hàng và cùng cỡ chữ. Bạn đổi được màu nhưng nên giữ hai nút ở mức dễ thấy như nhau.
Banner có làm chậm website không?
Rất ít. Toàn bộ là HTML, CSS và JavaScript thuần nằm ngay trong trang, không tải thư viện ngoài, không gọi máy chủ nào và không có phần tử ảnh. Khối mã thường chỉ vài kilobyte, nhỏ hơn nhiều so với các script dịch vụ bên thứ ba.
Có dùng được cho website Next.js hay React không?
Được, nhưng nên chuyển thể thay vì dán thô. Với Next.js, cách gọn là đưa phần script vào component Script với chiến lược phù hợp và đưa phần markup vào layout. Nếu dán nguyên khối vào một component React, hãy nhớ React không chạy thẻ script chèn qua chuỗi HTML.
Chuỗi tôi nhập như tên website có bị chèn thẳng vào mã không?
Không. Tên website được lọc các ký tự đặc biệt của HTML trước khi ghép vào markup, đường dẫn chính sách chỉ được chấp nhận khi bắt đầu bằng dấu gạch chéo hoặc giao thức http và https, mã màu chỉ nhận dạng hex, Measurement ID chỉ nhận các tiền tố hợp lệ. Giá trị sai bị bỏ qua thay vì đưa vào mã.
Banner này có ghi lại bằng chứng đồng ý để trình khi bị kiểm tra không?
Không. Bản ghi nằm trong localStorage trên máy người dùng, bạn không đọc được từ phía mình và người dùng xóa lúc nào cũng được. Nếu hoạt động của bạn cần lưu bằng chứng đồng ý, hãy gửi thêm một bản ghi về máy chủ gồm thời điểm, phạm vi đồng ý và phiên bản văn bản đã hiển thị, phần này phải tự phát triển.
Người dùng chặn localStorage thì chuyện gì xảy ra?
Các thao tác đọc và ghi được bọc trong khối try nên trang không lỗi. Hệ quả là không lưu được lựa chọn, banner sẽ hiện lại ở mỗi lần tải trang, và tín hiệu Consent Mode giữ ở trạng thái mặc định cho tới khi người dùng bấm nút trong phiên đó.
Nên đặt thời hạn lưu lựa chọn bao nhiêu ngày là hợp lý?
Mặc định 180 ngày là mức trung dung thường gặp. Hỏi lại quá dày gây khó chịu và làm giảm tỷ lệ đồng ý, để quá lâu thì lựa chọn không còn phản ánh ý muốn hiện tại. Một số hướng dẫn thực hành gợi ý khoảng sáu tháng đến một năm, bạn nên đối chiếu yêu cầu cụ thể áp dụng cho lĩnh vực của mình.
Từ khóa liên quan
- cookie consent generator
- tạo banner cookie consent
- banner xin đồng ý cookie
- cookie banner html css js
- code banner cookie miễn phí
- google consent mode v2
- gtag consent default update
- ad_storage analytics_storage là gì
- ad_user_data ad_personalization
- chặn thẻ theo dõi trước khi đồng ý
- prior blocking cookie
- nhóm cookie bắt buộc phân tích quảng cáo
- lưu lựa chọn cookie localStorage
- thời hạn lưu đồng ý cookie
- luật bảo vệ dữ liệu cá nhân cookie
- gdpr cookie consent việt nam
- rút lại đồng ý cookie
- link cài đặt cookie footer
- cookie consent cho next js
- banner cookie không dùng thư viện
- thông báo cookie tiếng việt
- cookie consent banner tùy biến màu
