分发系统前端简要概述

mis系统

• 基本数据要素
• 投放及流量切分

1.基本数据要素

• tpl_name（模板类型）
• params（模板参数）

模板级别：

// 模板参数示例

{

    banner_url: "http://www.example.com/images/ad_banner.jpg",

    title: "感恩有礼，活动有你",

    ad_link: "http://www.adowner.com/activity/520",

    ad_owner_text: "广告投放者"

}

1.基本数据要素

• client_type（端名 eg. pc）
• page（页面名 eg. index）
• locate（位置名 eg. banner)

位置级别：

  物理位置

• category（投放目录 eg. game）
• people（投放人群 eg. male）

  抽象位置

1.基本数据要素

• first_class（一级分类）
• second_class（二级分类）

投放标识级别：

eg.

游戏合作商

  -  valve

  -  battlenet

咨询类

  -  infoQ

  -  zhihu

其他

2.投放及流量切分

1. 选择模板类型，配置参数
2. 选择投放位置
3. 选择投放流量类型

投放流程：

简介：对于同一位置投放了多个投放商广告的情况，需要根据一定策略来确定展示哪个广告

流量切分：

1. 选择流量切分类型（如按权值随机展示、按权值优先展示等）
2. 设置相应权值
3. 投放量达成的情况，则选择第一级权值的广告投放

前端模块

• 总入口：加载器
• 同步、异步加载

1.总入口：加载器

• 在需要投放广告的代码位置添加loader
• 传入参数
  • 位置名

加载器loader

// .eg 添加loader代码

loader({

  // 位置名，各位置参数拼接所得

  locate_name: 'pc_index_banner'

});

1.总入口：加载器

• loader根据位置名获取数据

加载器loader

// .eg ad数据结构

{

  'pc_index_search_right': {...},// 搜索框右侧

  'pc_index_banner': {

    tpl_name: 'tpl_1',

    tpl_params: {

      title: 'ad title',

      link: 'http://www.adtest.com',

      img_src: 'http://www.adtest.com/xxx.jpg'

    },

    is_async: 0,

    //....

  },

  'pc_index_footer': {...}

}

1.总入口：加载器

• 模板拼接
• 防屏蔽策略
  • 随机生成id名（adid），且样式内联
  • 避免统一属性

// .eg tpl_1

<div id="<%= adid %>">

  <p><%= title %></p>

  <a href="<%= link %>">

    <img src="<%= img_src %>" />

  </a>

</div>

<style>

#<%= adid %> {

...

}

</style>

// .eg tpl_params

{

  title: 'ad title',

  link: 'http://www.adtest.com',

  img_src: 'http://www.adtest.com/xxx.jpg'

}

加载器loader

2.同步、异步加载

• is_async //server返回此字段确定加载策略
• 默认策略
  • 首屏广告使用同步加载
  • 非首屏使用异步加载

加载策略

2.同步、异步加载

• 同步加载策略
  • 将广告html直接输出到页面
• 异步加载策略
  • 将广告html传入js中
  • 由js将广告异步输出到页面

加载策略