How to add Banner Ads to jQuery Mobile Apps with PhoneGap using Admob

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post i will show how you can add Banner ads to a Phonegap app with admob that is using jQuery Mobile.

Before we begin let me tell you that i will be doing another post on adding Interstitial ads so well.

Step 1)

We will first start by creating a new phoneGap project by issuing the following command in the command prompt.

 

Step 2)

Now we will need to add the platform to out app. So will do the following command

 

Step 3)

As we will be using the AdMob Pro plugin we will need to download it in our project. We will do that by the following command

You can read more about the plugin in the Admob pro plugin documentation

Step 4)

For this tutorial I will use a simple index.html file you can use your existing file.

 

As you can see i have done the necessary linking to the jQuery and jQuery-Mobile javascript and css files. I have also added the reference to cordova.js file.

As you can see we have two internal pages and we will link to one external page. One thing to note here is that we are loading the external page using ajax.

Step 5)

Now we will create the external page this is not necessary but as we will test the app in a multi-page scenario we will do this here.

 

Step 6)

Now we will create the index.js file and in it we will ad the necessary ad code. jQuery Mobile has a tone of page events like pagecreate, pagebeforecreate etc. So feel free to choose any that you find appropriate but for this example i will bind to the pagecreate event and we will put all the ad code in there.

Notice that i am binding to the firstpage with the id #firstpage, here is the full index.js file

 

 Got A Question?

Hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: