只用這個產生器,網站就算合規了嗎?

彈窗給訪客明確的同意或拒絕選項,並將結果保存下來,這部分要求達成了。但你仍需要單獨的隱私權政策頁,而且必須真正在訪客拒絕的類別中攔下對應的腳本。

如何在訪客同意之前阻止 Google Analytics 載入?

有兩種方法。最簡單的是勾選「Google 同意模式 v2」：產生的腳本隨後會送出 gtag 同意訊號，初始為拒絕，只有在訪客接受對應類別後才切換為允許。否則，請自行以一段讀取橫幅所設 Cookie 的條件判斷把 gtag 標籤包起來，使腳本在取得同意前始終不會插入頁面。

上線後還能改文案嗎?

可以。用相近設定重新產生一次,將彈窗 div 中的字串替換即可。已做過選擇的訪客不會重看彈窗,因為 Cookie 名稱沒變。

「預設接受」和「預設拒絕」有什麼差別?

預設拒絕(opt-in)模式下,所有非必要類別一開始都是關的,使用者按了同意才開啟。預設接受(opt-out)則相反,加州 CCPA 允許,但歐盟 GDPR 不允許。訪客若含歐盟使用者就要選預設拒絕。

訪客每次造訪都會看到彈窗嗎?

不會。訪客儲存選擇後,Cookie 會依你設定的有效期保留（預設六個月）。只有過期、被清除,或你在 JS 內手動更新「同意版本號」時,彈窗才會再次出現。

Cookie同意橫幅產生器

產生Cookie同意橫幅程式碼

設定

橫幅樣式

橫幅文字

接受按鈕文字

拒絕按鈕文字

管理偏好文字

隱私權政策連結

連結文字

同意模式

Cookie 有效期

天

必要統計分析行銷功能

Google 同意模式 v2為 Google Ads 與 GA4 加入 gtag 同意訊號（ad_storage、analytics_storage、ad_user_data、ad_personalization）。

顏色

配色方案

背景

文字

接受按鈕文字

接受按鈕文字文字

拒絕按鈕文字

拒絕按鈕文字文字

預覽

我們使用 Cookie 來提升您的體驗。繼續造訪本網站即表示您同意我們使用 Cookie。

結果

<!-- Cookie Consent Banner -->
<style>
#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1a1a2e;
  color: #ffffff;
  padding: 20px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

#cookie-consent-banner .cc-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

#cookie-consent-banner .cc-link:hover {
  opacity: 0.85;
}

#cookie-consent-banner .cc-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

#cookie-consent-banner .cc-text {
  flex: 1;
  min-width: 200px;
}

#cookie-consent-banner .cc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#cookie-consent-banner button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.2s;
}

#cookie-consent-banner button:hover {
  opacity: 0.9;
}

#cc-accept-btn {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-reject-btn {
  background: transparent;
  color: #ffffff;
}

#cc-manage-btn {
  background: transparent;
  color: #ffffff;
  text-decoration: underline;
  border: none;
  padding: 10px 12px;
}

@media (max-width: 600px) {
  #cookie-consent-banner .cc-content {
    flex-direction: column;
    text-align: center;
  }
  #cookie-consent-banner .cc-buttons {
    justify-content: center;
    width: 100%;
  }
  #cookie-consent-banner button {
    flex: 1;
    min-width: 120px;
  }
}
#cookie-consent-prefs {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#cookie-consent-prefs .cc-pref-box {
  background: #1a1a2e;
  color: #ffffff;
  width: 90%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

#cookie-consent-prefs .cc-pref-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

#cookie-consent-prefs .cc-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
}

#cookie-consent-prefs .cc-pref-info { flex: 1; }

#cookie-consent-prefs .cc-pref-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

#cookie-consent-prefs .cc-pref-desc {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}

#cookie-consent-prefs .cc-pref-always {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
  padding-top: 2px;
}

#cookie-consent-prefs .cc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

#cookie-consent-prefs .cc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#cookie-consent-prefs .cc-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(127, 127, 127, 0.5);
  border-radius: 24px;
  transition: background 0.2s;
}

#cookie-consent-prefs .cc-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

#cookie-consent-prefs input:checked + .cc-slider {
  background: #e94560;
}

#cookie-consent-prefs input:checked + .cc-slider:before {
  transform: translateX(18px);
}

#cookie-consent-prefs .cc-pref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

#cookie-consent-prefs .cc-pref-actions button {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(127, 127, 127, 0.3);
}

#cc-prefs-save {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-prefs-cancel {
  background: transparent;
  color: #ffffff;
}
</style>

<div id="cookie-consent-banner" style="display:none;">
  <div class="cc-content">
    <div class="cc-text">我們使用 Cookie 來提升您的體驗。繼續造訪本網站即表示您同意我們使用 Cookie。</div>
    <div class="cc-buttons">
      <button id="cc-accept-btn">全部接受</button>
      <button id="cc-reject-btn">全部拒絕</button>
      <button id="cc-manage-btn">管理偏好設定</button>
    </div>
  </div>
</div>
<div id="cookie-consent-prefs" style="display:none;" role="dialog" aria-modal="true" aria-label="Cookie 偏好設定">
  <div class="cc-pref-box">
    <h2 class="cc-pref-title">Cookie 偏好設定</h2>
    <div class="cc-pref-list">
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">必要</div>
          <div class="cc-pref-desc">網站正常運作所必需，無法關閉。</div>
        </div>
        <span class="cc-pref-always">永遠啟用</span>
      </div>
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">分析</div>
          <div class="cc-pref-desc">協助我們了解訪客如何使用網站，以便加以改善。</div>
        </div>
        <label class="cc-switch"><input type="checkbox" data-cc-cat="analytics" aria-label="分析"><span class="cc-slider"></span></label>
      </div>
    </div>
    <div class="cc-pref-actions">
      <button id="cc-prefs-save">儲存偏好設定</button>
      <button id="cc-prefs-cancel">取消</button>
    </div>
  </div>
</div>

<script>
(function() {
  var COOKIE_NAME = 'cookie_consent';
  var CATEGORIES = ["necessary","analytics"];
  var OPTIONAL_CATEGORIES = ["analytics"];
  var DEFAULT_CONSENT = false;
  var EXPIRY_DAYS = 180;

  function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
  }

  function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + '=' + encodeURIComponent(value) +
      ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
  }

  function hideBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'none';
  }

  function showBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'block';
  }

  function getPrefs() { return document.getElementById('cookie-consent-prefs'); }
  function openPrefs() {
    var p = getPrefs();
    if (!p) return;
    // Reflect the last saved choice (or the defaults) in the toggles.
    var saved = {};
    try { saved = JSON.parse(getCookie(COOKIE_NAME) || '{}'); } catch (e) {}
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p.querySelector('[data-cc-cat="' + cat + '"]');
      if (box) box.checked = (cat in saved) ? !!saved[cat] : DEFAULT_CONSENT;
    });
    p.style.display = 'flex';
  }
  function closePrefs() {
    var p = getPrefs();
    if (p) p.style.display = 'none';
  }

  // Persist a consent object and broadcast it. `necessary` is always true.
  function persist(consent) {
    consent.necessary = true;
    setCookie(COOKIE_NAME, JSON.stringify(consent), EXPIRY_DAYS);
    hideBanner();
    closePrefs();
    window.dispatchEvent(new CustomEvent('cookieConsent', { detail: consent }));
  }

  // Accept-all / reject-all set every optional category the same way.
  function saveConsent(accepted) {
    var consent = {};
    CATEGORIES.forEach(function(cat) {
      consent[cat] = cat === 'necessary' ? true : accepted;
    });
    persist(consent);
  }

  // Save exactly what the visitor toggled in the preference center.
  function savePreferences() {
    var p = getPrefs();
    var consent = { necessary: true };
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p && p.querySelector('[data-cc-cat="' + cat + '"]');
      consent[cat] = !!(box && box.checked);
    });
    persist(consent);
  }

  // Check existing consent
  var existing = getCookie(COOKIE_NAME);
  if (!existing) {
    if (DEFAULT_CONSENT) {
      // Opt-out mode: set default consent, still show banner
      var defaultCons = {};
      CATEGORIES.forEach(function(cat) { defaultCons[cat] = true; });
      setCookie(COOKIE_NAME, JSON.stringify(defaultCons), EXPIRY_DAYS);
    }
    showBanner();
  }

  document.getElementById('cc-accept-btn').addEventListener('click', function() {
    saveConsent(true);
  });

  document.getElementById('cc-reject-btn').addEventListener('click', function() {
    saveConsent(false);
  });

  document.getElementById('cc-manage-btn').addEventListener('click', openPrefs);

  var saveBtn = document.getElementById('cc-prefs-save');
  if (saveBtn) saveBtn.addEventListener('click', savePreferences);
  var cancelBtn = document.getElementById('cc-prefs-cancel');
  if (cancelBtn) cancelBtn.addEventListener('click', closePrefs);
})();
</script>

什麼是Cookie同意橫幅產生器？

產生符合 GDPR 的 Cookie 同意橫幅，並直接給出可嵌入網站的 HTML、CSS 和 JavaScript 程式碼。選一種樣式，設定 Cookie 類別，再調整同意結果的儲存方式即可。

產生的代碼是一個自含片段:HTML 為彈窗結構,CSS 為樣式,一小段 JavaScript 把訪客的選擇寫入 Cookie,並僅載入他們同意的腳本類別。可直接貼到網站,也可下載三個獨立檔案的 zip 壓縮包接入。

使用方法

選擇橫幅樣式（頂部欄、底部欄、強制回應視窗或角落彈出），並自訂顏色、文字和按鈕標籤。
設定 Cookie 類別（必要、分析、行銷、功能）、同意的記住時長,以及同意行為（選擇加入或選擇退出）。
複製或下載產生的HTML/CSS/JS程式碼，並新增至您的網站中。

何時使用

為靜態網站或行銷登陸頁加上符合 GDPR、CCPA 的 Cookie 提示。
替換那種使用者還沒點選之前就先載入 200KB 的第三方同意管理外掛。
把樣式先呈現給工程團隊看,再交付詳細規格。

結果

一位網站擁有者為其符合GDPR的部落格選擇底部欄樣式，設定「全部接受」和「管理偏好」按鈕，啟用分析和行銷類別，然後下載程式碼片段新增至body標籤關閉前。

常見問題

只用這個產生器,網站就算合規了嗎?: 彈窗給訪客明確的同意或拒絕選項,並將結果保存下來,這部分要求達成了。但你仍需要單獨的隱私權政策頁,而且必須真正在訪客拒絕的類別中攔下對應的腳本。
如何在訪客同意之前阻止 Google Analytics 載入?: 有兩種方法。最簡單的是勾選「Google 同意模式 v2」：產生的腳本隨後會送出 gtag 同意訊號，初始為拒絕，只有在訪客接受對應類別後才切換為允許。否則，請自行以一段讀取橫幅所設 Cookie 的條件判斷把 gtag 標籤包起來，使腳本在取得同意前始終不會插入頁面。
上線後還能改文案嗎?: 可以。用相近設定重新產生一次,將彈窗 div 中的字串替換即可。已做過選擇的訪客不會重看彈窗,因為 Cookie 名稱沒變。
「預設接受」和「預設拒絕」有什麼差別?: 預設拒絕(opt-in)模式下,所有非必要類別一開始都是關的,使用者按了同意才開啟。預設接受(opt-out)則相反,加州 CCPA 允許,但歐盟 GDPR 不允許。訪客若含歐盟使用者就要選預設拒絕。
訪客每次造訪都會看到彈窗嗎?: 不會。訪客儲存選擇後,Cookie 會依你設定的有效期保留（預設六個月）。只有過期、被清除,或你在 JS 內手動更新「同意版本號」時,彈窗才會再次出現。

Cookie同意橫幅產生器

設定

顏色

預覽

結果

什麼是Cookie同意橫幅產生器？

使用方法

何時使用

結果

常見問題

相關工具

結構化資料產生器

網頁轉 PDF

隱私權政策產生器

服務條款產生器

CSS壓縮工具

HTML 壓縮工具

Cookie同意橫幅產生器

設定

顏色

預覽

結果