您的位置:首页 > 其它

ionic添加admob广告教程

2016-04-01 16:39 204 查看
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)

用途: 检查全屏广告资源是否已经准备就绪。通常无需调用,最佳方式是响应相关的事件。

原文链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic-admob/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: