原生微信小程序广告接入

2,234 阅读4分钟

1.首先登录微信公众平台,进入小程序的管理后台,开通“推广”里面的“流量主”功能,按照要求一步一步的开通就可以了。

image.png

2.然后点击“广告管理”就可以看到有多个广告类型可供选择。激励广告,插屏广告,视频广告,和封面广告。下面逐一说下具体的使用方法。

image.png

1️⃣封面广告

封面广告也是开屏广告,是设置起来最简单的了,点击封面广告,开启广告位状态,你不需要写任何代码,只需要在“场景设置”里设置一下弹出的场景就可以了,建议全选。

image.png

2️⃣banner广告与视频广告

官方提示:为提升开发者变现效率与收益,Banner 广告与视频广告已于 2024-08 月由系统自动升级为原生模板广告,请前往原生模板广告管理。则请看原生模板广告管理

image.png

3️⃣插屏广告(官方文档地址:developers.weixin.qq.com/miniprogram…

首先点击“创建广告位”,选择“插屏广告”,输入广告位名称,确认创建即可。

image.png 然后返回点击“插屏广告”,开启广告位状态。

image.png 点击获取代码,并根据业务需求合适插入广告代码。

// 若在开发者工具中无法预览广告,请切换开发者工具中的基础库版本
// 在页面中定义插屏广告
let interstitialAd = null

// 在页面onLoad回调事件中创建插屏广告实例
if (wx.createInterstitialAd) {
  interstitialAd = wx.createInterstitialAd({
    adUnitId: 'adunit-96099527ed446ab1'
  })
  interstitialAd.onLoad(() => {})
  interstitialAd.onError((err) => {
    console.error('插屏广告加载失败', err)
  })
  interstitialAd.onClose(() => {})
}

// 在适合的场景显示插屏广告
if (interstitialAd) {
  interstitialAd.show().catch((err) => {
    console.error('插屏广告显示失败', err)
  })
}
4️⃣激励广告(官方文档地址:developers.weixin.qq.com/miniprogram…

首先点击“创建广告位”,选择“激励广告”,输入广告位名称,确认创建即可。

image.png 然后返回点击“激励广告”,开启广告位状态。

image.png 点击获取代码,并根据业务需求合适插入广告代码。

// 若在开发者工具中无法预览广告,请切换开发者工具中的基础库版本
// 在页面中定义激励视频广告
let videoAd = null

// 在页面onLoad回调事件中创建激励视频广告实例
if (wx.createRewardedVideoAd) {
  videoAd = wx.createRewardedVideoAd({
    adUnitId: 'adunit-45e5c552ac1ad924'
  })
  videoAd.onLoad(() => {})
  videoAd.onError((err) => {
    console.error('激励视频光告加载失败', err)
  })
  videoAd.onClose((res) => {})
}

// 用户触发广告后,显示激励视频广告
if (videoAd) {
  videoAd.show().catch(() => {
    // 失败重试
    videoAd.load()
      .then(() => videoAd.show())
      .catch(err => {
        console.error('激励视频 广告显示失败', err)
      })
  })
}
5️⃣视频贴片广告(官方文档地址:developers.weixin.qq.com/miniprogram…

首先点击“创建广告位”,选择“视频贴片广告”,输入广告位名称,确认创建即可。

image.png 然后返回点击“视频贴片广告”,开启广告位状态。

image.png 点击获取代码,并根据业务需求合适插入广告代码。

// 若在开发者工具中无法预览广告,请切换开发者工具中的基础库版本
// wxml文件
<video ad-unit-id="adunit-076c50d3027a0935" bindadplay="onAdplay" bindadload="onAdload" bindadclose="onAdclose" bindaderror="onAdError"></video>

// js文件,广告事件监听
Page({
  onAdplay() {
    console.log('视频贴片广告 播放开始')
  },
  onAdload(){
    console.log('视频贴片广告 加载成功')
  },
  onAdclose() {
    console.log('视频贴片广告 关闭成功')
  },
  onAdError(err) {
    console.error('视频贴片广告 加载失败', err)
  },
})
6️⃣格子广告(官方文档:developers.weixin.qq.com/miniprogram…

首先点击“创建广告位”,选择“原生模板广告”,点击下一步。

image.png 选择你想要的格子模板

image.png 配置相关广告位信息,并发布

image.png 然后返回点击“原生模板广告”,开启广告位状态。

image.png 点击获取代码,并根据业务需求合适插入广告代码。

// wxml文件
<ad-custom unit-id="adunit-ccc29901009a9af7" bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>

// js文件,广告事件监听
Page({
  adLoad() {
    console.log('原生模板广告加载成功')
  },
  adError(err) {
    console.error('原生模板广告加载失败', err)
  },
  adClose() {
    console.log('原生模板广告关闭')
  },
})
  
7️⃣原生模板广告(全屏、竖版卡片、横版卡片、横幅、格子)(官方文档:developers.weixin.qq.com/miniprogram…

微信小程序中的原生模板广告(横幅)就是我们常见的banner广告,具体配置如下,其余原生模板广告同理:

首先点击“创建广告位”,选择“原生模板广告”,点击下一步。

选择其中的一个横幅模板之后,可自定义调整广告位相关信息,然后点击完成并发布。

image.png 然后返回点击“原生模板广告”,开启刚才创建的广告位状态。

image.png 点击获取代码,并根据业务需求合适插入广告代码。

// wxml文件
<ad-custom unit-id="adunit-e81669285d054d9a" bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>

// js文件,广告事件监听
Page({
  adLoad() {
    console.log('原生模板广告加载成功')
  },
  adError(err) {
    console.error('原生模板广告加载失败', err)
  },
  adClose() {
    console.log('原生模板广告关闭')
  },
})