隐私政策 + GDPR Cookie 提示部署｜智引科技增长实验室

用AI生成隐私政策（Claude提供完整提示词），放在/privacy-policy/页面。Cookie提示横幅用原生JS实现（localStorage记录同意状态），在用户点击同意前不加载GA4等追踪脚本。部署完成后在privacypolicies.com验证合规性。

GDPR（欧盟通用数据保护条例）规定：向欧洲用户收集任何数据前，必须获得明确同意。违规罚款最高可达公司年营业额的4%。

对外贸站来说，“收集数据”包括：Google Analytics（收集浏览行为）、询盘表单（收集个人信息）、联系按钮点击追踪等。

Step 1：用 AI 生成隐私政策

提示词：

请为以下公司生成一份符合 GDPR 要求的英文隐私政策（Privacy Policy）。

公司信息：
- 公司名：AquaFlow Industrial Co., Ltd.
- 网站：www.aquaflowpumps.com
- 主营业务：工业泵制造商，B2B 外贸
- 数据收集内容：
  - 询盘表单（姓名、公司、邮箱、电话、询盘内容）
  - Google Analytics 4（匿名使用数据）
  - Cloudflare（日志和安全数据）
- 数据存储：Formspree（第三方表单服务）
- 联系邮箱：info@aquaflowpumps.com

请包含：
1. 收集哪些数据及目的
2. 数据存储和第三方共享说明
3. 用户权利（访问、更正、删除、反对处理）
4. Cookie 使用说明
5. 数据保留期限
6. 联系方式
7. 最后更新日期占位符：[DATE]

格式：清晰的 HTML 结构（h2/h3/p），适合直接放入网页。

生成后，把 [DATE] 替换成今天的日期，在 src/pages/privacy-policy.astro 里创建页面。

Step 2：Cookie 同意横幅

轻量级实现，不依赖任何第三方库：

在 `BaseLayout.astro` 中添加

<!-- Cookie Banner HTML -->
<div id="cookie-banner" class="cookie-banner" style="display:none">
  <div class="cookie-content">
    <p>
      We use cookies to analyze site traffic and improve your experience.
      By clicking "Accept", you consent to our use of
      <a href="/privacy-policy/">cookies</a>.
    </p>
    <div class="cookie-actions">
      <button id="cookie-accept" class="btn-accept">Accept</button>
      <button id="cookie-decline" class="btn-decline">Decline</button>
    </div>
  </div>
</div>

<style>
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e293b;
  color: white;
  padding: 16px 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cookie-content { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cookie-content p { margin: 0; font-size: 14px; }
.cookie-content a { color: #60a5fa; }
.cookie-actions { display: flex; gap: 8px; }
.btn-accept {
  background: #2563eb; color: white;
  padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;
}
.btn-decline {
  background: transparent; color: #94a3b8;
  padding: 8px 16px; border: 1px solid #475569; border-radius: 4px; cursor: pointer;
}
</style>

<script>
// Cookie 同意管理
(function() {
  const CONSENT_KEY = 'cookie_consent';
  const banner = document.getElementById('cookie-banner');

  // 检查是否已有决定
  const consent = localStorage.getItem(CONSENT_KEY);
  if (consent === 'accepted') {
    loadAnalytics(); // 已同意，加载 GA4
  } else if (!consent) {
    banner.style.display = 'flex'; // 未决定，显示横幅
  }
  // consent === 'declined'：不显示横幅，不加载 GA4

  document.getElementById('cookie-accept').addEventListener('click', () => {
    localStorage.setItem(CONSENT_KEY, 'accepted');
    banner.style.display = 'none';
    loadAnalytics();
  });

  document.getElementById('cookie-decline').addEventListener('click', () => {
    localStorage.setItem(CONSENT_KEY, 'declined');
    banner.style.display = 'none';
  });

  function loadAnalytics() {
    // 动态加载 GA4（只在用户同意后）
    const GA_ID = 'G-XXXXXXXXXX'; // 替换为你的 GA4 ID
    const script = document.createElement('script');
    script.async = true;
    script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
    document.head.appendChild(script);

    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', GA_ID);
  }
})();
</script>

关键设计：同意前不加载 GA4

这是 GDPR 合规的核心——GA4 脚本只在用户明确同意后才动态加载。不能用静态 <script> 标签写在 <head> 里，那样页面加载时就开始收集数据了。

页脚隐私政策链接

在页脚添加链接（必须醒目，不能藏起来）：

<footer>
  <!-- 其他页脚内容 -->
  <div class="footer-legal">
    <a href="/privacy-policy/">Privacy Policy</a>
    <span>·</span>
    <a href="/terms/">Terms of Use</a>
  </div>
</footer>

Checklist

□ 隐私政策页面 /privacy-policy/ 已创建
□ 隐私政策内容覆盖了所有实际收集的数据
□ Cookie 横幅在未同意前显示
□ 用户点击"接受"后 GA4 才开始加载
□ 用户点击"拒绝"后 GA4 不加载
□ 同意状态存储在 localStorage，刷新后不重复弹出
□ 页脚有隐私政策链接
□ 隐私政策日期已更新