By admin
引言
在移动应用开发中，广告变现是一种常见的盈利模式。而激励视频广告因其高转化率和用户体验友好，成为了开发者的首选。今天，我们将以 UniApp 为例，手把手教你如何在小程序中集成激励视频广告，并在用户点击按钮后弹出广告，看完广告即可获取源码链接！
一、什么是激励视频广告？
激励视频广告是一种用户主动选择观看的广告形式。用户观看完整广告后，可以获得一定的奖励（如解锁功能、获取资源等）。这种广告形式不仅提升了用户体验，还能为开发者带来可观的收益。
二、UniApp 中集成激励视频广告的步骤
1. 初始化激励视频广告
在 UniApp 中，我们可以通过微信小程序的 wx.createRewardedVideoAd API 来创建激励视频广告实例。以下是初始化广告的代码：
onLoad() {
if (wx.createRewardedVideoAd) {
this.videoAd = wx.createRewardedVideoAd({
adUnitId: 'adunit-xxxxx' // 替换为你的广告单元 ID
});
// 监听广告加载事件
this.videoAd.onLoad(() => {
console.log('激励视频广告加载成功');
});
// 监听广告错误事件
this.videoAd.onError((err) => {
console.error('激励视频广告加载失败', err);
});
// 监听广告关闭事件
this.videoAd.onClose((res) => {
if (res && res.isEnded) {
console.log('用户看完了广告');
this.showLink = true; // 显示链接
} else {
console.log('用户未看完广告');
uni.showToast({
title: '请完整观看广告以获取链接',
icon: 'none',
});
}
});
} else {
console.error('当前环境不支持激励视频广告');
}
}
2. 点击按钮弹出广告
当用户点击“获取源码地址”按钮时，调用 videoAd.show() 方法弹出广告。如果广告加载失败，可以尝试重新加载并显示：
handleGetSourceCode() {
if (this.videoAd) {
this.videoAd.show().catch(() => {
// 失败重试
this.videoAd.load()
.then(() => this.videoAd.show())
.catch((err) => {
console.error('激励视频广告显示失败', err);
uni.showToast({
title: '广告加载失败，请重试',
icon: 'none',
});
});
});
} else {
uni.showToast({
title: '广告未初始化',
icon: 'none',
});
}
}
3. 广告关闭后的逻辑处理
在广告关闭后，判断用户是否完整观看了广告。如果用户看完了广告，则显示源码链接；否则提示用户完整观看广告：
this.videoAd.onClose((res) => {
if (res && res.isEnded) {
console.log('用户看完了广告');
this.showLink = true; // 显示链接
} else {
console.log('用户未看完广告');
uni.showToast({
title: '请完整观看广告以获取链接',
icon: 'none',
});
}
});
三、完整代码示例
以下是一个完整的 UniApp 页面代码，集成了激励视频广告功能：
四、注意事项
广告单元 ID：确保使用正确的广告单元 ID。测试环境：在微信开发者工具中勾选“不校验合法域名”选项，以便测试广告功能。真机调试：广告功能需要在真机上测试，开发者工具中可能无法预览广告。