Giter VIP home page Giter VIP logo

cordova-admob-pro's Introduction

Show Mobile Ad with 1 line of javascript code

Platforms supported:

  • Android
  • iOS
  • Windows Phone

Tested with:

  • 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, NOT suported. (Reason: PhoneGap Build not accept binary files, even the jar or lib from official SDK)

Highlights:

  • Easy-to-use: Display Ad with single line of javascript code.
  • Powerful: Support banner, interstitial, and video Ad.
  • Max revenue: Support mediation with up to 8 leading mobile Ad services.
  • Multi-size: Multiple banner size, also support custom size.
  • Flexible: Fixed and overlapped mode, put banner at any position with overlap mode.
  • Smart: Auto fit on orientation change.
  • Same API: Exactly same API with other Ad plugins, easy to switch from one Ad service to another.
  • Up to date: Latest SDK and Android Google play services.
  • Good support: Actively maintained, prompt response.

Maximize your revenue with mediation adapters:

  • AdMob (built-in)
  • DFP (DoubleClick for Publisher, built-in)
  • Facebook Audience Network
  • Flurry
  • iAd
  • InMobi
  • Millennial Media
  • MobFox

How to use?

If use with Cordova CLI:

cordova plugin add com.google.cordova.admob

Quick start with cordova CLI

	# 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 com.google.cordova.admob

    # now remove the default www content, copy the demo html file to www
    rm -r www/*;
    cp plugins/com.google.cordova.admob/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 com.google.cordova.admob-facebook
cordova plugin add com.google.cordova.admob-flurry
cordova plugin add com.google.cordova.admob-iad
cordova plugin add com.google.cordova.admob-inmobi
cordova plugin add com.google.cordova.admob-mmedia
cordova plugin add com.google.cordova.admob-mobfox

Notice: If you want to add multiple mediations, please balance flexibility and binary size.

If use with Intel XDK: Project -> CORDOVA 3.X HYBRID MOBILE APP SETTINGS -> PLUGINS AND PERMISSIONS -> Third-Party Plugins -> Add a Third-Party Plugin -> Get Plugin from the Web, input:

Name: AdMobPluginPro
Plugin ID: com.google.cordova.admob
[x] Plugin is located in the Apache Cordova Plugins Registry

Javascript API Overview

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 Example Code

Step 1: Prepare your AdMob Ad Unit Id for your banner and interstitial

var ad_units = {
	ios : {
		banner: 'ca-app-pub-xxx/xxx', // or DFP format "/6253334/dfp_example_ad"
		interstitial: 'ca-app-pub-xxx/yyy'
	},
	android : {
		banner: 'ca-app-pub-xxx/zzz', // or DFP format "/6253334/dfp_example_ad"
		interstitial: 'ca-app-pub-xxx/kkk'
	}
};
// select the right Ad Id according to platform
var admobid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;

Step 2: Create a banner with single line of javascript

// it will display smart banner at top center, using the default options
if(AdMob) AdMob.createBanner( admobid.banner );

Or, show the banner Ad in some other way:

// or, show a banner at bottom
if(AdMob) AdMob.createBanner( {
	adId:admobid.banner, 
	position:AdMob.AD_POSITION.BOTTOM_CENTER, 
	autoShow:true} );

// or, show a rect ad at bottom in overlap mode
if(AdMob) AdMob.createBanner( {
	adId:admobid.banner, 
	adSize:'MEDIUM_RECTANGLE', 
	overlap:true, 
	position:AdMob.AD_POSITION.BOTTOM_CENTER, 
	autoShow:true} );

// or, show any size at any position
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} );

Step 3: Prepare an interstitial, and show it when needed

// 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();

Detailed Wiki

Quick start, simply copy & paste:

API Reference:

Other Documentations:

Screenshots

iPhone Banner iPhone Medium Rect
ScreenShot ScreenShot
iPad Medium Rect iPad SkyScraper
ScreenShot ScreenShot
iPad interstitial Any given X,Y:
ScreenShot ScreenShot
Android Banner Android Medium Rect
ScreenShot ScreenShot
Android Interstitial
ScreenShot

Tips

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.

See Also

Ad PluginPro series for the world leading Mobile Ad services:

More Cordova/PhoneGap plugins by Raymond Xie, find them in plugin registry.

If use in commercial project or need prompt 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.

cordova-admob-pro's People

Contributors

floatinghotpot avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.