今天登陸小程序的后臺(tái)，收到了官方通知，小程序激勵(lì)式視頻廣告組件日前已上線，也就是說可以在小程序中插入激勵(lì)視頻廣告了。

早在今年年初的微信公開課上，微信團(tuán)隊(duì)就曾透露「2019 年，微信小程序?qū)⒃谌矫姘l(fā)力商業(yè)化變現(xiàn)：小程序激勵(lì)視頻，插屏廣告，個(gè)人小程序變現(xiàn)」，現(xiàn)在看來正在一步一步的實(shí)現(xiàn)。

激勵(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ā)場景與獎(jiǎng)勵(lì)內(nèi)容均由流量主自定義。

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

開通小程序流量主的步驟請(qǐng)先參考這篇文章：小程序中開通流量主

1、新建廣告位

進(jìn)入小程序的后臺(tái)，點(diǎn)擊流量主菜單，選擇廣告位管理，點(diǎn)擊新建廣告位。

這里的廣告位類型有兩個(gè)，選擇激勵(lì)式視頻，并輸入廣告位名稱，主要用于區(qū)分，方便管理，最后點(diǎn)擊確定。

創(chuàng)建成功后復(fù)制一下你的廣告位 ID，并打開開發(fā)者工具。

2、插入廣告代碼

視頻激勵(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)的異常代碼都有解決方案。

3、接入場景

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

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

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