GDPR Cookie 同意横幅专家

技能文档

---
name: gdpr-cookie-consent
title: GDPR Cookie 同意横幅专家
category: 法律合规
description: 帮助网站实现符合 GDPR、ePrivacy 与 CCPA 要求的 Cookie 同意横幅与隐私弹窗，覆盖网站 Cookie 审计、四类 Cookie 分级、脚本拦截改造、Cookie 政策撰写与上线前合规自查。当用户需要制作 Cookie 同意横幅、咨询 GDPR/CCPA/隐私合规、审计网站 Cookie 或撰写 Cookie 政策时触发。触发词：Cookie 横幅、GDPR 合规、隐私弹窗、Cookie 政策、同意管理。
---

# GDPR Cookie 同意横幅专家

为网站构建合法合规的 Cookie 同意方案：从 Cookie 审计、类别分级，到同意横幅实现、脚本拦截改造与 Cookie 政策撰写，覆盖 GDPR（欧盟）、ePrivacy 指令与 CCPA（美国加州）三大法规体系。

## 核心合规要求速览

| 法规 | 地区 | 核心要求 | 违规罚则 |
|------|------|----------|----------|
| **GDPR** | 欧盟 | 非必要 Cookie 须事先取得明确同意（opt-in） | 最高 2000 万欧元或全球年营业额 4% |
| **ePrivacy 指令** | 欧盟 | 设置 Cookie 前须告知并取得同意，每 12 个月重新征求 | 各成员国自行规定 |
| **CCPA** | 美国加州 | 须提供「拒绝出售我的个人信息」退出选项（opt-out） | 每次违规 2500-7500 美元 |

**一句话原则**：只有「严格必要」类 Cookie 可以未经同意直接加载，其余全部必须先征得同意。

## 技能工作流

### 步骤1：审计网站 Cookie

先弄清网站到底用了哪些 Cookie：

1. 打开浏览器开发者工具（F12）→ Application → Cookies，查看网站设置的全部 Cookie
2. 检查页面引入的第三方脚本，凡是会设置 Cookie 的都记录下来：
   - 统计分析（Google Analytics、Hotjar 等）
   - 广告营销（Google Ads、Facebook Pixel 等）
   - 客服组件、视频嵌入（Intercom、YouTube 等）
3. 也可使用主流同意管理平台提供的免费 Cookie 扫描器辅助盘点

### 步骤2：Cookie 四类分级

将所有 Cookie 按目的分为四类：

| 类别 | 说明 | 示例 | 是否需要同意 |
|------|------|------|--------------|
| **严格必要** | 网站基础功能所必需 | 登录会话、购物车、安全、负载均衡 | **否（豁免）** |
| **功能类** | 记住用户偏好 | 语言、主题、界面设置 | 是 |
| **统计/性能类** | 分析网站使用情况 | Google Analytics、行为分析 | 是 |
| **定向/广告类** | 个性化广告与再营销 | Google Ads、Facebook Pixel | 是 |

按来源还可区分：第一方 Cookie（本站设置）与第三方 Cookie（外部服务设置，通常都需要同意）。按时长区分：会话 Cookie（浏览器关闭即删除，通常豁免）与持久 Cookie（取决于用途）。

### 步骤3：确定适用法规与合规基线

| 网站情况 | 适用法规 | 合规模式 |
|----------|----------|----------|
| 有欧盟访客 | GDPR + ePrivacy | 事先同意（opt-in），拒绝按钮必须显眼 |
| 有加州访客 | CCPA | 可先收集，但须提供便捷退出（opt-out）与「Do Not Sell」链接 |
| 两者都有 | 从严：按 GDPR 标准 | GDPR 级合规同时覆盖 CCPA 基本要求 |

判断是否需要横幅：只要网站有欧盟或加州访客、使用了统计分析/广告 Cookie、或通过第三方服务设置 Cookie，就需要。

### 步骤4：实现同意横幅与脚本拦截

**合规横幅必须做到**：

- 在任何非必要 Cookie 被设置**之前**展示
- 说明使用了哪些 Cookie、用途是什么
- 同时提供「接受」「拒绝」「自定义」三个选项，拒绝入口与接受同样显眼
- 按四类 Cookie 提供颗粒化勾选，非必要类**不得默认勾选**
- 使用通俗易懂的语言，附 Cookie 政策/隐私政策链接
- 允许随时撤回同意（与给予同意同样便捷），并记录同意日志（含时间戳）作为监管证据
- 不得使用「继续浏览即视为同意」话术，不得用「Cookie 墙」强制同意后才给内容

**声明式脚本拦截（常用模式）**：把非必要脚本标记为暂缓执行，由同意管理脚本在用户同意后按类别放行：

```html
<!-- 改造前：页面加载即执行（不合规） -->
<script src="analytics.js"></script>

<!-- 改造后：标记类别，同意后放行 -->
<script type="text/plain" data-cookie-consent="tracking" src="analytics.js"></script>
```

类别标记约定：`strictly-necessary`（始终加载）、`functionality` / `tracking` / `targeting`（对应类别同意后加载）。可选用开源同意管理库（如 cookieconsent 类方案）或自建轻量管理脚本实现拦截与偏好中心。

### 步骤5：撰写 Cookie 政策

合规的 Cookie 政策必须包含：安装了哪些 Cookie 及其用途、Cookie 类型（第一方/第三方）、全部设置 Cookie 的第三方服务清单及各白皮书隐私政策链接、用户如何管理/删除 Cookie、如何撤回同意、联系方式、最后更新日期。完整模板见 [references/cookie-policy-template.md](references/cookie-policy-template.md)。

### 步骤6：上线前自查与持续合规

**上线前检查清单**：

```
□ 盘点网站全部 Cookie 并完成四类分级
□ 创建/更新 Cookie 政策
□ 安装同意横幅并配置脚本拦截
□ 验证非必要脚本在同意前不加载
□ 全设备测试横幅，验证同意记录功能
□ 提供随时修改偏好的入口
```

**持续合规**：

```
□ 每季度审计一次 Cookie 使用情况
□ 新增第三方服务时同步更新政策与分类
□ 每 12 个月重新征求一次同意（ePrivacy 要求）
□ 妥善保存同意记录，及时响应用户的数据请求
```

## 设计与体验要点

| 应该 | 不应该 |
|------|--------|
| 横幅清晰可见，首次访问立即展示 | 藏在角落或使用极小字体 |
| 接受与拒绝按钮同等醒目 | 隐藏拒绝选项、使用暗黑模式（dark patterns）|
| 提供「全部接受/全部拒绝/自定义」快捷操作 | 只给「接受」一个按钮 |
| 记住用户选择，移动端适配良好 | 反复弹窗打扰 |
| 异步加载横幅脚本，不阻塞内容 | 横幅脚本拖慢核心性能指标 |

性能注意：横幅出现导致的布局偏移影响 CLS（用固定定位预留空间）、按钮处理延迟影响 INP（异步加载脚本）、横幅体积影响 LCP（保持轻量）。

## 参考文档

- 各法规详细要求与对比 → [references/regulations.md](references/regulations.md)
- 主流服务脚本改造示例与最佳实践 → [references/implementation.md](references/implementation.md)
- Cookie 政策完整模板 → [references/cookie-policy-template.md](references/cookie-policy-template.md)

使用说明

# GDPR Cookie 同意横幅专家

帮助网站实现符合 GDPR、ePrivacy 与 CCPA 要求的 Cookie 同意横幅：Cookie 审计、四类分级、脚本拦截改造、Cookie 政策撰写与合规自查一站搞定。

## 使用

```text
我的网站用了 Google Analytics 和 Facebook Pixel，帮我做 GDPR 合规的 Cookie 横幅
```

```text
审计一下这个域名设置了哪些 Cookie，该分到哪个类别
```

```text
帮我写一份 Cookie 政策
```

## 工作原理

1. 通过开发者工具与脚本清单盘点网站全部 Cookie，按严格必要/功能/统计/广告四类分级
2. 根据访客地区确定适用法规（欧盟 GDPR + ePrivacy 为 opt-in 事先同意，加州 CCPA 为 opt-out 退出机制）
3. 输出合规横幅实现方案：声明式脚本拦截改造示例、偏好中心设计、同意记录留痕
4. 按 templates 生成 Cookie 政策，并给出上线前检查清单与持续合规节奏

references/ 内含法规对比详解、主流服务（GA4、Meta Pixel、Hotjar 等）脚本改造示例与完整政策模板。

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。