Tạo banner đồng ý cookie — Banner GDPR với Google Consent Mode v2

Thêm banner đồng ý cookie vào bất kỳ website nào — Webflow, WordPress, Shopify hay HTML thuần — mà không cần plugin trả phí. Chọn bố cục, nội dung, màu sắc và nhóm cookie, rồi lấy một đoạn mã nhẹ với các nút Chấp nhận tất cả, Từ chối tất cả và Cài đặt. Banner ghi nhớ lựa chọn, cho phép khách truy cập thay đổi sau này, và gửi đúng tín hiệu tới Google Consent Mode v2 cho Analytics và Ads.

Cập nhật

Xem trước

1. Trong <head>, trước thẻ Google

2. Trước </body> — banner

3. Chặn các thẻ khác cho đến khi đồng ý

Dán các thẻ theo dõi bạn đang dùng — Google Analytics, Meta Pixel, Hotjar, LinkedIn, TikTok, widget chat, nhúng YouTube… Mỗi thẻ sẽ được xếp vào một nhóm mà bạn có thể đổi. Thẻ cần thiết chạy bình thường (danh sách cho phép của bạn); tất cả các thẻ khác bị chặn cho đến khi khách chấp nhận nhóm của chúng.

Thẻ đã chuyển đổi — dùng các thẻ này thay cho thẻ gốc

Trong Webflow, thêm phần tử Embed (hoặc Site settings → Custom code) và dán mã; trong WordPress, dùng khối Custom HTML. Gắn mục “Cài đặt cookie” ở footer trỏ tới #cookie-settings để khách có thể thay đổi lựa chọn.

Dữ liệu của bạn không bao giờ rời khỏi máy tính. Mọi xử lý diễn ra 100% cục bộ trong trình duyệt của bạn.

Công cụ này có hữu ích không?0.0 0 lượt đánh giá
Xem mọi tag theo dõi trên websiteGoogle Analytics 4, Tag Manager, Google Ads, Meta Pixel, LinkedIn, TikTok, Hotjar, công cụ consent và thẻ Search Console.Kiểm tra Tag & Pixel →

Cách dùng Tạo banner cookie

  1. Chọn bố cục — thanh ngang, hộp ở góc hoặc hộp thoại giữa màn hình — rồi chỉnh tiêu đề, nội dung và nhãn nút.
  2. Giữ Cài đặt bật để khách truy cập chọn nhóm cookie (phân tích, tiếp thị, tùy chọn), và thêm liên kết tới chính sách quyền riêng tư của bạn.
  3. Giữ Google Consent Mode v2 bật nếu bạn dùng Google Analytics hoặc Ads: dán đoạn 1 vào <head> trước thẻ Google.
  4. Dán đoạn 2 trước </body>, và thêm liên kết “Cài đặt cookie” trỏ tới #cookie-settings trong footer.

Banner này làm gì

  • Hiển thị ở lần truy cập đầu tiên và lưu lựa chọn của khách trong localStorage (không phải cookie) trong số ngày bạn đã đặt.
  • Chấp nhận tất cả, Từ chối tất cả và Cài đặt — từ chối chỉ mất một cú nhấp và hiển thị rõ ràng như chấp nhận, điều mà các cơ quan quản lý yêu cầu theo GDPR.
  • Mọi liên kết tới #cookie-settings sẽ mở lại phần cài đặt, nên khách có thể đổi ý bất cứ lúc nào.
  • Chặn các thẻ khác của bạn cho đến khi có sự đồng ý: các script có type="text/plain" data-cookie-category="analytics" (hoặc tiếp thị, tùy chọn) và iframe có data-src chỉ chạy sau khi khách chấp nhận nhóm đó. Khi rút lại đồng ý, trang sẽ tải lại để dừng chúng.
  • Banner phát sự kiện cookie-consent trên document kèm các lựa chọn, nhờ đó bạn có thể chỉ tải các script khác sau khi có đồng ý.

Google Consent Mode v2

Đoạn 1 thiết lập mọi tín hiệu đồng ý của Google — ad_storage, ad_user_data, ad_personalization và analytics_storage — ở trạng thái từ chối trước khi thẻ Google được tải. Khi khách chọn, banner sẽ cập nhật: phân tích đi vào analytics_storage, tiếp thị đi vào ba tín hiệu quảng cáo. Khi đó Google Analytics chỉ ghi dữ liệu đầy đủ với khách đã đồng ý, còn những khách khác chỉ gửi ping không cookie. Từ tháng 3/2024, Google yêu cầu Consent Mode v2 để đo lường quảng cáo với khách truy cập tại Khu vực Kinh tế Châu Âu.

Đây là công cụ kỹ thuật, không phải tư vấn pháp lý: hãy liệt kê các cookie bạn thực sự dùng trong chính sách quyền riêng tư và kiểm tra những gì quốc gia bạn yêu cầu. Liên quan: Tracking Tag Checker, Meta Tag Generator.

Cũng được tìm dưới tên: banner cookie gdpr, cookie consent banner generator, mã banner đồng ý cookie, google consent mode v2, popup cookie html, banner cookie miễn phí, thông báo cookie webflow.

Các công cụ dùng kèm tốt với Tạo banner cookie

  • Trình tạo CSP — Chọn những gì trang web của bạn tải — script, style, hình ảnh, font, analytics, nhúng — và nhận một Content-Security-Policy chỉ cho phép đúng những thứ đó, kèm cảnh báo cho các cài đặt rủi ro.
  • Kiểm tra SEO & Audit website — Dán một URL để chạy tối đa 70 kiểm tra SEO on-page cùng audit toàn bộ website: tốc độ Lighthouse, header bảo mật & SSL, dữ liệu có cấu trúc, liên kết hỏng, robots.txt & AI crawler, kiểm tra cơ bản về khả năng truy cập, tracking & consent, SPF/DKIM/DMARC và hạn domain.
  • HTML & CSS sang Webflow — Dán HTML và CSS, nhấn Copy to Webflow rồi dán vào Designer.
  • Phân tích Email Header — Dán header gốc của email để xem toàn bộ hành trình: từng máy chủ trung gian cùng thời gian xử lý, kết quả SPF, DKIM và DMARC, IP gốc, và các dấu hiệu cảnh báo như Reply-To hoặc Return-Path không khớp.

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

Làm sao để thêm banner cookie vào Webflow?
Dán đoạn 1 vào Site settings → Custom code → Head (trước thẻ Google) và đoạn 2 vào Footer code, rồi publish. Thêm liên kết footer trỏ tới #cookie-settings để khách có thể mở lại banner.
Có chặn Google Analytics cho đến khi có đồng ý không?
Với Consent Mode v2, Google Analytics vẫn tải nhưng không lưu cookie cho đến khi khách chấp nhận phân tích — nó chỉ gửi tín hiệu không cookie. Để chặn hoàn toàn các script khác, hãy tải chúng trong một listener cho sự kiện cookie-consent.
Có bắt buộc có nút Từ chối không?
Theo GDPR, việc từ chối phải dễ dàng như chấp nhận, và một số cơ quan quản lý ở EU đã phạt các website giấu tùy chọn từ chối. Trình tạo đặt nút Từ chối cạnh nút Chấp nhận với mức độ nổi bật tương đương theo mặc định.
Có thể chặn script cho đến khi khách đồng ý không?
Có. Dán các thẻ của bạn ở bước 3: mỗi thẻ sẽ được gán type="text/plain" và data-cookie-category, nên trình duyệt không chạy nó. Banner sẽ bật thẻ khi khách chấp nhận nhóm tương ứng, còn các thẻ cần thiết vẫn chạy như một danh sách cho phép. Iframe như nhúng YouTube cũng chờ theo cách tương tự với data-src.
Lựa chọn được lưu ở đâu?
Trong trình duyệt của khách (localStorage), kèm phiên bản và ngày, nên banner sẽ hiện lại sau khoảng thời gian bạn đặt hoặc khi bạn đổi phiên bản.
Tôi có thể cài Tạo banner cookie như một ứng dụng web và dùng khi không có mạng không?
Có. Tạo banner cookie là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.

Công cụ liên quan