AdFlux-Design.md

实验题目：匿名用户精准广告投放生态系统设计方案

一、 系统架构概述 (System Overview)

本实验旨在构建一个模拟真实互联网环境的广告投放生态系统。系统部署于 4 台独立服务器 上，通过 API 接口、跨域 Cookie 和 MIME 类型识别 技术，实现不依赖用户注册登录的精准广告分发。

1.1 部署拓扑

• Server 1 (核心)：广告管理网站 (Ad Management System - AMS)
• Server 2：新闻资讯网站 (News Site)
• Server 3：在线购物网站 (Shopping Site)
• Server 4：视频分享网站 (Video Sharing Site)

1.2 核心挑战

1. 匿名追踪：在用户不注册的情况下，利用第三方 Cookie 跨站追踪用户兴趣。
2. 精准投放：结合“当前页面内容（上下文）”与“用户历史行为”进行推荐。
3. 异构展示：支持图片（横幅/侧栏/卡片）与视频（流媒体插播）多种广告形式。

---

二、 核心模块：广告管理网站 (Server 1)

这是系统的控制中心，涉及三类用户角色的业务流程。

2.1 角色：管理员 (Admin)

• 标签管理：维护系统通用的分类标签池（如：数码、美妆、体育、金融），供广告主和内容站使用。

• 广告审核：

  • 查看所有状态为 PENDING (待审核) 的广告。
  • 操作：通过 (Approve) 或 驳回 (Reject)。仅“通过”的广告可进入投放池。

2.2 角色：广告业主 (Advertiser)

负责购买广告位并上传素材。

2.2.1 广告看板

• 数据统计：查看广告的累计展示量和点击量。
• 状态管理：过滤查看（待审核 / 投放中 / 已关闭）的广告。

2.2.2 添加广告流程 (核心步骤)

1. 基础信息录入：

   • 标题：广告名称。
   • 分类：选择广告所属的兴趣标签（关键匹配依据）。
   • 落地页 URL：点击后跳转的外部链接。

2. 素材与版式配置 (Layout & Media)：

   • 素材类型：选择 Image (图片) 或 Video (视频)。

   • 适用版式：(决定广告在内容网站的展示位置)

     • 横幅 (Banner)：长条形，适用于页面顶部/底部。
     • 侧栏 (Sidebar)：竖条形，适用于页面左/右侧边栏。
     • 卡片 (Card)：方形，适用于正文内容中间。

   • 文件上传：上传对应的 .jpg 或 .mp4 文件。

3. 预算设置：

   • 设置投放周期（开始-结束时间）。
   • 设置周预算金额（系统根据预算高低决定展示权重）。

4. 支付与提交：

   • 填写模拟银行卡信息。
   • 提交后，初始状态为 未审核 (Pending) 且 已关闭 (Closed)。

2.3 角色：内容网站负责人 (Publisher)

负责接入生态，利用流量变现。

2.3.1 网站接入

1. 注册与验证：提交网站名称与域名，通过上传指定文件验证网站所有权。

2. 广告位管理 (Ad Unit)：

   • 站长在后台创建广告位。
   • 选择版式：必须指定该广告位是 Banner、Sidebar 还是 Card。
   • 系统生成唯一的 Placement ID。

2.3.2 获取代码 (Integration)

系统会自动生成标准化的前端集成代码，站长只需将其复制粘贴到自己网站 HTML 的对应位置即可。

• 广告占位容器：定义广告显示的位置。
• SDK 脚本：负责异步加载广告数据并渲染到容器中。

---

三、 核心技术：API 接口设计

见 API 接口设计。

---

四、 内容网站功能规范 (前端展示端)

三个网站仅作为流量入口和展示终端，不涉及复杂的后台管理，重点在于前端的埋点与交互逻辑。

4.1 新闻网站 (News Site) - Server 2

• 场景描述：用户阅读不同分类的文章（纯静态或伪静态页面）。

• 页面布局：

  • 顶部：导航栏。
  • 中部：新闻列表 / 文章详情。
  • 广告位 A：位于文章顶部，调用 “横幅 (Banner)” 广告。
  • 广告位 B：位于正文段落之间，调用 “卡片 (Card)” 广告。

4.2 购物网站 (Shopping Site) - Server 3

• 场景描述：用户浏览商品详情。

• 页面布局：

  • 左侧：商品大图与详细介绍。
  • 右侧广告位：垂直布局，调用 “侧栏 (Sidebar)” 广告。

• 跨域验证 (实验重点)：

  • 测试路径：用户先在 新闻网 看了 5 篇数码新闻 -> 跳转到 购物网 浏览衣服。
  • 预期结果：尽管购物网当前在看衣服，但右侧侧栏广告应优先推荐 “数码产品”（基于 Cookie 的跨站历史兴趣）。

4.3 视频分享网站 (Video Site) - Server 4

• 场景描述：流媒体播放与插播广告。

• 功能实现：

  • 主播放器：使用 HTML5 <video> 标签播放主内容。
  • 插播逻辑 (JavaScript 实现)

---

五、 实验总结与技术亮点

1. 全链路生态

   • 实现了从 广告主(Ad Owner) -> 平台(Ad Server) -> 媒体(Publisher) -> 受众(User) 的完整商业闭环模拟。

2. 匿名精准追踪

   • 利用 Cookie 标识唯一用户，在不同域名（服务器）之间共享用户兴趣画像，实现了在“未登录状态下”的个性化推荐。

3. 多样化展示技术

   • DOM 渲染：处理 Banner、Sidebar、Card 三种响应式版式。
   • 流媒体控制：通过 JS 控制视频流的中断、MIME 类型匹配与恢复播放。