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/