Skip to main content

How To Add Banner Ads To PhoneGap Apps Using AdMob Pro Plugin

In this post I will show how you can add banner ads to your phonegap apps. I will be doing this on a blank app but you can do it to your existing app as well.

I also have tutorials on Banner (here) ads and Interstitial (here) ads for Ionic 2 if you are using Ionic framework.

Watch Video Tutorial Of This Post Here:

 

 

Step 1)

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

If you are wondering about the phonegap syntax here is a quick refresher

Phonegap create [appName] [appId-optional]

 

Step 2)

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

For iOS you need to run the following

 

 

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. The file that I am using here has nothing special just a few html tags. The thing that I want you to notice are the script tags which reffer the cordova.js and script.js file.

 

Step 5)

The CSS for our html file is as follows. There CSS shown here is for this specific app, header and footer areas are styled using it. You can skip adding a CSS file if you want, it will not make any difference when displaying ads.

 

Step 6)

Now we come to the meat of the matter by adding the actual javaScript code.

In the JavaScript what we need to do first it to bind to the deviceready event of PhoneGap. We are binding to it as soon as the windows loads by doing window.load.

Now when the device is ready to go we will execute our add code, you can do this by writing the code in the onDeviceReady function by it’s good to break it out as a separate function like so

The adSetter() function will contain our ad code, here we will prep the ads and ad-ID’s and then show them

As the autoShow is set to true in the AdMob.createBanner function the ads will be shown as soon as they are ready, but you can set it to false and show them later when the user does something like click a button or navigate to other page, etc but it is beneficial to show the ads at the start of the app.

 

Here is the complete JavaScript File:

 

All the code is on GitHub here.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so 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: