广告管理

广告管理

DoraCMS 提供了完善的广告管理系统，支持多种广告类型和展示方式，帮助你轻松管理网站广告位。

广告管理概述

功能特点

• 多种广告类型：支持图片广告、轮播广告等
• 灵活配置：可设置广告尺寸、链接、展示位置
• 状态管理：启用/禁用广告
• 批量管理：支持批量创建和管理广告单元

广告位管理

创建广告位

1. 进入"内容管理" → "广告管理"
2. 点击"新增广告位"按钮
3. 填写广告位信息

基本配置

广告位名称 (name)：

• 用于标识广告位
• 建议使用有意义的名称，如"首页顶部轮播"、"侧边栏广告"

广告位类型 (type)：

• 根据展示位置选择合适的类型
• 常见类型：banner、sidebar、popup 等

广告位高度 (height)：

• 设置广告位的高度（像素）
• 建议根据设计稿设置合适的尺寸

是否轮播 (carousel)：

• true：启用轮播功能，多个广告自动切换
• false：固定显示单个广告

状态 (state)：

• true：启用，广告位生效
• false：禁用，广告位不显示

备注 (comments)：

• 添加广告位的说明信息
• 方便团队协作和后期维护

配置示例

{
  "name": "首页顶部轮播",
  "type": "banner",
  "height": 400,
  "carousel": true,
  "state": true,
  "comments": "首页顶部大图轮播广告，建议尺寸 1920x400"
}

广告单元管理

每个广告位可以包含多个广告单元（items），每个广告单元代表一个具体的广告内容。

广告单元配置

标题 (title)：

• 广告的标题文字
• 用于 SEO 和无障碍访问

链接地址 (link)：

• 点击广告跳转的目标 URL
• 支持站内链接和外部链接

图片地址 (sImg)：

• 广告图片的 URL
• 建议使用 CDN 加速

图片描述 (alt)：

• 图片的替代文字
• 用于 SEO 优化和无障碍访问

图片尺寸：

• width：图片宽度（像素）
• height：图片高度（像素）

打开方式 (target)：

• _blank：新窗口打开
• _self：当前窗口打开

移动端配置（可选）

App 链接 (appLink)：

• 移动端 App 内的跳转链接
• 支持自定义协议（如 myapp://page/detail）

App 链接类型 (appLinkType)：

• 定义链接的打开方式
• 如：内部页面、外部浏览器等

广告单元示例

{
  "title": "春季促销活动",
  "link": "https://example.com/promotion",
  "sImg": "https://cdn.example.com/ads/spring-sale.jpg",
  "alt": "春季促销 全场5折起",
  "width": 1920,
  "height": 400,
  "target": "_blank",
  "appLink": "myapp://promotion/spring",
  "appLinkType": "internal"
}

创建完整广告

步骤说明

1. 创建广告位
   • 设置广告位基本信息
   • 选择是否启用轮播

1. 添加广告单元
   • 上传广告图片
   • 配置跳转链接
   • 设置图片尺寸和描述

1. 保存并启用
   • 保存配置
   • 启用广告位状态

完整示例

{
  "name": "首页轮播广告",
  "type": "banner",
  "height": 400,
  "carousel": true,
  "state": true,
  "comments": "首页顶部轮播，3张图片自动切换",
  "items": [
    {
      "title": "新品上市",
      "link": "https://example.com/new-products",
      "sImg": "https://cdn.example.com/ads/new-1.jpg",
      "alt": "新品上市 限时优惠",
      "width": 1920,
      "height": 400,
      "target": "_blank"
    },
    {
      "title": "会员专享",
      "link": "https://example.com/vip",
      "sImg": "https://cdn.example.com/ads/vip-2.jpg",
      "alt": "会员专享 额外折扣",
      "width": 1920,
      "height": 400,
      "target": "_blank"
    },
    {
      "title": "限时秒杀",
      "link": "https://example.com/flash-sale",
      "sImg": "https://cdn.example.com/ads/sale-3.jpg",
      "alt": "限时秒杀 每日10点",
      "width": 1920,
      "height": 400,
      "target": "_blank"
    }
  ]
}

管理广告

查看广告列表

在广告管理页面可以：

• 查看所有广告位
• 按类型筛选
• 按状态筛选
• 搜索广告位名称

编辑广告

1. 在列表中找到要编辑的广告位
2. 点击"编辑"按钮
3. 修改广告位或广告单元信息
4. 保存更改

注意：

• 编辑时可以添加新的广告单元
• 可以修改现有广告单元
• 修改后立即生效

删除广告

删除广告位：

• 选择要删除的广告位
• 点击"删除"按钮
• 确认删除操作

注意：删除广告位会同时删除其下的所有广告单元，请谨慎操作。

广告展示

前端调用

在前端模板中调用广告：

<!-- 获取广告位数据 -->
<div class="ad-banner">
  <!-- 根据广告位配置渲染 -->
  <% if (adSpace.carousel) { %>
    <!-- 轮播广告 -->
    <div class="carousel">
      <% adSpace.items.forEach(item => { %>
        <div class="carousel-item">
          <a href="<%= item.link %>" target="<%= item.target %>">
            <img src="<%= item.sImg %>" 
                 alt="<%= item.alt %>"
                 width="<%= item.width %>"
                 height="<%= item.height %>">
          </a>
        </div>
      <% }) %>
    </div>
  <% } else { %>
    <!-- 单个广告 -->
    <% if (adSpace.items[0]) { %>
      <a href="<%= adSpace.items[0].link %>" target="<%= adSpace.items[0].target %>">
        <img src="<%= adSpace.items[0].sImg %>" 
             alt="<%= adSpace.items[0].alt %>">
      </a>
    <% } %>
  <% } %>
</div>

轮播配置

如果启用了轮播功能，建议配置：

// 轮播参数示例
{
  autoplay: true,        // 自动播放
  interval: 3000,        // 切换间隔（毫秒）
  loop: true,            // 循环播放
  showIndicators: true,  // 显示指示器
  showArrows: true       // 显示箭头
}

最佳实践

图片优化

1. 尺寸规范
   • 根据广告位高度设置合适的图片尺寸
   • 保持图片宽高比一致
   • 建议使用 1920px 宽度的图片

1. 文件大小
   • 压缩图片以提高加载速度
   • 建议单张图片不超过 200KB
   • 使用 WebP 格式可进一步减小文件大小

1. CDN 加速
   • 将广告图片上传到 CDN
   • 提高图片加载速度
   • 减轻服务器压力

链接管理

1. 链接有效性
   • 定期检查广告链接是否有效
   • 避免死链接影响用户体验

1. 跟踪统计
   • 在链接中添加统计参数
   • 跟踪广告点击效果
   • 示例：https://example.com/page?utm_source=banner&utm_campaign=spring

1. 安全性
   • 避免链接到不安全的网站
   • 使用 HTTPS 协议
   • 验证外部链接的可信度

内容规范

1. 标题和描述
   • 使用清晰、吸引人的标题
   • 填写准确的 alt 描述
   • 有助于 SEO 和无障碍访问

1. 更新频率
   • 定期更新广告内容
   • 保持广告的新鲜度
   • 根据活动周期调整广告

1. A/B 测试
   • 测试不同的广告创意
   • 分析点击率和转化率
   • 优化广告效果

常见问题

广告不显示

问题：前端页面广告位没有显示

解决方案：

1. 检查广告位状态是否为启用（state: true）
2. 确认广告位是否包含广告单元
3. 检查前端模板是否正确调用广告数据
4. 查看浏览器控制台是否有错误信息

图片加载失败

问题：广告图片无法显示

解决方案：

1. 检查图片 URL 是否正确
2. 确认图片文件是否存在
3. 检查图片服务器是否正常
4. 验证图片 URL 是否可访问（跨域问题）

轮播不工作

问题：设置了轮播但不自动切换

解决方案：

1. 确认 carousel 设置为 true
2. 检查是否有多个广告单元（至少2个）
3. 查看前端轮播插件是否正确初始化
4. 检查浏览器控制台的 JavaScript 错误

链接跳转异常

问题：点击广告链接无法正常跳转

解决方案：

1. 检查链接地址是否正确
2. 确认 target 属性设置正确
3. 检查是否有 JavaScript 阻止默认行为
4. 验证链接是否被浏览器拦截（弹窗拦截）