DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2016-06-29 16:25
  • 更新:2016-06-29 16:25
  • 阅读:47049

百度联盟广告集成示例

分类:MUI

更新:DCloud广告联盟已上线,请参考http://ask.dcloud.net.cn/article/13084

 
 
 
 
 
 
 
 
=====以下为过期内容,DCloud不再推荐集成百度的wap广告,很容易被封==========

申请百度联盟账号

打开百度联盟,申请账号;已有账号的话,直接登录即可。

创建代码位

登录百度联盟后,点击“合作管理”-->“创建代码位”,输入代码位名称(例如:"my first ad"),投放平台选择“移动网页”,然后选择合适的展现尺寸,Hello MUI选择的是20:3尺寸,如下:
image

样式配置根据个人喜好选择即可,最后点击“新建”按钮完成代码位的创建,然后会弹框提示获取代码位,将对应代码复制到剪贴板;

image

投放代码位到wap站

百度广告联盟会校验广告位投放的真实性(有效域名或公网IP),因此需要找一个真实wap站点,创建一个单独的广告页面,将刚才创建的代码位复制进去,供百度广告联盟校验,否则可能会失败;如我们将刚申请的广告代码复制到http://dcloud.io/ad/

注意:wap站点的广告页面仅为百度校验所用,可以没有真实内容,但为了匹配关键字,建议在meta标签中设置好keywords、description,具体写法参考http://dcloud.io/ad/源码。

集成广告位到5+ App

参考Hello MUI中的ad.html,修改参数为自己的广告位参数(代码注释中标注为需修改的部分,其它部分无需修改),需修改的参数如下:

  • cpro_id:百度联盟申请的代码位ID
  • ltu:广告投放的WAP站地址
  • title:广告投放的wap页面标题
  • adHeight:广告高度,3/20需替换为自己申请的广告尺寸

完整代码如下:

//屏幕真实宽度  
var width = window.innerWidth;  
var height = window.innerHeight;  

/*---需要开发者修改的内容---begin*/  
//百度联盟申请的广告位id  
var cpro_id = "u2206321";  
//广告投放WAP站地址  
var ltu = encodeURIComponent('http://www.dcloud.io/ad/');  
//投放广告的WAP站页面标题  
var title = encodeURIComponent('DCloud HBuilder-做最好的HTML5开发工具||MUI-最接近原生体验的高性能前端框架');  
//根据投放广告的比例,计算广告高度,Hello MUI选择的广告位是20:3尺寸  
var adHeight = parseInt(width)*3/20;  
/*---需要开发者修改的内容---end*/  

//百度广告地址  
var p = ["acom","icxm","tcmm","icfm","mcum"];  
var t = new Date().getTime();  
var url = "http://pos.baidu.com/"+p[parseInt(5*Math.random())]+"?dc=2&dri=0&dis=0&dai=1&ps=0x0&dcb=BAIDU_SSP_define&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr="+t+"&ari=1&dbv=2&drs=1&cfv=0&cpl=0&chi=4&cce=true&cec=UTF-8&tlm=1437985083&ecd=1&pis=-1x-1&ccd=24&cja=false&cmi=0&col=en-US&cdo=0&tcn=1467173621&qn=d5d5b72998fc778b&tt=1467173620584.25.60.68";  
url += "&sz="+width+"x"+adHeight;  
url +="&rdid="+cpro_id.substring(1);  
url +="&di="+cpro_id;  
url +="&ti="+title;  
url +="&ltu="+ltu;  
url +="&psr="+window.screen.availWidth+"x"+window.screen.availHeight+"&par="+window.screen.availWidth+"x"+window.screen.availHeight;  
url +="&pcs="+window.outerWidth+"x"+window.outerHeight+"&pss="+window.outerWidth+"x0";  
url +="&rw="+Math.max(320, Math.min(window.innerWidth, window.innerHeight));  

var adBottom = mui.os.ios?('-'+adHeight+'px'):'0';  

var ad = plus.webview.create(url,'ad',{height:adHeight+'px',bottom:adBottom,position:"absolute"});  
//目前Android平台不支持子webview的setStyle动画,因此分平台处理;  
if(mui.os.ios){  
    //为了支持iOS平台左侧边缘滑动关闭页面,需要append进去;  
    plus.webview.currentWebview().append(ad);  
    ad.addEventListener('loaded',function () {  
        ad.setStyle({  
            bottom:'0',  
            transition: {  
                duration: 150  
            }  
        });  
    });  
}else{  
    ad.addEventListener('loaded',function () {  
        ad.show('slide-in-bottom');  
    });  
}  

ad.appendJsFile('_www/js/ad.js');  

//设置主页面的底部留白,否则会被遮住;  
document.querySelector('.mui-content').style.paddingBottom = adHeight + 'px';  

完整源码参考:github

注意:为了解决广告点击打开的问题,需注入ad.js,注意不要遗漏该js文件,并注意ad.js的目录结构。

5 关注 分享
深井冰_01 五块钱的果汁 水域心诚 Trust Mjc

要回复文章请先登录注册

咆哮的企鹅

咆哮的企鹅

是否有实际应用到app的小伙伴?百度联盟是否能正常收到钱?求科普!
2017-04-23 19:47
331319769@qq.com

331319769@qq.com

感觉没卵用 人家找到你的html文件一下子就去掉你的广告!!
2017-02-20 14:32
43526873@qq.com

43526873@qq.com

回复 43526873@qq.com:
试出来了,body不存在,ad.js需改为document.addEventListener
2017-02-09 16:10
43526873@qq.com

43526873@qq.com

IOS下有问题,不能在外部浏览器里打开
2017-02-09 15:50
Mjc

Mjc

4787
2016-12-05 16:23
五块钱的果汁

五块钱的果汁

回复 天天音符:
需要申请网站
2016-10-15 12:21
天天音符

天天音符

请问应该申请百度的哪种帐号类型?网站 or 应用?谢谢!
2016-07-27 22:16