Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Show mobile Ad with cordova AdMob plugin

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 422
    Comment on it

    In this post, you will learn how to show mobile ads in your screens. Cordova provides a plugin for google admob. Using this plugin you can show mobile Ad with a line of JavaScript code. It is designed for use in HTML5 based hybrid applications or mobile games.

    It supports the following Ad types:

    • Banner
    • Interstitial (text, picture, video)
    • Reward Video
    • IAP Ad
    • Native Ad (Google new product, on roadmap)

    Installing the plugin:
     

    cordova plugin add cordova-plugin-admobpro

    For using this plugin in android, you need to download some extras android sdk:

     


     

     

    Using the plugin:
    To use this plugin, first you need to create Ad Unit Id for your banner and interstitial, in AdMob portal.  Then this id will be used in your javascript code.

    // select the right Ad Id according to platform
      var admobid = {};
      if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos
        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'
        };
      }

    Methods for banner:

    AdMob.createBanner(adId/options, success, fail): To create a banner Ad.

    // it will display smart banner at top center, using the default options
    AdMob.createBanner({
        adId: admobid.banner,
        position: AdMob.AD_POSITION.BOTTOM_CENTER,
        autoShow: true,
        success: function(){
        },
        error: function(){
            alert('failed to create banner');
        }
    });


    AdMob.showBanner(position): To show banner Ad at a position.
    AdMob.hideBanner(): It will hide the banner and remove it from screen but you can use it later when needed.
    AdMob.removeBanner(): It will destroy the banner, you can not use the banner after calling this method.

    Methods for Interstitial:

    AdMob.prepareInterstitial(adId/options, success, fail): It will prepare Interstitial add for showing.

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


    Hope, this will help you to create mobile ads in your application. :)

    Show mobile Ad with cordova AdMob plugin

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: