小程序添加插屏广告教程

这两天有读者在后台提醒我小程序可以添加插屏广告了，让我出一期教程。最近也在一直忙着毕业论文，抽空看了看小程序的插屏广告，插入广告并不难，但却有很多的条件限制。

还不会开通流量主或者不会插入 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 函数中通过这个布尔常量来判断当前页面是否为第一次显示即可。代码就不展示了，不会的留言或者私聊问我吧。

插屏广告限制

为保证良好的用户体验，插屏广告频率将受到如下限制，因此设计广告触发场景时需要考虑到以下的限制情况。

用户每次打开小程序后的一段时间内，将不会展现插屏广告。
两个插屏广告之间将会间隔一段时间。
一个激励式视频与一个插屏广告之间将会间隔一段时间，展现次序不分先后。

另外，show方法返回rejected Promise时会有对应的错误码信息。因此，可以通过捕获的异常信息，来判断广告不显示的原因。

这里吐槽一下，这么多限制，感觉也没啥地方可以展示的。

更多的信息请参考官方小程序插屏广告流量主指引。

上面的完整代码可以在公众号后台回复「插屏广告」获取。

推荐阅读
小程序开通流量主
小程序插入激励视频广告