微信小程序加入广告

小程序的广告样式有六种，分别是 Banner、激励式视频、插屏、视频广告、前贴视频、格子广告。

微信对加入的广告样式布局等有一定的要求，添加广告要按照小程序规则指引进行添加，详情点击【小程序、小应用广告应用规范及处罚规则】查看。

小程序广告官方文档：https://ad.weixin.qq.com/guide/1191

加入广告，首先要开通广告功能。开通后就可以在广告管理中新建广告位了。
在这里插入图片描述

各种广告的代码实现：

说明： unit-id请替换为自己的。

1、Banner广告页代码，这个比较简单只要加入下面一句话就可以了

<ad unit-id="adunit-xxxxxx"></ad>

2、激励视频广告

.WXML中代码

<view class='btn-view' bindtap="openVideo">
  <view class='btn'>打开激励视频</view>
</view>

JS中的代码

let videoAd = null
Page({
  onLoad() {
    // 在页面onLoad回调事件中创建激励视频广告实例
    if (wx.createRewardedVideoAd) {
      videoAd = wx.createRewardedVideoAd({
        adUnitId: 'adunit-xxxxx'
      })
      videoAd.onLoad(() => {})
      videoAd.onError((err) => {})
      videoAd.onClose((res) => {})
    }
  },
  openVideo: function(e) {

    if (videoAd) {
      videoAd.show().catch(() => {
        // 失败重试
        videoAd.load()
          .then(() => videoAd.show())
          .catch(err => {
            console.log('激励视频 广告显示失败')
          })
      })
    }

  }
})

3、插屏广告

wxml文件代码：

<view>
<view class='btn-view' >
  <view class='btn'>我没有点击效果哦</view>
</view>

<view class='btn-view'>
  <view class='btn'>我不能点击哦</view>
</view>

<view class='btn-view' bindtap="openAd">
  <view class='btn'>点击哦，有广告</view>
</view>

<view class='btn-view'>
  <view class='btn'>我不能点击哦</view>
</view>

</view>

JS文件代码

// 在页面中定义插屏广告
let interstitialAd = null
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // 在页面onLoad回调事件中创建插屏广告实例
    if (wx.createInterstitialAd) {
      interstitialAd = wx.createInterstitialAd({
        adUnitId: 'adunit-xxxxxx'
      })
      interstitialAd.onLoad(() => {})
      interstitialAd.onError((err) => {})
      interstitialAd.onClose(() => {})
    }
  },

  openAd: function(e) {
    // 在适合的场景显示插屏广告
    if (interstitialAd) {
      interstitialAd.show().catch((err) => {
        console.error(err)
      })
    }
  }
})在这里插入代码片

4、打开视频广告

<ad unit-id="adunit-xxxxxx" ad-type="video" ad-theme="white"></ad>

5、打开前贴视频


<view>带广告</view>
<video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 
unit-id="adunit-xxxxxx"></video>


<view style="margin-top:100rpx;">同样链接，不带广告</view>

<video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" ></video>

6、打开格子视频

<ad unit-id="adunit-xxxxxx" ad-type="grid" grid-opacity="0.8" grid-count="5" ad-theme="white"></ad>

微信小程序加入广告

猜你喜欢