后浪云百度小程序教程：ad 广告

2022-9-16
  • ad 广告
    • 属性说明
      • type 有效值
      • binderror 事件触发
      • bindstatus 事件触发
    • 示例
      • 代码示例 1：横幅类型
      • 代码示例 2：信息流大图类型
      • 代码示例 3：信息流三图类型
      • 代码示例 4：信息流左图类型
      • 代码示例 5：信息流右图类型
      • 代码示例 6：信息流视频类型
      • 代码示例 7：后贴片类型
      • 代码示例 8：前贴片类型
    • Bug & Tip

    ad 广告

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

    属性说明

    属性名 类型 默认值 必填 说明
    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
     
 
 
      
  
  
  
    1.  statusFunc(e) {
      2. 
  
  
  
    2.  // e = {status:''} 具体如下
      3. 
  
  
  
    3.  }
      4.
    属性 说明
    videoend 视频结束，触发时机：1、有广告返回，广告播放结束；2、无广告返回；3、广告被关闭
    show 广告视频播放中
    close 广告播放结束
    noAd 无广告返回

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    后浪云百度小程序教程：ad 广告插图

    请使用百度APP扫码

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

    代码示例 1：横幅类型

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

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

    • SWAN
     
 
 
      
  
  
  
    1. <view class="ad-container">
      2. 
  
  
  
    2.  <ad appid="f71feede"
      3. 
  
  
  
    3.  apid="7182323" 
      4. 
  
  
  
    4.  type="feed"
      5. 
  
  
  
    5.  data-update="updatetime2"
      6. 
  
  
  
    6.  updatetime="{{updatetime2}}"
      7. 
  
  
  
    7.  binderror="binderror"
      8. 
  
  
  
    8.  bindload="bindload"
      9. 
  
  
  
    9.  bindclose="bindclose"
      10. 
  
  
  
    10.  bindstatus="bindstatus">
      11. 
  
  
  
    11.  </ad>
      12. 
  
  
  
    12. </view>
      13.

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

    • SWAN
     
 
 
      
  
  
  
    1. <view class="ad-container">
      2. 
  
  
  
    2.  <ad appid="f71feede"
      3. 
  
  
  
    3.  apid="7182347"
      4. 
  
  
  
    4.  type="feed"
      5. 
  
  
  
    5.  data-update="updatetime3"
      6. 
  
  
  
    6.  updatetime="{{updatetime3}}"
      7. 
  
  
  
    7.  binderror="binderror"
      8. 
  
  
  
    8.  bindload="bindload"
      9. 
  
  
  
    9.  bindclose="bindclose"
      10. 
  
  
  
    10.  bindstatus="bindstatus">
      11. 
  
  
  
    11.  </ad>
      12. 
  
  
  
    12. </view>
      13.

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

    • SWAN
     
 
 
      
  
  
  
    1. <view class="ad-container">
      2. 
  
  
  
    2.  <ad appid="f71feede"
      3. 
  
  
  
    3.  apid="7182324"
      4. 
  
  
  
    4.  type="feed"
      5. 
  
  
  
    5.  data-update="updatetime4"
      6. 
  
  
  
    6.  updatetime="{{updatetime4}}"
      7. 
  
  
  
    7.  binderror="binderror"
      8. 
  
  
  
    8.  bindload="bindload"
      9. 
  
  
  
    9.  bindclose="bindclose"
      10. 
  
  
  
    10.  bindstatus="bindstatus">
      11. 
  
  
  
    11.  </ad>
      12. 
  
  
  
    12. </view>
      13.

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

    • SWAN
     
 
 
      
  
  
  
    1. <view class="ad-container">
      2. 
  
  
  
    2.  <ad appid="f71feede"
      3. 
  
  
  
    3.  apid="7182325"
      4. 
  
  
  
    4.  type="feed"
      5. 
  
  
  
    5.  data-update="updatetime5"
      6. 
  
  
  
    6.  updatetime="{{updatetime5}}"
      7. 
  
  
  
    7.  binderror="binderror"
      8. 
  
  
  
    8.  bindload="bindload"
      9. 
  
  
  
    9.  bindclose="bindclose"
      10. 
  
  
  
    10.  bindstatus="bindstatus">
      11. 
  
  
  
    11.  </ad>
      12. 
  
  
  
    12. </view>
      13.

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

    • SWAN
     
 
 
      
  
  
  
    1. <view class="ad-container">
      2. 
  
  
  
    2.  <ad appid="f71feede"
      3. 
  
  
  
    3.  apid="7182334"
      4. 
  
  
  
    4.  type="feed"
      5. 
  
  
  
    5.  data-update="updatetime6"
      6. 
  
  
  
    6.  updatetime="{{updatetime6}}"
      7. 
  
  
  
    7.  binderror="binderror"
      8. 
  
  
  
    8.  bindload="bindload"
      9. 
  
  
  
    9.  bindclose="bindclose"
      10. 
  
  
  
    10.  bindstatus="bindstatus">
      11. 
  
  
  
    11.  </ad>
      12. 
  
  
  
    12. </view>
      13.

    代码示例 7：后贴片类型

    • SWAN
     
 
 
      
  
  
  
    1. <view class="ad-container">
      2. 
  
  
  
    2.  <view class="tip-strong">注：后贴片广告于视频结束后随机自动播放，且仅支持播放一次；广告未出现或再次观看，请退出页面重新进入。</view>
      3. 
  
  
  
    3.  <video src="https://fcvideo.cdn.bcebos.com/0ee396f19db9337511d1d1340a683e53.mp4">
      4. 
  
  
  
    4.  <ad appid="f71feede"
      5. 
  
  
  
    5.  apid="7182330"
      6. 
  
  
  
    6.  data-update="updatetime7"
      7. 
  
  
  
    7.  updatetime="{{updatetime7}}"
      8. 
  
  
  
    8.  type="post-roll"
      9. 
  
  
  
    9.  binderror="binderror"
      10. 
  
  
  
    10.  bindload="bindload"
      11. 
  
  
  
    11.  bindclose="bindclose"
      12. 
  
  
  
    12.  bindstatus="bindstatus">
      13. 
  
  
  
    13.  </ad>
      14. 
  
  
  
    14.  </video>
      15. 
  
  
  
    15. </view>
      16.

    代码示例 8：前贴片类型

    • SWAN
     
 
 
      
  
  
  
    1. <view class="ad-container">
      2. 
  
  
  
    2.  <view class="tip-strong">注：前贴片广告于视频开始前随机自动播放，且仅支持播放一次；广告未出现或再次观看，请退出页面重新进入。</view>
      3. 
  
  
  
    3.  <video src="http://miniapp-ad.cdn.bcebos.com/common/video-12.mp4">
      4. 
  
  
  
    4.  <ad appid="f71feede"
      5. 
  
  
  
    5.  apid="7183268"
      6. 
  
  
  
    6.  type="pre-roll"
      7. 
  
  
  
    7.  data-update="updatetime8"
      8. 
  
  
  
    8.  updatetime="{{updatetime8}}"
      9. 
  
  
  
    9.  binderror="binderror"
      10. 
  
  
  
    10.  bindload="bindload"
      11. 
  
  
  
    11.  bindclose="bindclose"
      12. 
  
  
  
    12.  bindstatus="bindstatus">
      13. 
  
  
  
    13.  </ad>
      14. 
  
  
  
    14.  </video>
      15. 
  
  
  
    15. </view>
      16.

    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 变化，都会导致广告中止。
    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186087/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图