QQ小程序插屏广告接入的方法及两种案例源码
因为最近一直在做QQ小程序,而且之前QQ小程序并没有插屏广告,所以也没有写相关的教程,但是这段时间QQ小程序好像也出了插屏广告,所以这里也简单说一下,其实和激励视频广告和盒子广告也差不过,废话不多说,直接开始教程。

interstitialAd赋值

var interstitialAd = null;

在你需要加入广告的页面.js文件最上方写上赋值,这个和其他两个广告一样,就不详细介绍了,如有不懂可以在我博客看另外两个广告的接入教程;

onLoad事件中加载广告

  onLoad() {
    if (wx.createInterstitialAd) {
      interstitialAd = wx.createInterstitialAd({
       adUnitId: 'xxxx'  //这里是广告id
 })
      interstitialAd.onLoad(() => {
        console.log('onLoad event emit')
      })
      interstitialAd.onError((err) => {
        console.log('onError event emit', err)
      })
      interstitialAd.onClose((res) => {
        console.log('onClose event emit', res)
      })
    }
  },

但是因为onLoad事件在整个应用生命周期中只会调用一次,所以展示广告的时候通过其他函数去展示,常用的有在onShow时间中展示,这样就可以达到当到达该页面时直接展示广告的效果。

广告的展示方式一:

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

其实做到这里广告展示已经完成了,但是为了给小白一个更好的学习机会,我这里写了一个通过按钮去调动插屏广告的例子,其实就是在按钮的点击事件中加入广告展示代码;

广告通过按钮展示

 chaPing: function () {

    if (interstitialAd) {
            interstitialAd.show().catch((err) => {
              console.error(err)
            })
          }
   
  }

这样在前段添加一个按钮就可以通过点击按钮调出广告了。按钮代码:

<button bindtap="chaPing">点击演示</button>

插屏广告不显示相关问题

首先说明一下,上述代码无错,若广告价值不出可能有以下几个原因:

  • 广告还没加载完成,建议onLoad之后再调用show方法!
    广告加载需要时间,很有可能导致第一次进入页面不显示广告,官方也不建议第一次进入就显示广告!
  • 小程序启动一定时间内不允许展示插屏广告
    这个就是字面意思,我在测试的时候通过等待了一段时间之后再次调用广告就可以成功展示了
  • 距离小程序插屏广告上次播放时间间隔不足,不允许展示插屏广告
    两次广告展示之间需要有一段时间的间隔,我查了文档,没有明确说明,其实这样也很好的提高了用户的体验感,打开一个页面一个广告确实挺烦人。

插屏广告限制还是很多的,若有什么不懂可以加我们的交流区进行交流,该教程的案例模板也将放在交流区里。


案例下载地址:点击此处复制下载链接


该内容为安好屋原创内容,如需转载请留言。

本站唯一官网公众号:ygycz999(阳光艺创站)

小程序开发者交流区:660459637


版权属于:安好屋

转载时须注明出处及本声明

安好屋小程序相关内容全站迁移公告 微信公众号:阳光艺创站
最后修改:2020 年 02 月 14 日 01 : 20 PM
好吧,我穷的快要被消灭了。