13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程:ad广告

ad 广告

解释:广告组件,按照流量主开通指引中的操作获取广告组件代码。

成都创新互联2013年至今,先为大安市等服务建站,大安市等地企业,进行企业商务咨询服务。为大安市企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

属性说明

属性名 类型 默认值 必填 说明
appidString小程序应用 ID
apidString小程序广告位 ID
typeStringfeed广告类型:banner、feed ,需和百青藤平台上的代码位类型相匹配
updatetimeString更改该属性,可以触发广告刷新
binderrorEventHandle广告组件加载失败时触发
bindloadEventHandle广告组件加载完成触发
bindcloseEventHandle关闭广告组件时触发
bindstatusEventHandle贴片类型广告播放期间触发

type 有效值

说明
banner横幅类型
feed信息流类型
pre-roll前贴类型
post-roll后贴类型

binderror 事件触发

触发时机:代码执行异常以及状态不符合广告要求。
返回参数:

代码 状态 说明
1001-1内部错误初始化失败
1001-2内部错误广告返回执行异常
1001-3内部错误渲染广告异常
1001-4内部错误广告异常
1001-5内部错误广告缓存异常
1002-1广告请求广告返回异常
1003-2无可用广告数据层级不对
1003-3无可用广告广告内容不完整
1004-1媒体接入异常web 化广告不渲染
1004-2媒体接入异常视频贴片广告组件放置不在 video 内
1004-3媒体接入异常视频贴片当前是非同层渲染

bindstatus 事件触发

触发时机:事件触发在视频贴片的情况下。
返回参数:

 
 
 
  1. statusFunc(e) {
  2. // e = {status:''} 具体如下
  3. }
属性 说明
videoend视频结束,触发时机:1、有广告返回,广告播放结束;2、无广告返回;3、广告被关闭
show广告视频播放中
close广告播放结束
noAd无广告返回

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

以下代码仅做示例,需要在百青藤平台申请代码位替换下方 appid 和 apid ,方可正常显示示例效果。

代码示例 1:横幅类型

 
 
 
  1. apid="7182322"
  2. type="banner"
  3. data-update="updatetime1"
  4. updatetime="{{updatetime1}}"
  5. binderror="binderror"
  6. bindload="bindload"
  7. bindclose="bindclose"
  8. bindstatus="bindstatus">
 
 
 
  1. Page({
  2. bindload(event) {
  3. console.log(event);
  4. },
  5. binderror(event) {
  6. const update = event.target.dataset.update;
  7. this.setData(update, `${+new Date()}`);
  8. },
  9. bindclose(event) {
  10. console.log(event);
  11. }
  12. });

代码示例 2:信息流大图类型

  • SWAN
 
 
 
  1. apid="7182323"
  2. type="feed"
  3. data-update="updatetime2"
  4. updatetime="{{updatetime2}}"
  5. binderror="binderror"
  6. bindload="bindload"
  7. bindclose="bindclose"
  8. bindstatus="bindstatus">

代码示例 3:信息流三图类型

  • SWAN
 
 
 
  1. apid="7182347"
  2. type="feed"
  3. data-update="updatetime3"
  4. updatetime="{{updatetime3}}"
  5. binderror="binderror"
  6. bindload="bindload"
  7. bindclose="bindclose"
  8. bindstatus="bindstatus">

代码示例 4:信息流左图类型

  • SWAN
 
 
 
  1. apid="7182324"
  2. type="feed"
  3. data-update="updatetime4"
  4. updatetime="{{updatetime4}}"
  5. binderror="binderror"
  6. bindload="bindload"
  7. bindclose="bindclose"
  8. bindstatus="bindstatus">

代码示例 5:信息流右图类型

  • SWAN
 
 
 
  1. apid="7182325"
  2. type="feed"
  3. data-update="updatetime5"
  4. updatetime="{{updatetime5}}"
  5. binderror="binderror"
  6. bindload="bindload"
  7. bindclose="bindclose"
  8. bindstatus="bindstatus">

代码示例 6:信息流视频类型

  • SWAN
 
 
 
  1. apid="7182334"
  2. type="feed"
  3. data-update="updatetime6"
  4. updatetime="{{updatetime6}}"
  5. binderror="binderror"
  6. bindload="bindload"
  7. bindclose="bindclose"
  8. bindstatus="bindstatus">

代码示例 7:后贴片类型

  • SWAN
 
 
 
  1. 注:后贴片广告于视频结束后随机自动播放,且仅支持播放一次;广告未出现或再次观看,请退出页面重新进入。
  2. apid="7182330"
  3. data-update="updatetime7"
  4. updatetime="{{updatetime7}}"
  5. type="post-roll"
  6. binderror="binderror"
  7. bindload="bindload"
  8. bindclose="bindclose"
  9. bindstatus="bindstatus">

代码示例 8:前贴片类型

  • SWAN
 
 
 
  1. 注:前贴片广告于视频开始前随机自动播放,且仅支持播放一次;广告未出现或再次观看,请退出页面重新进入。
  2. apid="7183268"
  3. type="pre-roll"
  4. data-update="updatetime8"
  5. updatetime="{{updatetime8}}"
  6. binderror="binderror"
  7. bindload="bindload"
  8. bindclose="bindclose"
  9. bindstatus="bindstatus">

Bug & Tip

  • Tip:从百青藤获取的代码,是 ad 组件,把这段代码,嵌入到页面中你需要展现广告的位置处,然后给他一些样式就可以,样式控制只能到 ad 这一层,内部的展示效果对小程序的开发者来说没有权限。
  • Tip:banner 样式的背景色默认透明,建议开发者自定义背景色。通过background-color: #fff自行定义。其中#fff代表白色,可以根据广告场景自行修改参数。
  • Tip:信息流广告可在百青藤平台配置四种样式:大图、多图、左图右文、右图左文。
  • Tip:视频贴片类型基于同层渲染,需基础库 3.70.x 版本以上。
  • Tip:视频前贴 iOS 11.17 之前广告的视频播放是和媒体公用一个 video ,会出现 video 事件多次触发,安卓暂无影响。
  • Tip:视频后贴 暂时和媒体公用一个 video,会出现 video 事件多次触发。
  • Tip:视频贴片广告播放期间切换 video 的 src 变化,都会导致广告中止。

当前名称:创新互联百度小程序教程:ad广告
标题网址:http://cdbrznjsb.com/article/dpcsoeg.html
  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务