今天登陸小程序(xu)的后臺，收到了(le)官方通知，小程序(xu)激勵(li)式視頻廣(guang)告(gao)組件(jian)日前已上(shang)線，也就是說(shuo)可以(yi)在(zai)小程序(xu)中插入激勵(li)視頻廣(guang)告(gao)了(le)。

早在今年年初(chu)的(de)微信(xin)公開課(ke)上(shang)，微信(xin)團隊就曾(ceng)透露「2019 年，微信(xin)小程序(xu)將在三(san)方(fang)面發力商(shang)業化變現(xian)(xian)：小程序(xu)激(ji)勵視頻，插屏(ping)廣(guang)告(gao)，個人小程序(xu)變現(xian)(xian)」，現(xian)(xian)在看來正在一步(bu)一步(bu)的(de)實現(xian)(xian)。

激勵式視頻廣告

用戶在小(xiao)程(cheng)序中主動觸發(fa)激勵式廣(guang)告(gao)，并達成獎(jiang)勵下發(fa)標準（完整播放視頻廣(guang)告(gao)，并手動點擊“關閉廣(guang)告(gao)”按(an)鈕(niu)），將獲得該小(xiao)程(cheng)序下發(fa)的獎(jiang)勵。廣(guang)告(gao)觸發(fa)場景與(yu)獎(jiang)勵內容均由流量(liang)主自(zi)定義。

下面就教大家如何在小程序中添加視頻激(ji)勵廣告。

開通小(xiao)程序流(liu)量(liang)主的步(bu)驟請(qing)先參(can)考(kao)這篇文章：

1、新建廣告位

進入小程序的后(hou)臺，點擊流量主菜單，選擇(ze)廣(guang)告位(wei)管理，點擊新建廣(guang)告位(wei)。

這里(li)的廣告(gao)位(wei)類型有兩(liang)個，選擇激勵式視頻(pin)，并(bing)輸入(ru)廣告(gao)位(wei)名稱，主要用于區分，方便管理(li)，最后點擊(ji)確(que)定。

創(chuang)建成(cheng)功后復制(zhi)一下你的廣告(gao)位(wei) ID，并打(da)開(kai)開(kai)發(fa)者(zhe)工具。

2、插入廣告代碼

視頻(pin)激(ji)勵廣(guang)(guang)告(gao)代碼(ma)插入略微復雜，不像 banner 廣(guang)(guang)告(gao)，直接獲取廣(guang)(guang)告(gao)組件(jian)代碼(ma)插入即可(ke)顯示。視頻(pin)激(ji)勵廣(guang)(guang)告(gao)代碼(ma)調用是 wx.createRewardedVideoAd 接口。接口返回一個單例對(dui)象，該對(dui)象僅(jin)對(dui)單個頁(ye)面有效。多次創建(jian)，返回的是同(tong)一個激(ji)勵式(shi)視頻(pin)廣(guang)(guang)告(gao)對(dui)象。

下面直(zhi)接來(lai)看看是如何插入的：

首先在 js 文件中定義一(yi)個全局作用域(yu)的視頻廣告對(dui)象

// 在頁面中定義激勵視頻廣告對象
var videoAd = null;

Page({
    ...
})

由于(yu)廣告對(dui)象是單例(li)，且對(dui)單個頁面(mian)有效，因(yin)此官(guan)方建議(yi)在頁面(mian)加載后（onLoad 事件）中創建廣告對(dui)象，并在該(gai)頁面(mian)的生命周期內重復調用該(gai)廣告對(dui)象。

因(yin)此(ci)在 onLoad 函數中(zhong)調用廣告(gao)接(jie)口，并監聽廣告(gao)關閉。

onLoad() {
  if (wx.createRewardedVideoAd) {
    // 加載激勵視頻廣告
    videoAd = wx.createRewardedVideoAd({
      adUnitId: '你的 adUnitId'
    })
    //捕捉錯誤
    videoAd.onError(err => {
    // 進行適當的提示
    })
    // 監聽關閉
    videoAd.onClose((status) => {
      if (status && status.isEnded || status === undefined) {
        // 正常播放結束，下發獎勵
        // continue you code
      } else {
        // 播放中途退出，進行提示
      }
    })
  }
}

注(zhu)意(yi)這里需要(yao)對(dui)錯誤進(jin)行捕捉，否則(ze)會報下面的錯誤。

然后，在合適的位置展示廣告，例如我這在一個 button 的 tap 事件進行廣告顯示。

// button 點擊事件
openVideoAd() {
  console.log('打開激勵視頻');
  // 在合適的位置打開廣告
  if (videoAd) {
    videoAd.show().catch(err => {
      // 失敗重試
      videoAd.load()
        .then(() => videoAd.show())
    })
  }
}

目前調(diao)(diao)試工具無法正(zheng)常(chang)(chang)顯示視頻廣告(gao)，打開手機調(diao)(diao)試，視頻廣告(gao)可以正(zheng)常(chang)(chang)顯示。

如果(guo)視頻顯示異常，可以(yi)參考下表，對(dui)應(ying)的異常代(dai)碼都有解決(jue)方(fang)案。

3、接入場景

小程序不知道以哪種形式接入？可以參考以下幾(ji)種接入場景：

• 內容類。觀看視頻廣告查看更多內容（文字、視頻）。
• 工具類。部分功能觀看視頻后使用，或者限制使用詞數。
• 電商類。觀看視頻廣告獲取一些優惠。
• 更新中。。。

更多(duo)的信息請參考官方小程序激勵式視(shi)頻廣告流量主指引。