小程序添加插屏廣告教程

這兩天有讀者在後臺提醒我小程序可以添加插屏廣告了，讓我出一期教程。最近也在一直忙着畢業論文，抽空看了看小程序的插屏廣告，插入廣告並不難，但卻有很多的條件限制。

還不會開通流量主或者不會插入 banner / 視頻廣告的先看下面兩篇教程吧。

小程序開通流量主
小程序插入激勵視頻廣告

插屏廣告

用戶觸發小程序中的特定場景時，插屏廣告將自動向用戶展現，用戶可以隨時關閉插屏廣告。廣告觸發場景由流量主自定義，廣告按曝光計費（CPM）。

官方建議在“有停頓感“的場景展現小程序插屏廣告，例如切換 tab、遊戲回合結束、流程結束、視頻播放停頓等等，同時不建議在一打開小程序或者操作過程中途顯示插屏廣告。個人認爲這個界定有些模糊了，拓展以及想象空間非常非常大。

以上一些定義，各位可自行體會。下面進入正題，就教大家創建以及插入插屏廣告。

創建廣告位

進入小程序的後臺，點擊流量主菜單，選擇廣告位管理，點擊新建廣告位。

現在這裏的廣告位類型有三個，選擇插屏廣告，並輸入廣告位名稱，主要用於區分，方便管理，最後點擊確定。

創建成功後複製一下你的廣告位 ID，並打開開發者工具。

插入代碼

插屏廣告代碼調用是 wx.createInterstitialAd 接口。接口返回一個廣告對象，該對象僅對單個頁面有效，不允許跨頁面使用。與激勵視頻廣告不同，多次創建，返回的是多個插屏廣告對象。

下面以切換 tab 場景爲例，教大家如何插入插屏廣告。

首先 tabbar 的配置如下：

"tabBar": {
    "color": "#707070",
    "selectedColor": "#6c63ff",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "home",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-fill.png"
      },
      {
        "pagePath": "pages/bug/bug",
        "text": "bug",
        "iconPath": "images/bug.png",
        "selectedIconPath": "images/bug-fill.png"
      }
    ]
  }

官方不建議一打開小程序就顯示廣告，因此這裏將廣告插入在第二個頁面中。

首先初始化插屏廣告對象

// 在頁面中定義插屏廣告對象
var interstitialAd = null;

Page({
    ...
})

由於廣告對象僅對單個頁面有效，官方建議開發者在頁面加載後（onLoad事件）創建一個廣告對象，並在該頁面的生命週期內重複調用該廣告對象。

onLoad: function (options) {
  // 創建插屏廣告實例
  if (wx.createInterstitialAd) {
    interstitialAd = wx.createInterstitialAd({
      adUnitId: 'adunit-你的廣告id'
    })
    //捕捉錯誤
    interstitialAd.onError(err => {
      console.log(err);
    })
  }
},

由於 tabbar 的 onLoad事件 在整個應用生命週期中只會調用一次，因此這裏選擇在 onShow 中顯示廣告。

onShow: function () {
  // 顯示插屏廣告
  if (interstitialAd) {
    interstitialAd.show().catch((err) => {
      console.error(err)
    })
  }
},

目前調試工具無法正常顯示視頻廣告，打開手機調試，插屏廣告可以正常顯示。

如果視頻不顯示或者顯示異常，可以參考表格中的異常信息代碼，找到相應的解決方案。

另外，還有人問到如何實現切回主頁面顯示廣告，這其實並不難，這裏提供一個思路：在主頁面設置一個布爾常量，在 onShow 函數中通過這個布爾常量來判斷當前頁面是否爲第一次顯示即可。代碼就不展示了，不會的留言或者私聊問我吧。

插屏廣告限制

爲保證良好的用戶體驗，插屏廣告頻率將受到如下限制，因此設計廣告觸發場景時需要考慮到以下的限制情況。

1. 用戶每次打開小程序後的一段時間內，將不會展現插屏廣告。
2. 兩個插屏廣告之間將會間隔一段時間。
3. 一個激勵式視頻與一個插屏廣告之間將會間隔一段時間，展現次序不分先後。

另外，show方法返回rejected Promise時會有對應的錯誤碼信息。因此，可以通過捕獲的異常信息，來判斷廣告不顯示的原因。

這裏吐槽一下，這麼多限制，感覺也沒啥地方可以展示的。

更多的信息請參考官方小程序插屏廣告流量主指引。

上面的完整代碼可以在公衆號後臺回覆「插屏廣告」獲取。

---

推薦閱讀
小程序開通流量主
小程序插入激勵視頻廣告