admob cordova插件 / cordova admob 插件 教程

Cordova, Phonegap and Intel XDK的Google AdMob plugin,支持ios and android,支持 老版本的admob和新版本的admob,

通过数行js在你的html5应用中插入admob广告。接口简单。

Phonegap admob插件是基于phonegap4.5和cordova5.0编译，包含admob 7.6 ios sdk和admob安卓sdk 8

phonegap admob插件官方网站https://github.com/admob-google/admob-cordova

你可以毫无限制的免费使用这个插件

Google AdMob plugin for Cordova, Phonegap and Intel XDK ,support ios and android,support admob v1 and admob v2 ,Monetize your html5 app with one javascript line.api is easy to use.<br/>

admob phonegap plugin(admob cordova plugin) is built base on 

- phonegap 3.4 or cordova 5.0

- admob ios sdk 7.6.0 

- admob android sdk 8

- phonegap admob plugin home:https://github.com/admob-google/admob-cordova<br/>

- project can been used with no limit

1.添加 Admob PhoneGap 插件

通过npm命令添加phonegap admob插件，命令如下：

install admob phonegap plugin install with npm

npm install admob
cordova plugin add admob

通过 cordova命令行添加插件

先下载插件 ,然后通过cor，命令如下：dova本地命令进行添加

    cordova plugin add c:\phonegap-admob-plugin 

或者通过cordova在线安装，命令如下：

use the cordova command，download the plugin ,then install with local location

    cordova plugin add https://github.com/admob-google/admob-cordova.git
或者使用phonegap命令安装<br/>

先下载phonegap Admob插件到本地 ,然后通过phonegap本地命令安装，命令如下：

or install cordova plugin online 

    phonegap plugin add c:\phonegap-admob-plugin 

如果您是使用phonegap build在线编译 ,则可以通过添加下面的信息到配置文件中<br/>

use phonegap builder ,add config

    <gap:plugin name="com-admob-plugin" version="5.3.0" source="npm"/>

2.设置phonegap Admob插件

初始化和设置Phonegap Admob插件需要在deviceready事件之后进行，代码如下

init admob phonegap plugin,init plugin after deviceready event 

    admob.initAdmob("admob banner ID","admob interstitial ID");//admob id 格式类似于 ca-app-pub-xxxxxxxxxxxxxxxxxxx/xxxxxxxxxx

3.相对定位显示Admob横幅广告

admob.BannnerSize里面包含了常用的广告尺寸，你也可以自定义未被包含的尺寸，不过你所定义的尺寸必须是admob支持的尺寸

admob.Position里面包含了9中相对布局，相对布局展示横幅广告代码如下

show banner  at relation position 

there are some banner size in admob.BannerSize,and you can create your own banner size that is available in admob platform.

admob.Position hold all relation position const

    admob.showBanner(admob.BannerSize.BANNER,admob.Position.TOP_APP);//show banner at the top of app 

你可以给admob设置更多的参数，例如设置admob 测试模式，设置admob 儿童应用，代码如下

and more you can set more param for admob such as test mode and is your app made for child.

var admobParam=new  admob.Params();

        //admobParam.extra={'keyword':"admob phonegame"};

        //admobParam.isForChild=true;

        admobParam.isTesting=true;

        admob.showBanner(admob.BannerSize.BANNER,admob.Position.TOP_CENTER,admobParam);

4.另一种方式展示admob横幅广告

你可以通过绝对布局来展示admob横幅广告，其如相对布局一样简单，代码如下

show banner  at absolute position

you can put admob banner at absolute position as easy as relation position.

    admob.showBannerAbsolute(admob.BannerSize.BANNER,0,70);//show banner at absolute position x 0,y 70

###  5.phonegap接入admob全屏广告 

在phonegap和cordova，xdk应用里面接入admob全屏广告是和一样的步骤

先缓冲加载广告，收到onInterstitialReceive的时候展示广告或者手动控制展示，例如在游戏结束的时候，代码如下

show admob Interstitial 

show admob Interstitial in phonegap,cordova or xdk application is the same step.

cache Interstitial ,and then show it in onInterstitialReceive function or show it when your game over.

 document.addEventListener(admob.Event.onInterstitialReceive, onInterstitialReceive, false);//show in ad receive event fun need add receive listener

 admob.cacheInterstitial();// load admob Interstitial

 function onInterstitialReceive(message) {//show in ad receive event fun

     admob.showInterstitial();

 }

 function onGameOver(){//call this fun to show when game over

        admob.isInterstitialReady(function(isReady){

            if(isReady){

                admob.showInterstitial();

            }

        });

  }

6.admob广告事件的处理

phonegap admob插件支持admob所有的广告事件，和onInterstitialReceive一样的流程

所有的事件预定义在admob.Event类里面，代码如下

handle admob ad event

you can handler all native event of admob ,as onInterstitialReceive <br/>

all event type is in admob.Event

```

function onAdmobEvent (message) {

    //do some on admob event

}

document.addEventListener(admob.Event.onAdmobBannerDismiss, onAdmobEvent, false);

document.addEventListener(admob.Event.onAdmobBannerFailedReceive), onAdmobEvent, false);

document.addEventListener(admob.Event.onAdmobBannerLeaveApplication), onAdmobEvent, false);

document.addEventListener(admob.Event.onAdmobBannerPresent), onAdmobEvent, false);

document.addEventListener(admob.Event.onAdmobBannerReceive), onAdmobEvent, false);

document.addEventListener(admob.Event.onAdmobInterstitialDismiss), onAdmobEvent, false);

document.addEventListener(admob.Event.onAdmobInterstitialFailedReceive), onAdmobEvent, false);

document.addEventListener(admob.Event.onAdmobInterstitialLeaveApplication), onAdmobEvent, false);

document.addEventListener(admob.Event.onAdmobInterstitialPresent), onAdmobEvent, false);

document.addEventListener(admob.Event.onAdmobInterstitialReceive), onAdmobEvent, false);

```

###  7.其他的功能

1.移除admob横幅广告

hide admob banner

    admob.hideBanner()

2.检查admob广告是否已经加载完毕

test if Interstitial has loaded success

```

admob.isInterstitialReady(function(isReady){

    if(isReady){

        alert("admob Interstitial loaded");

    }

});

```

3.在example文件夹下的例子里面你能找到更多的用法和帮助信息<br/>

for more usage ,ref to files in Example folder ,it is a good way to get start

4.Admob ios sdk使用了ios的idfa标志，提交的时候注意

Admob sdk for ios used IDFA ,so remember to check up app service as ad.

Admob Phonegap运行效果图