ionic添加admob广告教程

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/