ad 广告

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

# 属性说明

属性名 类型 默认值 必填 说明
appid String 小程序应用 ID
apid String 小程序广告位 ID
type String feed 广告类型:banner/feed,需和百青藤平台上的代码位类型相匹配。参考下面的type 有效值
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 事件触发

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

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

    # 示例

    在开发者工具中预览效果

    # 扫码体验

    请使用百度APP扫码

    # 代码示例 1 :横幅类型

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

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

        <div class="ad-container">
            <ad appid="b2f8234f" 
                apid="6315886" 
                type="feed" 
                updatetime="{{updatetime}}"
                binderror="binderror"
                bindload="bindload"
                bindclose="bindclose"
                bindstatus="bindstatus">
            </ad>
        </div>
        
        

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

          <div class="ad-container">
              <ad appid="a764cad8" 
                  apid="6464581" 
                  type="feed" 
                  updatetime="{{updatetime}}" 
                  binderror="binderror"
                  bindload="bindload"
                  bindclose="bindclose"
                  bindstatus="bindstatus">
              </ad>
          </div>
          
          

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

            <div class="ad-container">
                <ad appid="f9acb760" 
                    apid="6010857" 
                    type="feed" 
                    updatetime="{{updatetime}}" 
                    binderror="binderror"
                    bindload="bindload"
                    bindclose="bindclose"
                    bindstatus="bindstatus">
                </ad>
            </div>
            

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

              <div class="ad-container">
                  <ad appid="b2f8234f" 
                      apid="6315886" 
                      type="feed" 
                      updatetime="{{updatetime}}" 
                      binderror="binderror"
                      bindload="bindload"
                      bindclose="bindclose"
                      bindstatus="bindstatus">
                  </ad>
              </div>
              
              

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

                <div class="ad-container">
                    <ad appid="b91addc9" 
                        apid="6011084" 
                        type="feed" 
                        updatetime="{{updatetime}}"
                        binderror="binderror"
                        bindload="bindload"
                        bindclose="bindclose"
                        bindstatus="bindstatus">
                    </ad>
                </div>
                
                

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

                  <div class="ad-container">
                      <ad appid="a764cad8" 
                          apid="6537379" 
                          type="feed" 
                          updatetime="{{updatetime}}"
                          binderror="binderror"
                          bindload="bindload"
                          bindclose="bindclose"
                          bindstatus="bindstatus">
                      </ad>
                  </div>
                  
                  

                  # 代码示例 8 :前贴片类型

                    <div class="ad-container">
                        <view class="tip-strong">注:后贴片广告于视频结束后随机自动播放,且仅支持播放一次;广告未出现或再次观看,请退出页面重新进入。</view>
                        <video src="https://fcvideo.cdn.bcebos.com/0ee396f19db9337511d1d1340a683e53.mp4">
                            <ad appid="a764cad8" 
                                apid="6674751" 
                                type="post-roll" 
                                updatetime="{{updatetime}}" 
                                binderror="binderror"
                                bindload="bindload"
                                bindclose="bindclose"
                                bindstatus="bindstatus">
                            </ad>
                        </video>
                    </div>
                    

                    # 代码示例 9 :后贴片类型

                      <div class="ad-container">
                          <view class="tip-strong">注:前贴片广告于视频开始前随机自动播放,且仅支持播放一次;广告未出现或再次观看,请退出页面重新进入。</view>
                          <video src="https://b.bdstatic.com/miniapp/development_tool/Smartprogram.mp4">
                              <ad appid="bf483fb1" 
                                  apid="6575220" 
                                  type="pre-roll"
                                  updatetime="{{updatetime}}" 
                                  binderror="binderror"
                                  bindload="bindload"
                                  bindclose="bindclose"
                                  bindstatus="bindstatus">
                              </ad>
                          </video>
                      </div>
                      

                      # 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变化,都会导致广告中止。