阅读(4104)
赞(13)
广告组件
2020-02-11 18:35:15 更新
ad
基础库 1.19.0 开始支持本组件。
广告组件。
属性说明
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| unit-id | string | 是 | 广告位 id，必填。需要预先在「小程序管理后台 > 流量主模块」配置生成。 | 1.19.0 | |
| bindload | eventhandle | 否 | 广告加载成功的回调方法 | 1.19.0 | |
| binderror | eventhandle | 否 | 广告加载失败的回调方法，具体的错误信息可以参考下方的广告错误码说明 | 1.26.2 | |
| bindclose | eventhandle | 否 | 广告关闭的回调方法 | 1.31.0 | |
| ad-intervals | number | 否 | 广告自动刷新的间隔时间，只对 banner 型广告生效。单位为秒，参数值必须大于等于 30（该参数不传入时 banner 广告不会自动刷新） | 1.32.1 | |
| fixed | boolean | 否 | 广告是否在屏幕中固定展示 | 1.34.0 | |
| type | string | "banner" | 否 | 广告的类型，具体类型有：banner、video（视频）、large（大图）、lImg（左图右文）、rImg（右图左文），默认值为 banner | 1.41.0 |
| scale | number | 100 | 否 | 广告的缩放比例，100 为标准尺寸 | 1.41.0 |
详细说明
广告组件具备展示多种类型广告的能力，并支持通过指定 scale 控制组件的显示大小。
下方的表格将说明广告类型（type）与缩放比例（scale）的关系。
| 类型（type） | 缩放比例（scale）有效范围 | 说明 |
|---|---|---|
| banner | 无 | 该类型广告宽度由 CSS 样式决定，宽度范围是屏幕宽度的80%-100% |
| video | 90-100 110 | 视频广告，该类型广告宽度是屏幕宽度的 100%，100 为标准样式，110 为通屏样式 |
| large | 90-100 | 大图广告，该类型广告宽度是屏幕宽度的 100%，100 为标准样式，90 为最小样式 |
| lImg | 100-150 | 左图右文广告，该类型广告宽度是屏幕宽度的 100%，100 为标准样式，150 为最大样式。容易看错，首字母是 l(L) |
| rImg | 100-150 | 右图左文广告，该类型广告宽度是屏幕宽度的 100%，100 为标准样式，150 为最大样式 |
简言之：
- banner 型广告的宽度受 css 样式影响
- video、large、lImg、rImg 型广告宽度始终等于手机屏幕宽度，只能通过设置 scale 属性控制显示大小。
另外，广告组件的 type 属性允许传入多个类型值，以便字节跳动平台为你的小程序提供最适合的广告类型。
<!--多类型示例--->
<ad type="video large lImg rImg" scale="110 90 150 130"></ad>广告错误码说明
若发现广告组件未展示，可以通过 binderror 属性查看广告加载的错误码，以便定位具体原因。
下方表格是对广告错误码的详细说明。
| 值 | 异常 | 说明 | 解决方案 |
|---|---|---|---|
| 1000 | 后端错误调用失败 | 该项错误不是开发者的异常情况 | 一般情况下忽略一段时间即可恢复 |
| 1001 | 参数错误 | 使用方法错误 | 查看 ad 组件文档 |
| 1002 | 广告单元无效 | 可能是拼写错误、或者误用了其他 APP 的广告 ID | |
| 1003 | 内部错误 | 该项错误不是开发者的异常情况 | 一般情况下忽略一段时间即可恢复 |
| 1004 | 无适合的广告 | 广告不是每一次都会出现，这次没有出现可能是由于该用户不适合浏览广告 | 属于正常情况，且开发者需要针对这种情况做形态上的兼容 |
| 1005 | 广告组件审核中 | 广告正在被审核，无法展现广告 | |
| 1006 | 广告组件被驳回 | 广告审核失败，无法展现广告 | |
| 1007 | 广告能力被禁用 | 广告能力已经被封禁，封禁期间无法展现广告 | |
| 1008 | 广告单元已关闭 | 该广告位的广告能力已经被关闭 |
效果示例
banner 型广告
banner 广告的效果图。
video 型广告
视频广告的效果图。
large 型广告
大图广告的效果图。
lImg 型广告
左图右文广告效果图。
rImg 型广告
右图左文广告效果图。
代码示例
<!--基础示例-->
<view>
<ad
unit-id="371e6m5eo89h576679"
bindload="adloadhandler"
binderror="aderrorhandler"
bindclose="adclosehandler"
></ad>
</view>← web-view