今天登陸小程序的后臺(tái),收到了官方通知,小程序激勵(lì)式視頻廣告組件日前已上線,也就是說可以在小程序中插入激勵(lì)視頻廣告了。
早在今年年初的微信公開課上,微信團(tuán)隊(duì)就曾透露「2019 年,微信小程序?qū)⒃谌矫姘l(fā)力商業(yè)化變現(xiàn):小程序激勵(lì)視頻,插屏廣告,個(gè)人小程序變現(xiàn)」,現(xiàn)在看來正在一步一步的實(shí)現(xiàn)。
用戶在小程序中主動(dòng)觸發(fā)激勵(lì)式廣告,并達(dá)成獎(jiǎng)勵(lì)下發(fā)標(biāo)準(zhǔn)(完整播放視頻廣告,并手動(dòng)點(diǎn)擊“關(guān)閉廣告”按鈕),將獲得該小程序下發(fā)的獎(jiǎng)勵(lì)。廣告觸發(fā)場景與獎(jiǎng)勵(lì)內(nèi)容均由流量主自定義。
下面就教大家如何在小程序中添加視頻激勵(lì)廣告。
開通小程序流量主的步驟請(qǐng)先參考這篇文章:小程序中開通流量主
進(jìn)入小程序的后臺(tái),點(diǎn)擊流量主菜單,選擇廣告位管理,點(diǎn)擊新建廣告位。
這里的廣告位類型有兩個(gè),選擇激勵(lì)式視頻,并輸入廣告位名稱,主要用于區(qū)分,方便管理,最后點(diǎn)擊確定。
創(chuàng)建成功后復(fù)制一下你的廣告位 ID,并打開開發(fā)者工具。
視頻激勵(lì)廣告代碼插入略微復(fù)雜,不像 banner 廣告,直接獲取廣告組件代碼插入即可顯示。視頻激勵(lì)廣告代碼調(diào)用是 wx.createRewardedVideoAd 接口。接口返回一個(gè)單例對(duì)象,該對(duì)象僅對(duì)單個(gè)頁面有效。多次創(chuàng)建,返回的是同一個(gè)激勵(lì)式視頻廣告對(duì)象。
下面直接來看看是如何插入的:
首先在 js 文件中定義一個(gè)全局作用域的視頻廣告對(duì)象
// 在頁面中定義激勵(lì)視頻廣告對(duì)象 var videoAd = null; Page({ ... })
由于廣告對(duì)象是單例,且對(duì)單個(gè)頁面有效,因此官方建議在頁面加載后(onLoad 事件)中創(chuàng)建廣告對(duì)象,并在該頁面的生命周期內(nèi)重復(fù)調(diào)用該廣告對(duì)象。
因此在 onLoad 函數(shù)中調(diào)用廣告接口,并監(jiān)聽廣告關(guān)閉。
onLoad() { if (wx.createRewardedVideoAd) { // 加載激勵(lì)視頻廣告 videoAd = wx.createRewardedVideoAd({ adUnitId: '你的 adUnitId' }) //捕捉錯(cuò)誤 videoAd.onError(err => { // 進(jìn)行適當(dāng)?shù)奶崾? }) // 監(jiān)聽關(guān)閉 videoAd.onClose((status) => { if (status && status.isEnded || status === undefined) { // 正常播放結(jié)束,下發(fā)獎(jiǎng)勵(lì) // continue you code } else { // 播放中途退出,進(jìn)行提示 } }) } }
注意這里需要對(duì)錯(cuò)誤進(jìn)行捕捉,否則會(huì)報(bào)下面的錯(cuò)誤。
然后,在合適的位置展示廣告,例如我這在一個(gè) button 的 tap 事件進(jìn)行廣告顯示。
// button 點(diǎn)擊事件 openVideoAd() { console.log('打開激勵(lì)視頻'); // 在合適的位置打開廣告 if (videoAd) { videoAd.show().catch(err => { // 失敗重試 videoAd.load() .then(() => videoAd.show()) }) } }
目前調(diào)試工具無法正常顯示視頻廣告,打開手機(jī)調(diào)試,視頻廣告可以正常顯示。
如果視頻顯示異常,可以參考下表,對(duì)應(yīng)的異常代碼都有解決方案。
小程序不知道以哪種形式接入?可以參考以下幾種接入場景:
更多的信息請(qǐng)參考官方小程序激勵(lì)式視頻廣告流量主指引。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)