# install cordova CLI
[sudo] npm install cordova -g
# install a small utility to run all the commands for you
[sudo] npm install plugin-verify -g
# Demo 1: run admob demo with sample index.html
plugin-verify cordova-plugin-admobpro
# Demo 2/3: run admob demo in game powered by PIXI/phaser HTML5 engine
plugin-verify admob-demo-game-pixi ios --landscape
plugin-verify admob-demo-game-phaser ios --landscape
# Demo 4: run admob demo in app powered by ionic/angular framework
plugin-verify admob-demo-app-ionic ios --portrait
Step 1: Create Ad Unit Id for your banner and interstitial, in AdMob portal, then write it in your javascript code.
// select the right Ad Id according to platform
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) { // for android
admobid = {
banner: 'ca-app-pub-xxx/xxx', // or DFP format "/6253334/dfp_example_ad"
interstitial: 'ca-app-pub-xxx/yyy'
};
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios
admobid = {
banner: 'ca-app-pub-xxx/zzz', // or DFP format "/6253334/dfp_example_ad"
interstitial: 'ca-app-pub-xxx/kkk'
};
} else { // for windows phone
admobid = {
banner: 'ca-app-pub-xxx/zzz', // or DFP format "/6253334/dfp_example_ad"
interstitial: 'ca-app-pub-xxx/kkk'
};
}
Step 2: Want a banner? single line of javascript code.
// it will display smart banner at top center, using the default options
if(AdMob) AdMob.createBanner( {
adId: admobid.banner,
position: AdMob.AD_POSITION.TOP_CENTER,
autoShow: true } );
Step 3: Want full screen Ad? Easy, 2 lines of code.
// preppare and load ad resource in background, e.g. at begining of game level
if(AdMob) AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );
// show the interstitial later, e.g. at end of game level
if(AdMob) AdMob.showInterstitial();
Or, you can just copy this admob_simple.js to your project, and ref in your index.html.
Platforms supported:
- Android
- iOS
- Windows Phone
Maximize your revenue with mediation adapters:
- AdMob (built-in)
- DFP (DoubleClick for Publisher, built-in)
- Facebook Audience Network
- Flurry
- iAd
- InMobi
- Millennial Media
- MobFox
- If use with Cordova CLI:
cordova plugin add cordova-plugin-admobpro
If use other tools or online build services, see:
- Apache Cordova CLI, v3.0+ (How To ...)
- Intel XDK, r1095+ (How To ...)
- IBM Worklight, v6.2+ (How To ...)
- Google Mobile Chrome App (How To ...)
- Adobe PhoneGap Build. (How To ...)
- Meteor (How To ...)
- Ionic/AngularJS (In ng-cordova ...)
Notice:
- Cordova team announce that the plugin registry is being migrated to npm, and recommended name rule is: cordova-plugin-xxx
- The plugin id in old cordova registry is
com.google.cordova.admob
, and now in npm iscordova-plugin-admobpro
- Read: Difference of com.google.cordova.admob and cordova-plugin-admobpro
- If build locally using
cordova-plugin-admobpro
, to avoid build error, you need install some extras in Android SDK manager (typeandroid sdk
to launch it):
# create a demo project
cordova create test1 com.rjfun.test1 Test1
cd test1
cordova platform add android
cordova platform add ios
# now add the plugin, cordova CLI will handle dependency automatically
cordova plugin add cordova-plugin-admobpro
# now remove the default www content, copy the demo html file to www
rm -r www/*;
cp plugins/cordova-plugin-admobpro/test/* www/;
# now build and run the demo in your device or emulator
cordova prepare;
cordova run android;
cordova run ios;
# or import into Xcode / eclipse
Optional mediations to increase your revenue (Read about AdMob Mediation Networks):
cordova plugin add cordova-plugin-admob-facebook
cordova plugin add cordova-plugin-admob-flurry
cordova plugin add cordova-plugin-admob-iad
cordova plugin add cordova-plugin-admob-inmobi
cordova plugin add cordova-plugin-admob-mmedia
cordova plugin add cordova-plugin-admob-mobfox
Notice: If you want to add multiple mediations, please balance flexibility and binary size.
Methods:
// use banner
createBanner(adId/options, success, fail);
removeBanner();
showBanner(position);
showBannerAtXY(x, y);
hideBanner();
// use interstitial
prepareInterstitial(adId/options, success, fail);
showInterstitial();
// set default value for other methods
setOptions(options, success, fail);
Quick start, simply copy & paste:
API Reference:
Other Documentations:
Demo projects:
- Using Cordova CLI to Add AdMob Plugin:
- Run AdMob Demo App on Android:
iPhone Banner | iPhone Medium Rect |
---|---|
iPad Medium Rect | iPad SkyScraper |
iPad interstitial | Any given X,Y: |
Android Banner | Android Medium Rect |
Android Interstitial | |
Some tips from recent stat data, FYI.
- Using AdMob Plugin Pro, higher and more stable fill rate.
- Using Interstitial, 5-10 times profit than banner Ad.
- Using SMART_BANNER, avoid using BANNER or FULL_BANNER.
Ad PluginPro series for the world leading Mobile Ad services:
- GoogleAds PluginPro, for Google AdMob/DoubleClick.
- iAd PluginPro, for Apple iAd.
- FacebookAds PluginPro, for Facebook Audience Network.
- FlurryAds PluginPro, for Flurry Ads.
- mMedia PluginPro, for Millennial Meida.
- MobFox PluginPro, for MobFox.
- MoPub PluginPro, for MoPub.
More Cordova/PhoneGap plugins by Raymond Xie, find them in plugin registry, or find them in npm.
If use in commercial project and need email/skype support, please buy a license, you will be supported with high priority.
Project outsourcing and consulting service is also available. Please contact us if you have the business needs.