1.在你的ionic项目中使用如下命令添加admob插件：
cordova plugin add cordova-plugin-admobpro |
2.添加完成后，在$ionicPlatform.ready的回调中添加如下代码：
if (window.AdMob) {
var adMobId;
if (ionic.Platform.isIOS()) {
adMobId = {
banner: 'your－ios－id',
interstitial: 'your－ios－id'
};
} else if (ionic.Platform.isAndroid()) {
adMobId = {
banner: 'your－android－id',
interstitial: 'your－android－id'
};
}
if (adMobId) {
// Banner广告
AdMob.createBanner({
adId: adMobId.banner,
autoShow: true,
bgColor: 'black',
position: AdMob.AD_POSITION.BOTTOM_CENTER,
isTesting: false,
success: function () {
console.log("createBanner success!")
},
error: function (err) {
console.log("createBanner fail!", err)
}
});
//全屏广告预加载
AdMob.prepareInterstitial({
adId: adMobId.interstitial,
autoShow: false
});
}
else {
console.log("AdMob is null");
}
}
|
在安卓环境下记得添加如下包：
然后你的ionic程序就可以出现广告赚钱啦。
当然，我有在很多时候想调整广告的位置或样式之类的，那么下面我们来看一下广告的各种添加方式：
// 显示广告条，默认在顶端的智能广告条
if(AdMob) AdMob.createBanner( admobid.banner );
// 或者, 在底部显示广告条
if(AdMob) AdMob.createBanner( {
adId:admobid.banner,
position:AdMob.AD_POSITION.BOTTOM_CENTER,
autoShow:true} );
// 或者，已浮动模式，在底部显示方块广告
if(AdMob) AdMob.createBanner( {
adId:admobid.banner,
adSize:'MEDIUM_RECTANGLE',
overlap:true,
position:AdMob.AD_POSITION.BOTTOM_CENTER,
autoShow:true} );
// 或者，在指定的位置，显示指定大小的广告
if(AdMob) AdMob.createBanner( {
adId:admobid.banner,
adSize:'CUSTOM', width:200, height:200,
overlap:true,
position:AdMob.AD_POSITION.POS_XY, x:100, y:200,
autoShow:true} );
// 显示全屏广告，例如，在某个游戏关卡结束的时候
if(AdMob) AdMob.showInterstitial();
|
具体方法：
AdMob.setOptions(options)
给其他的方法调用设置默认参数，所有的项目都是可选的，如果没有则用默认值。
参数 options:
{
bannerId, //string, 设置广告条的默认广告 ID，例如 'ca-app-pub-xxx/xxx'
interstitialId, //string, 设置全屏广告的默认广告 ID，例如 'ca-app-pub-xxx/xxx'
adSize, string, //设置广告条的大小，默认值:'SMART_BANNER'.
width, //integer, 广告条的宽度, 需要指定 adSize:'CUSTOM'. 默认值: 0
height, //integer, 广告条的高度，需要指定 adSize:'CUSTOM'. 默认值: 0
overlap, //*boolean@, 浮动模式，允许广告条覆盖在Web内容的上面，否则的话会把Webview向上或者向下推，避免遮挡. 默认值:false
position, //integer, 广告条的位置，, 默认值:TOP_CENTER （上面居中）.
x, //integer, x坐标. 当 overlap:true 和 position:AdMob.AD_POSITION.POS_XY 的时候有效. 默认值: 0
y, //integer, y坐标. 当 overlap:true 和 position:AdMob.AD_POSITION.POS_XY 的时候有效. 默认值: 0
isTesting, //boolean, 用于测试，当设置为 true 的时候，可以接收测试广告，发布的时候，请务必设置为 false，否则不计算收益。
autoShow, //boolean, 当广告准备就绪时自动显示，否则需要调用 showBanner 或者 showInterstitial
orientationRenew, //boolean, 在屏幕方向发生变化时，强制销毁和重新创建广告条，一般情况不用设置。
adExtras, //json object, 为广告显示设置额外的色彩风格.
}
|
其中：
adSize的值可能为：
'SMART_BANNER', // 推荐，自动适应屏幕大小和高度
'BANNER',
'MEDIUM_RECTANGLE',
'FULL_BANNER',
'LEADERBOARD',
'SKYSCRAPER',
'CUSTOM', // 用于自定义大小，需要指定参数 'width' 和 'height'
position的值可能为：
AdMob.AD_POSITION.NO_CHANGE = 0,
AdMob.AD_POSITION.TOP_LEFT = 1,
AdMob.AD_POSITION.TOP_CENTER = 2,
AdMob.AD_POSITION.TOP_RIGHT = 3,
AdMob.AD_POSITION.LEFT = 4,
AdMob.AD_POSITION.CENTER = 5,
AdMob.AD_POSITION.RIGHT = 6,
AdMob.AD_POSITION.BOTTOM_LEFT = 7,
AdMob.AD_POSITION.BOTTOM_CENTER = 8,
AdMob.AD_POSITION.BOTTOM_RIGHT = 9,
AdMob.AD_POSITION.POS_XY = 10, // 用于指定位置 X 和 Y, 参见 'x' and 'y'
AdMob.createBanner(adId/options, success, fail)
创建广告条. 这个方法可以传入广告的ID字符串，也可以传入Json对象以包含更多的选项。
参数:
{
adId, //string, 广告条的 ID.
options, //json object, 可以附带参数选项.
success, //function, 成功之后的回调函数，可以为 null 或者 缺失.
fail, //function, 失败之后的回调函数，可以为 null 或者 缺失.
}
|
AdMob.showBanner(position)
用途: 在指定的位置显示广告条. 也可以用来移动广告条，而无需销毁和重新创建广告条。
参数:
position, integer, 参见 AdMob.setOptions()
AdMob.showBannerAtXY(x, y)
用途: 在制定的坐标位置 (x,y) 显示广告条.
参数:
x, integer, 像素. 从屏幕左边计算的偏移量.
y, integer, 像素. 从屏幕顶端计算的偏移量.
AdMob.hideBanner()
用途: 隐藏广告条。暂时从屏幕上移除，但没有销毁，稍后还可以继续显示.
AdMob.removeBanner()
用途: 销毁广告条，不再显示时调用，例如用户已经付费，去掉广告。
AdMob.prepareInterstitial(adId/options, success, fail)
用途: 准备全屏广告资源，用于后续显示。
友情提示: 通常全屏广告需要较多的图片资源比广告条稍多，因此流量也会稍多一点，通常需要一点点时间来准备，这样用户无需等待，体验会更好。
AdMob.showInterstitial()
用途: 当全屏广告准备就绪时，显示给用户看。
AdMob.isInterstitialReady(callback)
用途: 检查全屏广告资源是否已经准备就绪。通常无需调用，最佳方式是响应相关的事件。