# AdLandingHub-多站点广告落地页系统

**Repository Path**: gabr/AdLandingHub

## Basic Information

- **Project Name**: AdLandingHub-多站点广告落地页系统
- **Description**: 一个基于 PHP 的多站点落地页管理系统，支持通过可视化编辑器创建和管理多个子站点。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-02-18
- **Last Updated**: 2025-03-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 多站点落地页项目

## 项目介绍

这是一个支持多站点落地页的管理系统，可以通过子域名方式部署多个落地页。系统提供了模板管理、落地页编辑、资源管理、访问统计等功能。

### 主要功能

- 模板管理：创建和编辑落地页模板
- 落地页管理：基于模板创建和编辑落地页
- 资源管理：上传和管理图片、视频等资源
- 访问统计：记录和展示访问量和点击量
- SEO 优化：支持设置 meta 标签等 SEO 信息

### 技术栈

- 前端：HTML5, CSS3, JavaScript
- 后端：PHP
- 数据库：MySQL
- 服务器：支持 Apache 或 Nginx

## 项目结构

```
project/
├── admin/                 # 管理后台
│   ├── css/              # 后台样式文件
│   ├── js/               # 后台JavaScript文件
│   │   └── ace/          # ACE编辑器
│   └── src/              # 后台源代码
├── includes/             # PHP公共函数和类
├── templates/            # 落地页模板
│   └── drone-ads/        # 示例模板
│       ├── index.html    # 模板主文件
│       └── resources/    # 模板资源文件
├── landing_pages/        # 已创建的落地页
├── assets/              # 公共资源文件
├── config/              # 配置文件
│   └── database.php     # 数据库配置
├── sql/                 # SQL文件
│   └── visit_stats.sql  # 统计相关数据表
└── README.md            # 项目文档
```

## 安装和配置

1. 克隆项目到本地
2. 配置 Web 服务器（Apache/Nginx）支持子域名
3. 配置数据库连接（config/database.php）
4. 导入数据库表（sql/visit_stats.sql）
5. 设置目录权限（uploads/和 landing_pages/需要写入权限）

## 使用说明

1. 访问管理后台：http://yourdomain.com/admin/
2. 创建模板或使用现有模板
3. 创建落地页，设置子域名
4. 编辑落地页内容，上传资源
5. 通过子域名访问落地页：http://subdomain.yourdomain.com/

# 落地页模板制作规范

## 1. 基本结构

模板必须包含以下基本文件结构：

```
template-name/
├── index.html      # 主页面文件
└── resources/      # 资源文件夹
    └── resources.json  # 资源配置文件
```

## 2. HTML 文件规范

### 2.1 基本要求

- 使用 HTML5 文档类型
- 使用 UTF-8 字符编码
- 包含响应式视口设置
- 使用语义化 HTML 标签
- 所有样式应内嵌在 style 标签中，便于整体修改

### 2.2 SEO 优化

必须在 head 标签中包含以下 SEO 相关标签：

```html
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>页面标题</title>
<meta name="description" content="页面描述" />
<meta name="keywords" content="关键词1,关键词2" />
<meta name="author" content="作者" />
<meta name="robots" content="index, follow" />
```

### 2.3 可编辑文本

所有需要用户编辑的文本内容必须使用 data-editable 属性标记：

```html
<h1 data-editable="unique-id" data-label="显示名称">默认文本</h1>
```

- data-editable：唯一标识符，用于在编辑器中识别和更新文本
- data-label：在编辑器中显示的字段名称，应该清晰描述文本的用途

### 2.4 图片和视频资源

所有媒体元素必须：

- 放置在 resources 目录下
- 包含 alt 属性用于 SEO 优化
- 使用响应式设计（如 max-width: 100%）
- 支持在资源管理面板中修改 alt 文本

```html
<img src="resources/image.jpg" alt="图片描述" />
<video controls poster="resources/video-thumb.jpg">
  <source src="resources/video.mp4" type="video/mp4" />
</video>
```

### 2.5 样式规范

- 使用 CSS 变量定义主题颜色和关键样式

```css
:root {
  --primary-color: #value;
  --secondary-color: #value;
  --text-color: #value;
  --background-color: #value;
}
```

- 必须包含响应式布局

```css
@media (max-width: 768px) {
  /* 平板设备样式 */
}

@media (max-width: 480px) {
  /* 移动设备样式 */
}
```

## 3. 资源管理

### 3.1 resources.json

资源配置文件必须包含以下信息：

```json
{
  "images": [
    {
      "filename": "image.jpg",
      "description": "图片描述",
      "alt": "SEO图片描述"
    }
  ],
  "videos": [
    {
      "filename": "video.mp4",
      "thumbnail": "video-thumb.jpg",
      "description": "视频描述"
    }
  ]
}
```

### 3.2 资源命名规范

- 使用小写字母和连字符
- 文件名应描述性且简洁
- 示例：hero-banner.jpg, product-video.mp4

## 4. 性能优化

- 图片应进行适当压缩
- 视频应提供预览图（poster 属性）
- 使用适当的图片格式（JPG 用于照片，PNG 用于图标和透明图片）
- 避免使用过大的资源文件

## 5. 交互设计

- 所有可点击元素必须有悬停状态反馈
- 动画效果应适度，避免过度干扰
- 确保所有交互元素都有合适的触摸区域（建议至少 44x44px）

## 6. 最佳实践

- 保持代码整洁，使用适当的缩进
- 添加必要的注释说明复杂的逻辑
- 确保所有链接都使用相对路径
- 避免使用内联样式
- 确保所有图片和视频都有合适的备用内容

## 7. 测试要求

- 在主流浏览器中测试（Chrome, Firefox, Safari, Edge）
- 测试不同设备尺寸下的响应式布局
- 确保所有可编辑文本正常工作
- 验证所有 SEO 标签是否正确设置
- 检查所有资源是否正确加载

## 8. 访问和点击统计

### 8.1 统计代码集成

所有模板必须在底部添加统计代码，用于记录页面访问和按钮点击：

```javascript
// 统计代码基本结构
<script>
  // 获取子域名函数
  function getSubdomain() {
    const hostname = window.location.hostname;
    const parts = hostname.split(".");
    return parts.length > 2 ? parts[0] : "";
  }

  // 记录访问函数
  function recordVisit() {
    const subdomain = getSubdomain();
    if (!subdomain) return;
    fetch("/includes/record_visit.php", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: `page_id=${encodeURIComponent(subdomain)}`
    });
  }

  // 记录点击函数
  function recordClick(element) {
    const subdomain = getSubdomain();
    if (!subdomain) return;

    // 获取元素标识信息
    let elementId = "";
    if (element.classList.contains("cta-button")) {
      elementId = "cta-button:" + element.textContent.trim();
    } else if (element.href) {
      elementId = "link:" + element.href;
    } else {
      elementId = element.id || element.getAttribute("data-click-id") || element.textContent.trim();
    }

    fetch("/includes/record_click.php", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: `page_id=${encodeURIComponent(subdomain)}&element_id=${encodeURIComponent(elementId)}`
    });
  }

  // 初始化统计
  document.addEventListener("DOMContentLoaded", function() {
    recordVisit();
    document.querySelectorAll("a, button").forEach(element => {
      element.addEventListener("click", function() {
        recordClick(this);
      });
    });
  });
</script>
```

### 8.2 可点击元素规范

- 所有可点击元素（链接、按钮等）必须能被统计代码识别
- 建议为重要按钮添加特定的 class 或 id，便于统计分析
- CTA 按钮应使用`cta-button`类名
- 悬浮按钮应使用描述性的类名（如`floating-coin-box`）
- 轮播图导航点应使用`carousel-dot`类名

### 8.3 统计数据格式

- 访问记录：

  - page_id：落地页标识（子域名）
  - visitor_ip：访问者 IP
  - visit_date：访问日期
  - visit_time：访问时间
  - user_agent：用户代理信息

- 点击记录：
  - page_id：落地页标识（子域名）
  - visitor_ip：访问者 IP
  - click_date：点击日期
  - click_time：点击时间
  - click_element：点击的元素标识

### 8.4 元素标识命名规范

- CTA 按钮：`cta-button:按钮文本`
- 链接：`link:链接地址`
- 轮播图按钮：`carousel-prev`或`carousel-next`
- 轮播图导航点：`carousel-dot:索引号`
- 自定义元素：使用`data-click-id`属性定义唯一标识

## 9. 注意事项

- 不要删除或修改 data-editable 属性
- 保持 HTML 结构清晰，避免过度嵌套
- 确保所有文本内容都可以通过编辑器修改
- 资源文件更新时注意保持引用路径一致
- 确保统计代码正确集成并能捕获所有交互事件