1.首先登录微信公众平台,进入小程序的管理后台,开通“推广”里面的“流量主”功能,按照要求一步一步的开通就可以了。
2.然后点击“广告管理”就可以看到有多个广告类型可供选择。激励广告,插屏广告,视频广告,和封面广告。下面逐一说下具体的使用方法。
1️⃣封面广告
封面广告也是开屏广告,是设置起来最简单的了,点击封面广告,开启广告位状态,你不需要写任何代码,只需要在“场景设置”里设置一下弹出的场景就可以了,建议全选。
2️⃣banner广告与视频广告
官方提示:为提升开发者变现效率与收益,Banner 广告与视频广告已于 2024-08 月由系统自动升级为原生模板广告,请前往原生模板广告管理。则请看原生模板广告管理
3️⃣插屏广告(官方文档地址:developers.weixin.qq.com/miniprogram…)
首先点击“创建广告位”,选择“插屏广告”,输入广告位名称,确认创建即可。
然后返回点击“插屏广告”,开启广告位状态。
点击获取代码,并根据业务需求合适插入广告代码。
// 若在开发者工具中无法预览广告,请切换开发者工具中的基础库版本
// 在页面中定义插屏广告
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…)
首先点击“创建广告位”,选择“激励广告”,输入广告位名称,确认创建即可。
然后返回点击“激励广告”,开启广告位状态。
点击获取代码,并根据业务需求合适插入广告代码。
// 若在开发者工具中无法预览广告,请切换开发者工具中的基础库版本
// 在页面中定义激励视频广告
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…)
首先点击“创建广告位”,选择“视频贴片广告”,输入广告位名称,确认创建即可。
然后返回点击“视频贴片广告”,开启广告位状态。
点击获取代码,并根据业务需求合适插入广告代码。
// 若在开发者工具中无法预览广告,请切换开发者工具中的基础库版本
// 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…)
首先点击“创建广告位”,选择“原生模板广告”,点击下一步。
选择你想要的格子模板
配置相关广告位信息,并发布
然后返回点击“原生模板广告”,开启广告位状态。
点击获取代码,并根据业务需求合适插入广告代码。
// 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广告,具体配置如下,其余原生模板广告同理:
首先点击“创建广告位”,选择“原生模板广告”,点击下一步。
选择其中的一个横幅模板之后,可自定义调整广告位相关信息,然后点击完成并发布。
然后返回点击“原生模板广告”,开启刚才创建的广告位状态。
点击获取代码,并根据业务需求合适插入广告代码。
// 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('原生模板广告关闭')
},
})