参考
《从0到1上线微信小游戏》第十一节 接入微信小游戏广告
《Cocos Creator游戏实战》微信小游戏激励视频接入步骤及音乐中断恢复
一、接广告要先开通流量主
登录 https://mp.weixin.qq.com 管理后台，点击“推广”-“流量主”板块
image.png
想要接入广告，你的小游戏必须有"量"。微信给出的条件是游戏累计注册用户达到1000，也就是说要有1000个人玩过你的游戏，这其实是有一定难度的。除了让朋友帮忙，或者在相关论坛上推广外，我们其实可以使用微信给我们的"量"。
登录小程序后台后，点击设置->游戏设置，再点击红框中的申请公测即可。之后微信就会给你一些量，好让你的游戏快速累积到1000个用户。以下是一些注意点：
- 现在申请公测后是否给量好像是需要根据游戏质量来看。所以我建议大家刚开始可以自己推广，有点量之后再点击公测申请。
- 请确保游戏正常运行后再申请公测，不要让别人玩全是bug的游戏，流失率很大。
- 首次发布后90天内可以申请，尽量别浪费这次机会。
- 如果发现微信没有给量，大家可以去微信开发社区https://developers.weixin.qq.com/community/minigame发帖问下管理员(有很多人都在问)。
开通流量主之后，就可以新建广告位了
image.png
二、banner广告
参考https://developers.weixin.qq.com/minigame/dev/guide/open-ability/ad/banner-ad.html
1.创建
image.png
image.png
拿到广告位ID就可以用代码创建banner广告了
let bannerAd = wx.createBannerAd({
adUnitId: 'xxxx',
style: {
left: 10,
top: 76,
width: 320
}
})
bannerAd.show()
在cocos中可以这样使用
onLoad () {
this.bannerAd = null;
this.initBannerAd();
},
initBannerAd () {
if (typeof wx === 'undefined') {
return;
}
let { screenWidth } = wx.getSystemInfoSync();
let { screenHeight } = wx.getSystemInfoSync();
this.bannerAd = wx.createBannerAd({
adUnitId: '这里放你的广告ID',
adIntervals: 30, // 自动刷新频率不能小于30秒
style: {
left: (screenWidth-300)/2,
top: screenHeight-screenHeight/5,
width: 300,
}
})
this.bannerAd.onError(err => {
console.log('广告显示失败')
console.log(err)
})
}
注意以下几点：
a. 微信要求不能让广告挡住小程序界面自带的按钮，否则会造成玩家误点。也就是说，像我这款竖屏的游戏，如果将广告放在顶上(也就是style中的top设置为0)， 那么就一定会挡住小程序按钮：
image.png
由于style没有bottom属性，所以我们必须获取当前机型的宽高并进行计算，从而将广告放在底部位置。另外广告的宽度最小为300(就算是最小也会挡住)。
b. 一定要编写onError方法，如果没有编写，广告是不会显示的。你可以就简单的在里面打印一些日志，但该方法主要用来自适应UI。官方要求显示的广告不能阻碍玩家玩游戏，所以我们难免需要调整一些UI的位置好腾出空间来用于广告显示。而当广告显示失败时，我们最好将UI位置进行还原，好让界面看起来不那么别扭。
c.广告要显示全，不能放在屏幕外
2.显示隐藏
广告实例创建完毕后，我们只需要调用show和hide方法在想要的时刻显示或隐藏广告即可：
onLoad () {
this.bannerAd = null;
this.initBannerAd();
// 这里可能做了些什么
....
// 再显示广告
if (this.bannerAd)
this.bannerAd.show();
},
changeScene () {
// 场景跳转
if (this.bannerAd)
this.bannerAd.hide();
cc.director.loadScene('其他场景');
},
3.提前加载
参考Cocos Creator微信小游戏添加banner广告
在我们加载广告的时候，并不是直接onload出来的，是需要等待一段的加载时间。因此，如果直接创建的话，你将会等一段时间才能看到广告，特别是你需要在需要的地方才显示【.show()】，或者在不需要的时候【.hide()】，而销毁广告也是可以直接使用的，不过并不推荐在使用destroy方法的时候之前一段时间才onload广告，会造成广告还未生成但是还没destroy导致后面广告会一直出现在屏幕上方永远消不掉了。
创建广告this._bannerAd = wx.createBannerAd的时候，实际上我们最好是在创建一个common脚本然后在里面写一个bannerAd的参数并且赋值为null
export = {
bannerAd : null,
bannerAd2 : null,
windowWidth : null,
windowHeight : null,
}
接下来是加载广告，一般可以写在loading界面的onload()事件里，代码如下
var comm = require("./Common");
onload(){
if (typeof (wx) !== "undefined") {
// 手机屏幕信息
let winSize = wx.getSystemInfoSync({
success(res) {
comm.windowWidth = res.windowWidth;
comm.windowHeight = res.windowHeight;
}
});
console.log(comm.windowWidth,comm.windowHeight);
// 广告1和2
if(comm.bannerAd == null) {
// 广告
comm.bannerAd = window.wx.createBannerAd({
adUnitId: '**********************************',
style: {
left: comm.windowWidth/2 - 150,
top: comm.windowHeight - 90,
width: 300,
}
})
comm.bannerAd.onResize(()=>{
comm.bannerAd.style.left = comm.windowWidth/2 - 150 + 0.1;
comm.bannerAd.style.top = comm.windowHeight - comm.bannerAd.style.realHeight + 0.1;
});
comm.bannerAd.onError(function(res){
console.log(res);
})
}
}
}
这里有几点要说明，微信的广告是固定的大小比例，最小300的宽，宽度确定高度，所以不需要去管高度。第二点，微信的广告位置是以左上角为坐标系的，因此在计算位置的时候需要进行相对应的判断，如上代码我是让他显示在屏幕之下，+0.1则是为了考虑到苹果机型的底边条。
三、广告组件审核
当你开通流量主并接入广告组件代码后，每次上传版本审核都会触发广告组件审核：
image.png
注：此时版本审核包括代码审核和广告组件审核。如果广告组件审核失败不会影响代码审核和发布，微信只是会把你的广告给暂停显示了而已。代码审核失败的话只是不能发布新版本，之前发布的旧版本中的广告组件不会受影响，还是会正常显示。另外微信不会在审核广告组件过程中把你的广告给停了的，只有审核失败时才会。
如果广告组件审核失败，请大家去小程序后台的流量主页面查看失败原因(笔者截图的是审核通过时的样子)：
image.png
如果你觉得官方审核结果不合理，可以通过"微信广告助手"将你的异议发送到后台，之后会有人工和你对接的
四、激励视频
https://developers.weixin.qq.com/minigame/dev/guide/open-ability/ad/rewarded-video-ad.html
激励视频广告组件是自动拉取广告并进行更新的。在组件创建后会拉取一次广告，用户点击 关闭广告 后会去拉取下一条广告。
cc.Class({
extends: cc.Component,
properties: {
bgAudio: {
default: null,
type: cc.AudioClip
},
adResult: cc.Label
},
// LIFE-CYCLE CALLBACKS:
onLoad () {
this.videoAd = null; // 激励视频广告
this.initVideoAd(); // 初始化
this.playMusic(); // 播放背景音乐
},
playMusic () {
// 循环播放背景音乐
cc.audioEngine.playMusic(this.bgAudio, true);
cc.audioEngine.setMusicVolume(0.6);
},
initVideoAd() {
if (typeof wx === 'undefined') {
return;
}
// 创建激励视频广告实例，提前初始化
this.videoAd = wx.createRewardedVideoAd({
adUnitId: '这里放你自己的广告位ID'
});
this.videoAd .onError(err => {
console.log('激励视频展示失败');
console.log(err);
this.adResult.string = '激励视频展示失败';
this.adResult.node.parent.active = true;
});
this.videoAd.onClose(res => {
// 用户点击了【关闭广告】按钮
// 小于 2.1.0 的基础库版本，res 是一个 undefined
if (res && res.isEnded || res === undefined) {
// 正常播放结束，可以下发游戏奖励
console.log('奖励已经发放');
this.videoAd.offClose();
this.adResult.string = '奖励已经发放';
this.adResult.node.parent.active = true;
}
else {
// 提前关闭广告，不发放奖励
console.log('因播放中途退出，所以不下发游戏奖励');
this.videoAd.offClose();
this.adResult.string = '因播放中途退出，所以不下发游戏奖励';
this.adResult.node.parent.active = true;
}
cc.audioEngine.pauseMusic(); // 先强制暂停
cc.audioEngine.resumeMusic(); // 再恢复播放音乐
});
},
showVideoAd() {
if (!this.videoAd) {
return;
}
// 用户触发广告后，显示激励视频广告
this.videoAd.show().catch(() => {
// 失败重试
this.videoAd.load()
.then(() => videoAd.show())
.catch(err => {
console.log(err);
console.log('激励视频 广告显示失败');
this.adResult.string = '激励视频 广告显示失败';
this.adResult.node.parent.active = true;
})
});
},
closeBtn () {
// 关掉广告结果提示板
this.adResult.node.parent.active = false;
}
});
激励视频广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。
网友评论