跳到主要内容
BLKBLKTECH

指南 / infra

隐私政策 + GDPR Cookie 提示部署

面向欧洲买家的外贸站必须符合 GDPR 要求，否则面临罚款风险。这篇讲如何用 AI 生成符合要求的隐私政策文本、在 Astro 站点里添加 Cookie 同意横幅（使用轻量级 vanilla JS，不依赖第三方 SaaS），以及哪些数据收集行为需要明确告知。

作者 BLKTECH 编辑部更新 2026年8月4日8 分钟难度 入门免费Astro

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

隐私政策 + GDPR Cookie 提示部署

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，刷新后不重复弹出
□ 页脚有隐私政策链接
□ 隐私政策日期已更新

→ GA4 + GSC + Bing Webmaster Tools 配置与询盘转化追踪

NEXT ACTION / 下一步

继续实践下一步

把读到的方法变成一个小行动，完成后再回来迭代。

继续

RELATED / 相关推荐

接着读这些

按同一栏目、标签与技术栈为你挑选。

指南8 分钟

CF Pages 部署上线全流程

从本地代码到全球可访问的外贸站，Cloudflare Pages 的完整部署流程。包括 GitHub 仓库连接、构建配置、自定义域名绑定、环境变量设置，以及部署后的基础验证清单。

Cloudflare Pages · GitHub · Astro
指南10 分钟

llms.txt 与 AI 爬虫优化：让 AI 搜索引擎优先引用你的站点

robots.txt 管传统爬虫，llms.txt 管 AI 抓取。这篇讲 llms.txt 的格式规范与实际效果（含客观评估：它还不是官方标准）、主流 AI 爬虫的 User-Agent 列表与放行策略、以及比 llms.txt 更重要的技术前提——内容必须服务端渲染。

Astro
指南11 分钟

多语言架构与 hreflang 配置

面向多个国家市场时，多语言站点的架构选择和 hreflang 配置决定了各语言版本能否各自获得目标市场的排名，而不是互相竞争。这篇讲三种 URL 架构的对比、hreflang 标签的正确写法（含最常见的三个错误）、x-default 的作用，以及注册表 target_locale 字段如何驱动多语言配置。

Astro