通知提示橫幅 (Cookie Banner)

新提案
→
封閉測試
→
公開測試
→
已穩定

成熟度說明

新提案：未完成開發、請勿使用。
封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

說明

通知提示橫幅 (Cookie Banner) 是用來讓使用者接受或拒絕非必要的 cookie（使服務正常運作之外的 cookie），如果您的服務只有用到必要的 cookie，您可以選擇不顯示通知提示橫幅。
您不能將本頁面上的訊息視為法律建議，您的組織需對自己為了遵守數據保護法規而採取的行動負責。
非必要的 cookie 包含：
- HTML5 local storage
- service worker
- 任何其他在使用者設備上存儲文件的技術

接受或拒絕

您可能需要另外建立一個 cookie 頁面，讓使用者可以稍後再到該頁面進行檢視或調整您的服務上的 cookie 策略。

HTML

<div class="cookie-banner" data-nosnippet role="region" aria-label="OO 網站 Cookie">
  <div class="cookie-banner-message width-container pv3 ph3">
    <div class="grid-row">
      <div class="grid-column-two-thirds">
        <h2>
          [OO] 網站 Cookie
        </h2>
        <div class="cookie-banner-content">
          <p class="body">本網站使用 Cookie 與類似技術收集資訊，以便了解您的瀏覽活動，藉此分析您如何使用本網站。</p>
        </div>
      </div>
    </div>
    <div class=" gap2 flex flex-wrap mb3">
      <button type="button" class="button button-primary">
        接受 cookies
      </button>
      <button type="button" class="button button-primary">
        拒絕 cookies
      </button>
      <a href="#replace-this-url">檢視 cookies 策略</a>
    </div>
  </div>
</div>

隱藏

使用者接受或拒絕後，可以顯示修改偏好設定的頁面，並顯示通知提示橫幅的隱藏按鈕。

HTML

<div class="cookie-banner" data-nosnippet role="region" aria-label="OO 網站 Cookie">
  <div class="cookie-banner-message width-container pv3 ph3">
    <div class="grid-row">
      <div class="grid-column-two-thirds">
        <div class="cookie-banner-content">
          <p class="body">您已經接受用來分析的 cookie。 您可以隨時<a href="#replace-this-url">修改您的 cookie 偏好設定</a>。</p>
        </div>
      </div>
    </div>
    <div class="gap2 flex flex-wrap mb3">
      <button value="yes" type="submit" name="cookies[hide]" class="button button-primary">
        隱藏 cookie 訊息
      </button>
    </div>
  </div>
</div>