百度智能小程序 廣告

ad 廣告

解釋：廣告組件，按照流量主開通指引中的操作獲取廣告組件代碼。

屬性說明

type 有效值

binderror 事件觸發(fā)

觸發(fā)時機(jī)： 代碼執(zhí)行異常以及狀態(tài)不符合廣告要求

返回參數(shù):

bindstatus 事件觸發(fā)

觸發(fā)時機(jī)：事件觸發(fā)在視頻貼片的情況下返回參數(shù)如下

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

示例 

在開發(fā)者工具中打開

以下代碼僅做示例，需要在百青藤平臺申請代碼位替換下方 appid 和 apid ，方可正常顯示示例效果。

代碼示例 1 :橫幅類型

<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);
    }
});

• 從百青藤獲取的代碼，是 <ad></ad> 標(biāo)簽組件，把這段代碼，嵌入到頁面中你需要展現(xiàn)廣告的位置處，然后給他一些樣式就可以，樣式控制只能到 <ad> 這一層，內(nèi)部的展示效果對小程序的開發(fā)者來說沒有權(quán)限。
• banner 樣式的背景色默認(rèn)透明，建議開發(fā)者自定義背景色。通過（div style="background-color: #fff"）自行定義。其中 #fff 代表白色，可以根據(jù)廣告場景自行修改參數(shù)。

代碼示例 2 ：信息流大圖類型

<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 ：信息流三圖類型

<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 ：信息流左圖類型

<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 ：信息流右圖類型

<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 ：信息流視頻類型

<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 ：后貼片類型

<view class="ad-container">
    <view class="tip-strong">注：后貼片廣告于視頻結(jié)束后隨機(jī)自動播放，且僅支持播放一次；廣告未出現(xiàn)或再次觀看，請退出頁面重新進(jìn)入。</view>
    <video src="https://fcvideo.cdn.bcebos.com/0ee396f19db9337511d1d1340a683e53.mp4" rel="external nofollow" >
        <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 ：前貼片類型

<view class="ad-container">
    <view class="tip-strong">注：前貼片廣告于視頻開始前隨機(jī)自動播放，且僅支持播放一次；廣告未出現(xiàn)或再次觀看，請退出頁面重新進(jìn)入。</view>
    <video src="http://miniapp-ad.cdn.bcebos.com/common/video-12.mp4" rel="external nofollow" >
        <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 組件，把這段代碼，嵌入到頁面中你需要展現(xiàn)廣告的位置處，然后給他一些樣式就可以，樣式控制只能到 ad 這一層，內(nèi)部的展示效果對小程序的開發(fā)者來說沒有權(quán)限。
• Tip：banner 樣式的背景色默認(rèn)透明，建議開發(fā)者自定義背景色。通過（div style="background-color: #fff"）自行定義。其中 #fff 代表白色，可以根據(jù)廣告場景自行修改參數(shù)。
• Tip：信息流廣告可在百青藤平臺配置四種樣式：大圖、多圖、左圖右文、右圖左文。
• Tip：視頻貼片類型基于同層渲染，需 swan-core 版本 3.70.x 版本以上。
• Tip：視頻前貼 ios 11.17 之前廣告的視頻播放是和媒體公用一個 video，會出現(xiàn) video 事件多次觸發(fā)，安卓暫無影響
• Tip: 視頻后貼 暫時和媒體公用一個 video，會出現(xiàn) video 事件多次觸發(fā)
• Tip: 視頻貼片廣告播放期間切換 video 的 src 變化，都會導(dǎo)致廣告中止。