分发系统前端简要概述

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将广告异步输出到页面

加载策略

第三方接入方案

  • 通过mis配置
  • iframe
    • 第三方提供广告地址,并加载数据通信和统计的脚本
    • 我方嵌入广告,通过互相通信确定是否加载成功
    • 优缺点:样式多样化,存在错误加载
  • api接入数据
    • 第三方后端将数据接入我方后端
    • 我方后端返回数据,展示广告
    • 优缺点:解决错误加载,只能使用我方样式

数据统计

  • ui层uv统计
    • 在ui层根据解析的数据发送统计
    • 此数据用户商业结算
  • 前端普通uv统计
    • 前端广告渲染成功后发送统计
    • 此数据用于内部查看
  • 前端精确统计
    • 广告进入屏幕内才发送统计
    • 此数据用于内部查看

Thanks!

ad system description

By leegend

ad system description

  • 185