Hi everyone, in this tutorial I will explain how to implement Google Admob advertising within our PhoneGap project.

Maybe you know AdMob is one of the largest networks of mobile advertising around the world and provides solutions to discover, create and profitable brands in the field of mobile Internet.

Mobile devices are a platform for critical communications.

The industry creative application developer first choice is Admob .in my previews article show a process to adding AdMob ads.

but this process is only html5 application developers who develop a project with PhoneGap Cordova.

Getting started with Admob

The first thing we need is checking into Admob clicking here , we need to have a Google account and follow the steps we form that appears on the following screens.Press the button “Monetizing a new app“.


PhoneGap ads

Place the package name of our application and select to which platform will be the banner.

Implementation Admob PhoneGap plugin

The plugin for iOS and Android you can find it at the following URL Github, a part of a test project:

https://github.com/floatinghotpot/testadmob/tree/master/plugins/com.rjfun.cordova.plugin.admob

How to add with command line?

Once we have our PhoneGap project created we need to add the plugin via the command line:


cordova plugin add https://github.com/floatinghotpot/cordova-plugin-admob.git

Once we added the plugin must implement the necessary linkage to our Admob account code.


Step 1: Create a file called admob.js inside the JS folder of your project.

Step 2: Add the following code to our admob.js file


function miAdmob() { 
      var admob_ios_key = 'admob ios key here'; //put your admob IOS id here 
      var admob_android_key = 'admob android key here'; //put your admob ANDROID id here 
      var adId = (navigator.userAgent.indexOf('Android') >=0) ? 
      admob_android_key : admob_ios_key; //Detects if the mobile is ios or android and puts the id you need

if ( window.plugins && window.plugins.AdMob ) {

var am = window.plugins.AdMob;
am.createBannerView(
{
‘publisherId’: adId, //Add your publisher id
‘adSize’: am.AD_SIZE.BANNER, // for banner type
‘bannerAtTop’: false //Indicates whether you want the banner above all (true) or down at all (false)
}, function() {
am.requestAd( { ‘isTesting’:true }, function() {
am.showAd( true );
}, function() {
alert(‘Failed to load the ad’);
})
}, function(){
alert( “Failed to create the ad view” );
});
} else {
alert(‘The AdMob plugin not ready.’);
}
}
function showAd( bshow ) {
if ( window.plugins && window.plugins.AdMob ) {
var am = window.plugins.AdMob;
am.showAd( bshow );
} else {
alert(‘The AdMob plugin not ready’);
}
}

An interesting point to note is that if we put bannerAtTop value true, the banner will appear on top of everything and if you set it to false will appear in the footer of our app.


Step 3: Within the index.js file onDeviceReady we call our initialization function
admob

"miAdmob ()"

onDeviceReady: function () { 
        app.receivedEvent ('deviceready'); 
        miAdmob (); 
    }

Step 4: Now need to add admob.js to our index.html file



Step 5: Now add the button on you template showing ads.


displayadmobads

This would have implemented the plugin to add advertising in our app. I hope you enjoy it and will be helpful. Please don’t forget to share this article with your circle.

maybe someone to help this article for your sharing. In last if you face the problem by doing this feel free comment here I will hardly try to solve your problem.

Leave a Reply

avatar
  Subscribe  
Notify of