免费工具 Cookie 弹窗生成器：同意横幅代码 + 实时预览

<!-- Google Consent Mode v2：把这段放在 <head> 的最前面，在 Google 代码或 Tag Manager 容器代码之前。 -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  // 默认值：访客做出选择之前，所有可选用途都是 denied。
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'functionality_storage': 'denied',
    'personalization_storage': 'denied',
    'security_storage': 'granted',
    'wait_for_update': 500
  });
  // 回访的访客：在任何 Google 代码运行之前，先恢复上次保存的选择。
  (function () {
    var raw = null, r = null;
    try { raw = localStorage.getItem('cookie_consent'); } catch (e) {}
    if (!raw) try { var m = document.cookie.match(/(?:^|; )cookie_consent=([^;]*)/); if (m) raw = decodeURIComponent(m[1]); } catch (e) {}
    try { r = JSON.parse(raw); } catch (e) {}
    if (!r || !r.c || !(r.e > Date.now()) || r.v !== '1') return;
    var c = r.c;
    gtag('consent', 'update', {
      'ad_storage': c.marketing ? 'granted' : 'denied',
      'ad_user_data': c.marketing ? 'granted' : 'denied',
      'ad_personalization': c.marketing ? 'granted' : 'denied',
      'analytics_storage': c.analytics ? 'granted' : 'denied',
      'functionality_storage': c.preferences ? 'granted' : 'denied',
      'personalization_storage': c.preferences ? 'granted' : 'denied'
    });
  })();
</script>

<!-- Cookie 横幅 · 由 tapcub.com/tools/cookie-banner-generator 生成 · 无依赖。这是模板，不是法律意见，上线前请审阅。 -->
<!-- 把这一整段放在每个页面的 </body> 之前。 -->
<!-- 可选脚本写成 <script type="text/plain" data-cc-category="analytics" src="…"></script>，访客同意后才会执行。 -->
<!-- 接口：CookieConsent.get() · CookieConsent.open() · CookieConsent.reset() · CookieConsent.on(fn)；任何带 data-cc-open 的元素都能重新打开设置。 -->
<style>
#cc-banner{--cc-bg:#ffffff;--cc-fg:#111827;--cc-muted:#4b5563;--cc-border:#d1d5db;--cc-panel:#f9fafb;--cc-accent:#2563eb;--cc-on-accent:#ffffff;--cc-link:#2563eb;
  position:fixed;z-index:2147483000;left:0;right:0;bottom:0;border-width:1px 0 0;box-sizing:border-box;padding:20px;background:var(--cc-bg);color:var(--cc-fg);border:1px solid var(--cc-border);
  box-shadow:0 8px 32px rgba(0,0,0,.18);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif}
#cc-banner[hidden],#cc-reopen[hidden],#cc-backdrop[hidden],#cc-banner [hidden]{display:none!important}
#cc-banner *{box-sizing:border-box}
#cc-banner:focus{outline:none}
#cc-banner .cc-inner{max-width:1080px;margin:0 auto;display:grid;gap:14px}
#cc-banner .cc-title{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:var(--cc-fg)}
#cc-banner .cc-text{margin:0;color:var(--cc-muted)}
#cc-banner a{color:var(--cc-link);text-decoration:underline;text-underline-offset:2px}
#cc-banner .cc-cats{display:grid;gap:8px;margin:0;padding:0;border:0}
#cc-banner .cc-cat{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--cc-border);border-radius:8px;background:var(--cc-panel)}
#cc-banner .cc-cat input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--cc-accent)}
#cc-banner .cc-cat b{display:block;color:var(--cc-fg)}
#cc-banner .cc-cat span{display:block;font-size:13px;color:var(--cc-muted)}
#cc-banner .cc-note{margin:0;font-size:13px;color:var(--cc-muted)}
#cc-banner .cc-actions{display:flex;flex-wrap:wrap;gap:8px}
#cc-banner .cc-btn{flex:1 1 auto;min-height:44px;padding:10px 18px;border:2px solid var(--cc-accent);border-radius:8px;background:var(--cc-accent);color:var(--cc-on-accent);font:inherit;font-weight:600;cursor:pointer}
#cc-banner .cc-btn-alt{background:transparent;color:var(--cc-fg);border-color:var(--cc-border)}
#cc-banner .cc-btn:focus-visible,#cc-reopen:focus-visible,#cc-banner a:focus-visible,#cc-banner input:focus-visible{outline:3px solid var(--cc-link);outline-offset:2px}
#cc-backdrop{position:fixed;inset:0;z-index:2147482999;background:rgba(17,24,39,.55)}
#cc-reopen{position:fixed;z-index:2147482998;left:16px;bottom:16px;min-height:40px;padding:8px 14px;border:1px solid #d1d5db;border-radius:999px;background:#ffffff;color:#111827;font:600 13px/1.2 system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.15)}
#cc-reopen:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
@media (min-width:720px){#cc-banner.cc-bar .cc-inner{grid-template-columns:1fr auto;align-items:center}#cc-banner.cc-bar .cc-prefs,#cc-banner.cc-bar .cc-actions-wide{grid-column:1/-1}#cc-banner .cc-btn{flex:0 1 auto}}
</style>
<div id="cc-banner" class="cc-bar" role="dialog" aria-modal="false" aria-labelledby="cc-title" aria-describedby="cc-desc" tabindex="-1" lang="en" hidden>
  <div class="cc-inner">
    <div>
      <h2 class="cc-title" id="cc-title">We use cookies</h2>
      <p class="cc-text" id="cc-desc">We use strictly necessary cookies to run this site. With your consent we also use cookies for analytics and marketing. You can change your choice at any time in “Cookie settings”. <a href="/cookies">Cookie policy</a></p>
    </div>
    <div class="cc-prefs" id="cc-prefs" hidden>
      <fieldset class="cc-cats">
      <legend class="cc-note">Cookie categories</legend>
      <div class="cc-cat"><input type="checkbox" id="cc-cat-necessary" checked disabled><label for="cc-cat-necessary"><b>Strictly necessary</b><span>Always on. Needed for the site to work, for example security and remembering this choice.</span></label></div>
      <div class="cc-cat"><input type="checkbox" id="cc-cat-analytics" data-cc-cat="analytics"><label for="cc-cat-analytics"><b>Analytics</b><span>Helps us understand how the site is used, for example which pages are visited.</span></label></div>
      <div class="cc-cat"><input type="checkbox" id="cc-cat-marketing" data-cc-cat="marketing"><label for="cc-cat-marketing"><b>Marketing</b><span>Used to measure ad campaigns and show more relevant ads.</span></label></div>
      </fieldset>
      <p class="cc-note" data-cc-gpc hidden>Opt-out preference signal honored: your browser sent Global Privacy Control, so marketing stays off unless you switch it on here.</p>
    </div>
    <div class="cc-actions">
      <button type="button" class="cc-btn" data-cc="reject">Reject all</button>
      <button type="button" class="cc-btn" data-cc="accept">Accept all</button>
      <button type="button" class="cc-btn cc-btn-alt" data-cc="customize" aria-expanded="false" aria-controls="cc-prefs">Customize</button>
      <button type="button" class="cc-btn cc-btn-alt" data-cc="save" hidden>Save choices</button>
    </div>
  </div>
</div>
<button type="button" id="cc-reopen" data-cc-open hidden>Cookie settings</button>
<script>
(function () {
  'use strict';
  // 设置：在这里改，不用改下面的代码。
  var KEY = "cookie_consent"; // localStorage 键名 / Cookie 名
  var VERSION = "1"; // 用途变了就改它：所有访客会被重新询问
  var DAYS = 180; // 多少天后重新询问
  var STORAGE = "local"; // 'local' = localStorage，'cookie' = 第一方 Cookie
  var CATEGORIES = ["analytics","marketing"];
  var CONSENT_MODE = true; // 发送 gtag('consent', 'update', …)
  var TAPCUB = false; // 同步给 TapCub 统计脚本（只在识别模式下有用）
  var HONOR_GPC = true; // 收到全球隐私控制（GPC）信号时营销类保持关闭
  var MODAL = false;

  var root = document.getElementById('cc-banner');
  if (!root) return;
  var backdrop = document.getElementById('cc-backdrop');
  var reopenBtn = document.getElementById('cc-reopen');
  var prefs = document.getElementById('cc-prefs');
  var memory = null, lastFocus = null, firstRun = false;
  var gpc = HONOR_GPC && navigator.globalPrivacyControl === true && CATEGORIES.indexOf('marketing') > -1;
  // 把横幅放到 Tab 顺序的最前面
  document.body.insertBefore(root, document.body.firstChild);
  if (backdrop) document.body.insertBefore(backdrop, root);

  // ---- 存储：浏览器禁止存储时退回内存
  function read() {
    var raw = null;
    try {
      if (STORAGE === 'local') raw = localStorage.getItem(KEY);
      else { var m = document.cookie.match(new RegExp('(?:^|; )' + KEY + '=([^;]*)')); if (m) raw = decodeURIComponent(m[1]); }
    } catch (e) {}
    if (!raw) return memory;
    try { return JSON.parse(raw); } catch (e) { return null; }
  }
  function write(rec) {
    memory = rec;
    var s = rec ? JSON.stringify(rec) : null;
    try {
      if (STORAGE === 'local') { if (s) localStorage.setItem(KEY, s); else localStorage.removeItem(KEY); }
      else document.cookie = KEY + '=' + (s ? encodeURIComponent(s) : '') + '; Max-Age=' + (s ? DAYS * 86400 : 0) + '; Path=/; SameSite=Lax' + (location.protocol === 'https:' ? '; Secure' : '');
    } catch (e) {}
  }
  function valid(r) { return !!(r && r.c && r.v === VERSION && r.e > Date.now()); }

  // ---- 做出选择之后
  function apply(c, userAction) {
    if (CONSENT_MODE) {
      window.dataLayer = window.dataLayer || [];
      if (typeof window.gtag !== 'function') window.gtag = function () { window.dataLayer.push(arguments); };
      window.gtag('consent', 'update', {
        'ad_storage': c.marketing ? 'granted' : 'denied',
        'ad_user_data': c.marketing ? 'granted' : 'denied',
        'ad_personalization': c.marketing ? 'granted' : 'denied',
        'analytics_storage': c.analytics ? 'granted' : 'denied',
        'functionality_storage': c.preferences ? 'granted' : 'denied',
        'personalization_storage': c.preferences ? 'granted' : 'denied'
      });
      window.dataLayer.push({ event: 'cookie_consent_update' });
    }
    // 执行已获同意的 <script type="text/plain" data-cc-category="…">
    var blocked = document.querySelectorAll('script[type="text/plain"][data-cc-category]');
    for (var i = 0; i < blocked.length; i++) {
      var old = blocked[i];
      if (!c[old.getAttribute('data-cc-category')]) continue;
      var s = document.createElement('script');
      for (var k = 0; k < old.attributes.length; k++) {
        var a = old.attributes[k];
        if (a.name !== 'type' && a.name !== 'data-cc-category') s.setAttribute(a.name, a.value);
      }
      s.text = old.text;
      old.parentNode.replaceChild(s, old);
    }
    var ev;
    try { ev = new CustomEvent('cookieconsent', { detail: c }); } catch (e) { ev = document.createEvent('CustomEvent'); ev.initCustomEvent('cookieconsent', false, false, c); }
    document.dispatchEvent(ev);
  }

  function choice(all) {
    var c = {};
    for (var i = 0; i < CATEGORIES.length; i++) {
      var k = CATEGORIES[i];
      if (all === null) { var box = document.getElementById('cc-cat-' + k); c[k] = !!(box && box.checked); }
      else c[k] = all && !(gpc && k === 'marketing');
    }
    return c;
  }
  function save(c) {
    var now = Date.now();
    write({ v: VERSION, t: now, e: now + DAYS * 864e5, c: c });
    apply(c, true);
    close();
  }

  // ---- 打开 / 关闭和焦点
  function focusables() { return root.querySelectorAll('button:not([hidden]):not([disabled]), a[href], input:not([disabled])'); }
  function showPrefs(on) {
    if (!prefs) return;
    prefs.hidden = !on;
    var cus = root.querySelector('[data-cc="customize"]');
    var sav = root.querySelector('[data-cc="save"]');
    if (cus) { cus.hidden = on; cus.setAttribute('aria-expanded', String(on)); }
    if (sav) sav.hidden = !on;
    if (on) { var first = prefs.querySelector('input:not([disabled])'); if (first) first.focus(); }
  }
  function open(withPrefs, byUser) {
    var r = read(), saved = valid(r) ? r.c : {};
    for (var i = 0; i < CATEGORIES.length; i++) {
      var box = document.getElementById('cc-cat-' + CATEGORIES[i]);
      if (box) box.checked = saved[CATEGORIES[i]] === true; // 不预先勾选
    }
    var g = root.querySelector('[data-cc-gpc]'); if (g) g.hidden = !gpc;
    lastFocus = byUser ? document.activeElement : null;
    root.hidden = false;
    if (backdrop) backdrop.hidden = false;
    if (reopenBtn) reopenBtn.hidden = true;
    showPrefs(!!withPrefs);
    if (!MODAL) document.documentElement.style.scrollPaddingBottom = root.offsetHeight + 'px';
    if ((MODAL || byUser) && !withPrefs) root.focus();
  }
  function close() {
    root.hidden = true;
    firstRun = false;
    if (backdrop) backdrop.hidden = true;
    document.documentElement.style.scrollPaddingBottom = '';
    if (reopenBtn) reopenBtn.hidden = false;
    var to = lastFocus && document.contains(lastFocus) ? lastFocus : reopenBtn;
    if (to && to.focus) to.focus();
  }

  root.addEventListener('click', function (e) {
    var b = e.target.closest ? e.target.closest('[data-cc]') : null;
    if (!b) return;
    var act = b.getAttribute('data-cc');
    if (act === 'accept') save(choice(true));
    else if (act === 'reject') save(choice(false));
    else if (act === 'save') save(choice(null));
    else if (act === 'customize') showPrefs(true);
  });
  root.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      if (prefs && !prefs.hidden) { showPrefs(false); var cus = root.querySelector('[data-cc="customize"]'); if (cus) cus.focus(); }
      else if (!firstRun) close();
      return;
    }
    if (e.key !== 'Tab' || !MODAL) return;
    var f = focusables(); if (!f.length) return;
    var first = f[0], last = f[f.length - 1];
    if (e.shiftKey && (document.activeElement === first || document.activeElement === root)) { e.preventDefault(); last.focus(); }
    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
  });
  document.addEventListener('click', function (e) {
    var t = e.target.closest ? e.target.closest('[data-cc-open]') : null;
    if (t) { e.preventDefault(); open(true, true); }
  });

  window.CookieConsent = {
    get: function () { var r = read(); return valid(r) ? r.c : null; },
    open: function () { open(true, true); },
    reset: function () { write(null); firstRun = true; open(false, false); },
    on: function (fn) { document.addEventListener('cookieconsent', function (e) { fn(e.detail); }); }
  };

  var rec = read();
  if (valid(rec)) { apply(rec.c, false); if (reopenBtn) reopenBtn.hidden = false; }
  else { if (rec) write(null); firstRun = true; open(false, false); }
})();
</script>