渲染引擎文档说明 - acelan86/pandora GitHub Wiki

渲染引擎由nodejs提供服务，实现从输入的json格式数据转换成创建广告的js代码或者html或者一个静台池中的url地址

接口

投放广告说明

adbox生成的物料只支持在sina.com.cn的主域下投放，为了微博接口的正常登录信息获取，因此，只能通过下面的方式投放广告：

<iframe src="adbox ad url" frameborder="0" style="width:xx;heigh:xx"></iframe>

另外，adbox提供了几个投放中控制的外部参数接口

  • hidelogo 1-不显示 0-显示adboxlogo
  • logopos adboxlogo显示的位置， rt-右上角 lt-左上角 lb-左下角 rb-右下角
  • api_exu adbox点击监测地址，会把广告上的所有点击发送到这个参数指定的地址，注意需要经过encodeURIComponent处理

以上参数的添加方式如下：

<iframe src="adbox ad url?hidelogo=1&logopos=rt&api_exu=click1" frameborder="0" style="width:xx;heigh:xx"></iframe>

注意：如果担心url的长度由于添加了点击监控地址而过长的话，adbox还提供了下面的方式来传递api_exu参数，同时，不管在url还是name上的api_exu都支持传入多个不同的点击监测地址，使用&分隔即可

<iframe src="adbox ad url?hidelogo=1&logopos=rt" name="api_exu=click1&api_exu=click2&api_exu=click3" frameborder="0" style="width:xx;heigh:xx"></iframe>

api_exu说明

如上面说明，api_exu为用户交互时发送交互日志的接收地址，api_exu支持模版写法，可以通过模版变量将adbox生成的广告所能获得的信息传递给接收端，如：

   //encodeURIComponent，这里占用以下mediav的url版权
  api_exu=http%3A%2F%2Fshow.g.mediav.com%2Fc%3Fmoet%3D%7B__moet__%7D%26moel%3D%7B__moel__%7D%26type%3D2%26oimpid%3Dm2zaXHpdrDud%26pub%3D166_513643_1020113%26cus%3D3_128218_1113509_10362778_10362778001%26fee%3DSgmeJG-UUUP6%26pinfo%3D%26ref%3D(null)%26url%3Dhttp%3A%2F%2Fwww.mediav.com
   //上面的参数decode后如下
   api_exu=http://show.g.mediav.com/c?moet={__moet__}&moel={__moel__}&type=2&oimpid=m2zaXHp…8_10362778001&fee=SgmeJG-UUUP6&pinfo=&ref=(null)&url=http://www.mediav.com

对于上面的api_exu, {__moet__}和{__moel__}会在用户点击行为发生的时候被替换成实际的值，比如点击了微博关注按钮，这里会被分别替换成click（事件类型）和wbf (weibo focus), 发出的记录如下：

 http://show.g.mediav.com/c?moet=click&moel=wbf&type=2&oimpid=m2zaXHp…8_10362778001&fee=SgmeJG-UUUP6&pinfo=&ref=(null)&url=http://www.mediav.com

moet moel为adbox所能获取到的交互信息的key，其他的key如下：

字段 描述 替换符号
ck 是否支持cookie {__ck__}
cl 屏幕色深 {__cl__}
ds 分辨率 {__ds__}
ep 时间发生坐标 {__ep__}
ln 操作系统语言版本 {__ln__}
rnd 事件发生时间 {__rnd__}
ti 来源，-6，mediaV {__ti__}
moel 交互相关元件类型 {__moel__}
moet 交互事件类型 {__moet__}
mocnt 交互事件附加信息，比如a链接会附带url作为附加信息，可能为空 {__mocnt__}

content说明（json）

###　整体框架结构 这部分json说明了整个框架全局的配属性

{
    "wb": 0,                //广告中是否有weibo相关元素：0或不存在这个属性字段表示没有，如果广告中有微博元素，这里的值为微博昵称，全局所有微博元素共享唯一一个微博信息
    "width": "300",         //广告宽度
    "height": "250",        //广告高度
    "bgcolor": "#ad2626",   //全局背景颜色
    "border": "1|1|1|1",    //广告是否有边框，分别为上，右，下，左顺序每个边框的宽度（单位:px）,以“|”分隔
    "borderColor": "#000",  //边框颜色，暂不支持多种边框颜色
    "objs": [ ... ]         //"objs"是一个数组，该广告中包含的所有基本组件的描述，具体描述见下面组件说明
}

元件

元件是adbox中最小的单元集合，每个组件的数据结构如下面说明：

矩形

        {
            "type": "Retangle",   //元件类型“Retangle”表明是一个矩形元件
            //options是改元件的具体参数说明
            "options": {
                "w": 90,  //宽
                "h": 60,  //高
                "x": 75,  //x坐标，以广告左上角为0，0
                "y": 27,  //y坐标，以广告左上角为0，0
                "z": 11,  //z坐标，在广告各个元件中的纵向层级，也就是z-index
                "bgcolor": "#ccc",   //矩形的背景颜色
                "font": {            //字体样式，这里根css的语法一致
                    "font-family": "Arial"
                },
                "color": "#333",     //内容颜色
                "opacity": 0         //透明度0-100，与css中的opacity相反
            },
            "uid": "stage-obj11372386602370"   //用来唯一标识某个元件的key，自行生成即可，一般用于有事件处理的时候，建议加上
        }

文字

{
    "type": "Txt",   //元件类型“Txt”：表示是一个文本类型元件
    "options": {
        "w": 160,
        "h": 90,
        "x": 0,
        "y": 0,
        "z": 12,
        "font": {
            "font-family": "SimSun",
            "font-size": 10,
            "font-weight": "normal",
            "font-style": "normal",
            "text-decoration": "none"
        },
        "color": "#b84040",
        "opacity": 23,
        "text": "双击修改文字内容...",  //文本内容 
        "url": "http://sina.com"     //文本链接，如果没有url属性，则文本为一个普通文本，不可点击
    },
    "uid": "stage-obj21372386971065"
}

按钮

{
    "type": "Btn",   //元件类型
    "options": {
        "w": 60,
        "h": 20,
        "x": 114,
        "y": 80,
        "z": 13,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "text": "按钮",    //按钮文字
        "type": "button", //按钮类型：“button”-普通按钮， “submit”-提交按钮，“reset”-“重置按钮”
        "skin": "default", //按钮样式，值为'default', 'lightblue', 'red', 'green', 'blue', 'gorden', 'black'中的某一个
        "url" : "http://baidu.com" //点击按钮后跳转链接
    },
    "uid": "stage-obj31372387132046"
}

图片

{
    "type": "Img",  
    "options": {
        "w": 200,
        "h": 150,
        "x": 0,
        "y": 0,
        "z": 14,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        //图片资源配置项
        "src": {
            "url": "http://adbox.sina.com.cn/maker/assets/img/adbox-default.png", //图片地址
            "width": 200,   //图片原始宽度，区别与上面的w-展现宽度度
            "height": 150   //图片原始高度，同上
        },
        "link": "http://baidu.com"   //图片点击跳转地址，这里由于历史原因，没有使用url统一
    },
    "uid": "stage-obj41372387365540"
}

二维码(与图片类似，因为二维码被认为是生成的一张二维码图片，源码上通过img继承)

{
    "type": "Qrcode",
    "options": {
        "w": 60,
        "h": 60,
        "x": 0,
        "y": 0,
        "z": 16,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "src": {
            "url": "http://sinastorage.com/sandbox/qr/2497.png",
            "width": 60,
            "height": 60
        },
        "link": "http://sina.com"
    },
    "uid": "stage-obj61372387603935"
}

视屏

{
    "type": "Video",
    "options": {
        "w": 300,
        "h": 250,
        "x": 0,
        "y": 0,
        "z": 17,
        "color": "#333",
        "opacity": 0,
        //视屏资源配置
        "src": {
            "url": "http://img.adbox.sina.com.cn/vod/251.flv",  //视屏资源地址，目前只支持flv格式视频
            "width": 300,
            "height": 250
        },
        "link": "http://baidu.com",
        //视频定帧图配置，【可选】
        "pic": {
            "url": "http://s3.adbox.sina.com.cn/pic/5585.jpg",  //定帧图地址，就是当暂停播放时显示的图片，图片内容有福利哦（你懂得。。。哈哈哈哈）
            "width": 320,
            "height": 480
        }
    },
    "uid": "stage-obj71372387714917"
}

flash

{
    "type": "Fla",
    "options": {
        "w": 300,
        "h": 250,
        "x": 0,
        "y": 0,
        "z": 18,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "src": {
            "url": "http://adbox.sina.com.cn/maker/assets/img/adbox-default.swf",
            "width": 300,
            "height": 250
        },
        "link": "http://sina.com"
    },
    "uid": "stage-obj81372387946247"
}

==== 下面内容是微博相关元件说明

注意，如果在页面上使用了微博元素，则在全局的框架中必须存在一个wb字段，值为微博昵称字符串

微博关注

{
    "type": "Wbfocus",
    "options": {
        "w": 60,
        "h": 20,
        "x": 128,
        "y": 45,
        "z": 19,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "nick": "新浪功能广告平台", //微博相关信息会根据nick获取
        "skin": "v3"             //关注按钮皮肤“default”， “v3”，“v4”
        "mou" : "http://click.sina.com.cn/wbf/1" //针对该元件的点击监测地址
    },
    "uid": "stage-obj91372388028161"
}

微博昵称

{
    "type": "Wbnick",
    "options": {
        "w": 120,
        "h": 20,
        "x": 51,
        "y": 87,
        "z": 21,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "nick": "新浪功能广告平台", 
    },
    "uid": "stage-obj111372388333298"
}

微博关系

{
    "type": "Wbrelation",
    "options": {
        "w": 200,
        "h": 60,
        "x": 11,
        "y": 155,
        "z": 22,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "nick": "新浪功能广告平台",
        "showAvatar": 0,   //是否在微博关系的昵称下面显示小头像
        "max": 4           //最大显示多少个关系昵称和头像
    },
    "uid": "stage-obj121372388349603"
}

微博转发

{
    "type": "Wbrepos",
    "options": {
        "w": 40,
        "h": 20,
        "x": 225,
        "y": 18,
        "z": 23,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "nick": "新浪功能广告平台",
        "post": {
            "id": "123456" //转发文章的id
        }
    },
    "uid": "stage-obj131372388350241"
}

微博分享

{
    "type": "Wbshare",
    "options": {
        "w": 40,
        "h": 20,
        "x": 221,
        "y": 102,
        "z": 24,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "nick": "新浪功能广告平台",
        "pic": "http://xxx.com/image.png",  //分享图片
        "text": "xxxx"   //分享内容
    },
    "uid": "stage-obj141372388366702"
}

==== 下面为看到广告的登录用户相关元件

用户昵称

{
    "type": "Usernick",
    "options": {
        "w": 120,
        "h": 20,
        "x": 0,
        "y": 0,
        "z": 26,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "beforelogin": "你好，尊敬的用户",  //用户登录前显示的文本
        "afterlogin": "${nick}"          //用户登录后显示的文本，${nick}表示登陆后实际的用户登录名，如：“${nick}, 你真是大天才啊，跪大神～” 用户acelan实际看到的时候是“acelan, 你真是大天才啊，跪大神～”，你也可以是使用多个${nick}来拼装不同的描述语言。
    },
    "uid": "stage-obj161372389488640"
}

用户头像

{
    "type": "Useravatar",
    "options": {
        "w": 50,
        "h": 50,
        "x": 151,
        "y": 69,
        "z": 27,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "size": "50x50" //头像大小
    },
    "uid": "stage-obj171372389489207"
}

==== 下面为轮播相关元件

图片轮播

{
    "type": "Imgslider",
    "options": {
        "w": 300,
        "h": 250,
        "x": 0,
        "y": 0,
        "z": 28,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "thumbX": 36,   //轮播小图区域x坐标
        "thumbY": 199,  //轮播小图区域y坐标
        "thumbWidth": 230,  //轮播小图区域宽度
        "thumbHeight": 46,  //轮播小图区域高度
        "thumbItemWidth": 40, //轮播小图宽度
        "thumbItemHeight": 40,//轮播小图高度
        "mainWidth": 300,  //大图宽度
        "mainHeight": 250, //大图高度
        "dir": 0,   //轮播小图区域方向，0-横向，1-纵向
        "delay": 10,  //轮播时间间隔（单位：s）
         
        //轮播图片配置，参考图片
        "items": [
            {   
                //小图
                "thumb": {
                    "url": "http://img.adbox.sina.com.cn/pic/1081.jpg",
                    "width": 300,
                    "height": 350
                },
                //大图
                "main": {
                    "url": "http://img.adbox.sina.com.cn/pic/1076.jpg",
                    "width": 300,
                    "height": 350
                },
                //点击链接
                "url": "http://sina.com"
            },
            {
                "thumb": {
                    "url": "http://img.adbox.sina.com.cn/pic/1082.jpg",
                    "width": 300,
                    "height": 350
                },
                "main": {
                    "url": "http://img.adbox.sina.com.cn/pic/1077.jpg",
                    "width": 300,
                    "height": 350
                },
                "url": "http://sina.com"
            },
            {
                "thumb": {
                    "url": "http://img.adbox.sina.com.cn/pic/1083.jpg",
                    "width": 300,
                    "height": 350
                },
                "main": {
                    "url": "http://img.adbox.sina.com.cn/pic/1078.jpg",
                    "width": 300,
                    "height": 350
                },
                "url": "http://sina.com"
            },
            {
                "thumb": {
                    "url": "http://img.adbox.sina.com.cn/pic/1084.jpg",
                    "width": 300,
                    "height": 350
                },
                "main": {
                    "url": "http://img.adbox.sina.com.cn/pic/1079.jpg",
                    "width": 300,
                    "height": 350
                },
                "url": "http://sina.com"
            },
            {
                "thumb": {
                    "url": "http://img.adbox.sina.com.cn/pic/1085.jpg",
                    "width": 300,
                    "height": 350
                },
                "main": {
                    "url": "http://img.adbox.sina.com.cn/pic/1080.jpg",
                    "width": 300,
                    "height": 350
                },
                "url": "http://sina.com"
            }
        ]
    },
    "uid": "stage-obj181372389767254"
}

页签轮播

{
    "type": "Tabslider",
    "options": {
        "w": 300,
        "h": 100,
        "x": 3,
        "y": 72,
        "z": 29,
        "font": {
            "font-family": "Arial"
        },
        "color": "#333",
        "opacity": 0,
        "layout": "1101",  //页签布局 第一位1表示是横向还是纵向（1-横向 0-纵向）后面三位表示布局（0表示主图位置，1标识页签位置，比如101表示（页签-主图-页签）），1101总体上表示“横向的从上到下为页签-主图-页签”，依此类推，有下面几种值，见后面说明。                                
        "delay": 10,
        //页签列表内容
        "items": [
            {
                //页签文字
                "text": "小图一",
                //大图
                "pic": {
                    "url": "http://img.adbox.sina.com.cn/pic/1076.jpg",
                    "width": 300,
                    "height": 250
                },
                //链接
                "url": "http://sina.com"
            },
            {
                "text": "小图二",
                "pic": {
                    "url": "http://img.adbox.sina.com.cn/pic/1077.jpg",
                    "width": 300,
                    "height": 250
                },
                "url": "http://sina.com"
            },
            {
                "text": "小图三",
                "pic": {
                    "url": "http://img.adbox.sina.com.cn/pic/1078.jpg",
                    "width": 300,
                    "height": 250
                },
                "url": "http://sina.com"
            },
            {
                "text": "小图四",
                "pic": {
                    "url": "http://img.adbox.sina.com.cn/pic/1079.jpg",
                    "width": 300,
                    "height": 250
                },
                "url": "http://sina.com"
            },
            {
                "text": "小图五",
                "pic": {
                    "url": "http://img.adbox.sina.com.cn/pic/1080.jpg",
                    "width": 300,
                    "height": 250
                },
                "url": "http://sina.com"
            },
            {
                "text": "小图六",
                "pic": {
                    "url": "http://img.adbox.sina.com.cn/pic/1080.jpg",
                    "width": 300,
                    "height": 250
                },
                "url": "http://sina.com"
            }
        ],
        "mainWidth": 180,    //主图宽度
        "mainHeight": 100    //主图高度
    },
    "uid": "stage-obj191372390083293"
}

页签轮播布局说明如下

                    { name : '一栏居上', value : '010'},
                    { name : '一栏居下', value : '001'},
                    { name : '一栏居左', value : '110'},
                    { name : '一栏居右', value : '101'},
                    { name : '两栏居上', value : '0110'},
                    { name : '两栏居下', value : '0011'},
                    { name : '两栏居左', value : '1110'},
                    { name : '两栏居右', value : '1011'},
                    { name : '两栏上下', value : '0101'},
                    { name : '两栏左右', value : '1101'}
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️