微信小程序-广告相关

微信小程序广告分类

近期有一个需求是跟广告相关，趁此机会，对微信广告这里进行了详细的了解。
下面是对广告相关的大概介绍官方文档
相关广告形态

Banner广告

微信官方文档也有写：

<view class="adContainer">
  <ad unit-id="xxxx" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
</view>

Page({
  adLoad() {
    console.log('Banner 广告加载成功')
  },
  adError(err) {
    console.log('Banner 广告加载失败', err)
  },
  adClose() {
    console.log('Banner 广告关闭')
  }
})

激励视频广告

激励视频广告层级最高，会覆盖在普通组件上。
是调用一个API即可，仅对当前页面有效，不允许跨页面使用。

let rewardedVideoAd = null
Page({
  onLoad() {
    if(wx.createRewardedVideoAd){
      rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'xxxx' })
      rewardedVideoAd.onLoad(() => {
        console.log('onLoad event emit')
      })
      rewardedVideoAd.onError((err) => {
        console.log('onError event emit', err)
      })
      rewardedVideoAd.onClose((res) => {
        console.log('onClose event emit', res)
      })
    }
  }
})

为避免滥用广告资源，目前每个用户每天可观看激励式视频广告的次数有限。
激励视频广告组件默认是隐藏的，在用户主动触发广告后，开发者需要调用 RewardedVideoAd.show() 进行显示，监听用户关闭广告
只有在用户点击激励视频广告组件上的 关闭广告 按钮时，广告才会关闭。这个事件可以通过 RewardedVideoAd.onClose() 监听。

插屏广告

我觉得跟激励视频广告很像。虽然我还没有接触过激励视频广告，后续接触到我会回来补充下～～

let interstitialAd = null
Page({
  onLoad() {
    if(wx.createInterstitialAd){
      interstitialAd = wx.createInterstitialAd({ adUnitId: 'xxxx' })
      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)
      })
    }
  }
})

视频广告

开发者可以使用 ad 组件创建小程序视频广告组件，视频广告组件在创建后会自动拉取广告数据并显示。暂时仅支持在同层渲染模式下使用，且不支持嵌套使用。

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="video" ad-theme="white"></ad>
</view>

视频前贴广告

在video组件中添加配置属性，创建小程序视频前贴广告组件，视频广告组件在创建后会自动拉取广告数据，视频播放前展示广告。

广告样式：
展示样式在开发者所设置的video组件中，以16：9的比例，垂直或者水平居中

<video 
  class="xxx"
  src="xxx"
  bindadplay="onAdplay"
  bindadload="onAdload"
  bindadclose="onAdclose"
  bindaderror="onAdError"
  ad-unit-id="xxx"
>
</video>

Page({
  onAdplay(e) {
    console.log('onAdplay', e)
  },
  onAdload(e){
    console.log('onAdload', e)
  },
  onAdclose(e) {
    console.log('onAdclose', e)
  },
  onAdError(e) {
    console.log('onAdError', e)
  },
})

可以调用wx.preloadVideoAd 的方式进行广告的预加载

const adUnitId1 = 'xxx'
const adUnitId2 = 'xxx'
wx.preloadVideoAd([adUnitId1, adUnitId2])

格子广告

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" ad-theme="white" grid-count="5" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
</view>

Page({
  adLoad() {
    console.log('Grid 广告加载成功')
  },
  adError(err) {
    console.log('Grid 广告加载失败', err)
  },
  adClose() {
    console.log('Grid 广告关闭')
  }
})

小程序视频广告组件提供黑、白两种主题样式，开发者可以在创建视频广告时传入ad-theme参数实现主题样式选择，字符串类型，参数为white、black

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" ad-theme="white"></ad>
</view>

原生模版广告

<view class="adContainer">
  <ad-custom unit-id="xxxx"></ad-custom>
</view>

Page({
  adLoad() {
    console.log('原生模板广告加载成功')
  },
  adError(err) {
    console.log('原生模板广告加载失败', err)
  }
})

遇到最多的问题就是广告展示不出来，例如原生广告报的错误1004，官方文档说属于正常现象、插屏广告报的2001，官方文档说小程序一定时间内不允许展示插屏广告。。。

需要去兼容一下，当广告遇到这种错误展示不出来的时候页面样式。