ad 广告

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

属性说明

type 有效值

binderror 事件触发

触发时机：代码执行异常以及状态不符合广告要求。
返回参数：

bindstatus 事件触发

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

• JS

 statusFunc(e) {
    // e = {status:''}  具体如下
 }

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

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

代码示例 1：横幅类型

• SWAN
• JS

<view class="ad-container">
    <ad appid="f71feede"
        apid="7182322"
        type="banner"
        data-update="updatetime1"
        updatetime="{{updatetime1}}"
        binderror="binderror"
        bindload="bindload"
        bindclose="bindclose"
        bindstatus="bindstatus">
    </ad>
</view>

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

<view class="ad-container">
    <ad appid="f71feede"
        apid="7182323" 
        type="feed"
        data-update="updatetime2"
        updatetime="{{updatetime2}}"
        binderror="binderror"
        bindload="bindload"
        bindclose="bindclose"
        bindstatus="bindstatus">
    </ad>
</view>

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

• SWAN

<view class="ad-container">
    <ad appid="f71feede"
        apid="7182347"
        type="feed"
        data-update="updatetime3"
        updatetime="{{updatetime3}}"
        binderror="binderror"
        bindload="bindload"
        bindclose="bindclose"
        bindstatus="bindstatus">
    </ad>
</view>

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

• SWAN

<view class="ad-container">
    <ad appid="f71feede"
        apid="7182324"
        type="feed"
        data-update="updatetime4"
        updatetime="{{updatetime4}}"
        binderror="binderror"
        bindload="bindload"
        bindclose="bindclose"
        bindstatus="bindstatus">
    </ad>
</view>

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

• SWAN

<view class="ad-container">
    <ad appid="f71feede"
        apid="7182325"
        type="feed"
        data-update="updatetime5"
        updatetime="{{updatetime5}}"
        binderror="binderror"
        bindload="bindload"
        bindclose="bindclose"
        bindstatus="bindstatus">
    </ad>
</view>

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

• SWAN

<view class="ad-container">
    <ad appid="f71feede"
        apid="7182334"
        type="feed"
        data-update="updatetime6"
        updatetime="{{updatetime6}}"
        binderror="binderror"
        bindload="bindload"
        bindclose="bindclose"
        bindstatus="bindstatus">
    </ad>
</view>

代码示例 7：后贴片类型

• SWAN

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

代码示例 8：前贴片类型

• SWAN

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

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