ad 广告

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

属性说明

属性名类型默认值必填说明
appidString是小程序应用 ID
apidString是小程序广告位 ID
typeStringfeed否广告类型：banner/feed，需和百青藤平台上的代码位类型相匹配。参考下面的type 有效值
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、如果无广告返回
show广告视频播放中
close广告播放结束
noAd无广告返回

示例

在开发者工具中预览效果

扫码体验

ad 广告 - 图1请使用百度APP扫码

代码示例 1 :横幅类型

  1. <div class="ad-container">
  2.     <ad appid="a764cad8" apid="6511101" type="banner"></ad>
  3. </div>
  • 从百青藤获取的代码，是<ad></ad>标签组件，把这段代码，嵌入到页面中你需要展现广告的位置处，然后给他一些样式就可以，样式控制只能到<ad>这一层，内部的展示效果对小程序的开发者来说没有权限。
  • banner样式的背景色默认透明，建议开发者自定义背景色。通过（div style="background-color: #fff"）自行定义。其中#fff代表白色，可以根据广告场景自行修改参数。

代码示例 2 ：信息流小图类型

  1. <div class="ad-container">
  2.     <ad appid="b2f8234f" apid="6315886" type="feed"></ad>
  3. </div>

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

  1. <div class="ad-container">
  2.         <ad appid="f9acb760" apid="6010857" type="feed"></ad>
  3. </div>

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

  1. <div class="ad-container">
  2.     <ad appid="b2f8234f" apid="6315886" type="feed"></ad>
  3. </div>

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

  1. <div class="ad-container">
  2.     <ad appid="b91addc9" apid="6011084" type="feed"></ad>
  3. </div>

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

  1. <div class="ad-container">
  2.     <ad appid="a764cad8" apid="6537379" type="feed"></ad>
  3. </div>

代码示例 7 ：前贴片类型

  1. <video src="">
  2.     <ad appid="b2f8234f" apid="6315886" type="pre-roll"></ad>
  3. </video>

代码示例 8 ：后贴片类型

  1. <video src="">
  2.     <ad appid="b2f8234f" apid="6315886" type="post-roll"></ad>
  3. </video>

Bug & Tip

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