创新互联百度小程序教程:ad广告
- ad 广告
- 属性说明
- type 有效值
- binderror 事件触发
- bindstatus 事件触发
- 示例
- 代码示例 1:横幅类型
- 代码示例 2:信息流大图类型
- 代码示例 3:信息流三图类型
- 代码示例 4:信息流左图类型
- 代码示例 5:信息流右图类型
- 代码示例 6:信息流视频类型
- 代码示例 7:后贴片类型
- 代码示例 8:前贴片类型
- Bug & Tip
- 属性说明
ad 广告
解释:广告组件,按照流量主开通指引中的操作获取广告组件代码。

成都创新互联2013年至今,先为大安市等服务建站,大安市等地企业,进行企业商务咨询服务。为大安市企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| appid | String | 是 | 小程序应用 ID | |
| apid | String | 是 | 小程序广告位 ID | |
| type | String | feed | 否 | 广告类型:banner、feed ,需和百青藤平台上的代码位类型相匹配 |
| updatetime | String | 否 | 更改该属性,可以触发广告刷新 | |
| binderror | EventHandle | 否 | 广告组件加载失败时触发 | |
| bindload | EventHandle | 否 | 广告组件加载完成触发 | |
| bindclose | EventHandle | 否 | 关闭广告组件时触发 | |
| bindstatus | EventHandle | 否 | 贴片类型广告播放期间触发 |
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 事件触发
触发时机:事件触发在视频贴片的情况下。
返回参数:
- JS
statusFunc(e) {// e = {status:''} 具体如下}
| 属性 | 说明 |
|---|---|
| videoend | 视频结束,触发时机:1、有广告返回,广告播放结束;2、无广告返回;3、广告被关闭 |
| show | 广告视频播放中 |
| close | 广告播放结束 |
| noAd | 无广告返回 |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
以下代码仅做示例,需要在百青藤平台申请代码位替换下方 appid 和 apid ,方可正常显示示例效果。
代码示例 1:横幅类型
- SWAN
- JS
apid="7182322"type="banner"data-update="updatetime1"updatetime="{{updatetime1}}"binderror="binderror"bindload="bindload"bindclose="bindclose"bindstatus="bindstatus">
Page({bindload(event) {console.log(event);},binderror(event) {const update = event.target.dataset.update;this.setData(update, `${+new Date()}`);},bindclose(event) {console.log(event);}});
代码示例 2:信息流大图类型
- SWAN
apid="7182323"type="feed"data-update="updatetime2"updatetime="{{updatetime2}}"binderror="binderror"bindload="bindload"bindclose="bindclose"bindstatus="bindstatus">
代码示例 3:信息流三图类型
- SWAN
apid="7182347"type="feed"data-update="updatetime3"updatetime="{{updatetime3}}"binderror="binderror"bindload="bindload"bindclose="bindclose"bindstatus="bindstatus">
代码示例 4:信息流左图类型
- SWAN
apid="7182324"type="feed"data-update="updatetime4"updatetime="{{updatetime4}}"binderror="binderror"bindload="bindload"bindclose="bindclose"bindstatus="bindstatus">
代码示例 5:信息流右图类型
- SWAN
apid="7182325"type="feed"data-update="updatetime5"updatetime="{{updatetime5}}"binderror="binderror"bindload="bindload"bindclose="bindclose"bindstatus="bindstatus">
代码示例 6:信息流视频类型
- SWAN
apid="7182334"type="feed"data-update="updatetime6"updatetime="{{updatetime6}}"binderror="binderror"bindload="bindload"bindclose="bindclose"bindstatus="bindstatus">
代码示例 7:后贴片类型
- SWAN
注:后贴片广告于视频结束后随机自动播放,且仅支持播放一次;广告未出现或再次观看,请退出页面重新进入。 apid="7182330"data-update="updatetime7"updatetime="{{updatetime7}}"type="post-roll"binderror="binderror"bindload="bindload"bindclose="bindclose"bindstatus="bindstatus">
代码示例 8:前贴片类型
- SWAN
注:前贴片广告于视频开始前随机自动播放,且仅支持播放一次;广告未出现或再次观看,请退出页面重新进入。 apid="7183268"type="pre-roll"data-update="updatetime8"updatetime="{{updatetime8}}"binderror="binderror"bindload="bindload"bindclose="bindclose"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://www.jxjierui.cn/article/dpcsoeg.html


咨询
建站咨询
