快捷導(dǎo)航

微信小程序中插入激勵(lì)視頻廣告并獲取收益(實(shí)例代碼)

更新時(shí)間：2019年12月06日 14:37:50 作者：優(yōu)雅de程序員

這篇文章主要介紹了微信小程序中插入激勵(lì)視頻廣告并獲取收益，通過(guò)代碼給大家介紹了如何插入及注意事項(xiàng),需要的朋友可以參考下

最近微信小程序后臺(tái)發(fā)送通知，小程序激勵(lì)式視頻廣告組件日前已全量上線，也就是說(shuō)大家可以在小程序中插入激勵(lì)視頻廣告了，之前只允許小游戲可以使用。

激勵(lì)式視頻廣告

用戶在小程序中主動(dòng)觸發(fā)激勵(lì)式廣告，并達(dá)成獎(jiǎng)勵(lì)下發(fā)標(biāo)準(zhǔn)（完整播放視頻廣告，并手動(dòng)點(diǎn)擊 “關(guān)閉廣告” 按鈕），將獲得該小程序下發(fā)的獎(jiǎng)勵(lì)。廣告觸發(fā)場(chǎng)景與獎(jiǎng)勵(lì)內(nèi)容均由流量主自定義。

新建廣告位

首先進(jìn)入小程序后臺(tái)點(diǎn)擊流量主，點(diǎn)擊廣告位管理，點(diǎn)擊新建廣告位，就可以新建所需要的廣告了，目前有三種 banner，激勵(lì)視頻，插屏廣告。

插入廣告代碼

視頻激勵(lì)廣告代碼插入略微復(fù)雜，不像 banner 廣告，直接獲取廣告組件代碼插入即可顯示。視頻激勵(lì)廣告代碼調(diào)用是 wx.createRewardedVideoAd 接口。接口返回一個(gè)單例對(duì)象，該對(duì)象僅對(duì)單個(gè)頁(yè)面有效。

下面直接來(lái)看看是如何插入的：

首先在 js 文件中定義一個(gè)全局作用域的視頻廣告對(duì)象

// 在頁(yè)面中定義激勵(lì)視頻廣告對(duì)象

var videoAd = null;
Page({
 ...
})

由于廣告對(duì)象是單例，且對(duì)單個(gè)頁(yè)面有效，因此官方建議在頁(yè)面加載后（onLoad 事件）中創(chuàng)建廣告對(duì)象，并在該頁(yè)面的生命周期內(nèi)重復(fù)調(diào)用該廣告對(duì)象。

具體實(shí)現(xiàn)代碼

因此在 onLoad 函數(shù)中調(diào)用廣告接口，并監(jiān)聽(tīng)廣告關(guān)閉。

onLoad() {
 if (wx.createRewardedVideoAd) {
 // 加載激勵(lì)視頻廣告
 videoAd = wx.createRewardedVideoAd({
  adUnitId: '你的 adUnitId'
 })
 //捕捉錯(cuò)誤
 videoAd.onError(err => {
 // 進(jìn)行適當(dāng)?shù)奶崾?
 })
 // 監(jiān)聽(tīng)關(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('打開(kāi)激勵(lì)視頻');
 // 在合適的位置打開(kāi)廣告
 if (videoAd) {
 videoAd.show().catch(err => {
  // 失敗重試
  videoAd.load()
  .then(() => videoAd.show())
 })
 }
}

這樣就大工告成了，運(yùn)行小程序測(cè)試即可。

如果視頻顯示異?？芍苯舆M(jìn)入官方文檔根據(jù)錯(cuò)誤碼查找對(duì)應(yīng)問(wèn)題。

官方文章地址： https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/rewarded-video-ad.html