Skip to main content

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

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 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. :-)

  • doodler

    Hi, your code works like a charm. a big thank you. but i am facing problem when i add this code to jquery mobile multipage template. Any help would be highly appreciated.

  • Colin Hamilton

    am having trouble with this running an interstitial.. not sure what the problem is.. are you able to do a demo with this ? Not sure what is going on..

  • Jonalyn Abejuela

    Great tutorial. How can we remove the popup (alert)? Thanks.

    • You can do that by removing the following from the code..
      alert(“device ready”);
      alert(navigator.userAgent);

  • Howard Monares

    The app won’t load. It says Unfortunately, probanner has stopped. To solve this, I manually add the following code to AndroidManifest.xml:

    • looks like you need to add permission in the config.xml file of you app or you can do it directly add what is mentioned in the error in the androidManifest.xml file which will be in you platforms folder..

      If you are using the latest version of phonegap make sure to add the white list plugin https://github.com/apache/cordova-plugin-whitelist

      The code works i have checked and got positive feedback as well
      Yours is a permission issue.

      Do let me know after changing the confi.xml and androidmanifex.xml file

      Regards

  • Shariful Islam

    thanks for the nice step by step tutorial but unfortunately my apk doesn’t show any ad 🙁 I am not getting any errors.

    using:

    node js version 4.2.3 x64

    cordova version 4.3.0

    cordova android version 4.1.1

    build apk using eclipse mars

    pls help me.

  • Mani sankar J

    In my mobile it is not showing ads where as in my friends mobile it is showing. Both are using mobile internet only. Where can be the problem.

  • MUhammad Irfan

    Hi Sir when i type the command phonegap platform add andriod then it loads the phonegap desktop software and returns the message “loadUrl deprecated .use loadURl instead “

    • You need to have android sdk installed and also you need to have the platform-tools for the version of android you choose to build for installed through the sdk

      I suggest you remove the phonegap desktop software and give it a try again

      -Regards

  • MUhammad Irfan

    whenever i type any command on command line its always load the phonegap desktop window and doesnot install anything else

  • MUhammad Irfan

    when i type the command “Phonegap platform add andriod ” it returns the message phonegap is not recognized as an internal or external command,operable program or batch file

  • MUhammad Irfan

    I have also installed the android sdk and platform tools for android ,Kindly guide me what should i do now

  • MUhammad Irfan

    and also guide me where i place andriod sdk folder in my project directory

  • Ard Zeqiri

    This is the error I Get when I type phonegap build android
    Please help?

  • Ard Zeqiri

    This is the error I get when I type phonegap build android
    Please help?

  • Bunty

    I am not getting any errors but it doesn’t shows any ads either. can you please help me out!

    • If you have just created an Ad ID..It might take some time for the ads to show up.

      Some of the common mistakes are not adding propper Ad ID’s and forgetting to add the admob plugin.

      The code works fine and I have used it in multiple apps.
      -Regards

  • amar jack

    Sir,i did in the same way but i saw only two alerts but no ads is being displayed.??what to do?and what is the xml code for plugin,i installed the admob pro but it’s better to specify it’s version.so what to do?

    • Check you ad Ids also make sure that your phone or emulator is connected to the internet.

  • job poratl

    Hi sir, i have added banner ads in my app and its appearing in my app..i clicked on ads but i am not getting impression in my admob account. can you tell me what might be the issue.

    • DO NOT CLICK on your ads. Your account will get banned. Impressions will come after some time. Impressions take some time to show up in the dashboard. Do not worry, they will show up. I can’t stress this more BUT NEVER click on your own ads.

      -Regards

      • job poratl

        ok..Thank you

  • Real Metal Comics

    where do I add the plugin in phonegap build is it in config.xml or where?

    • Yes, you have to add all the plugins in the config.xml file.

  • naveen

    i have used ios ad which is not working
    “ca-app-pub-6869992474017983/4806197152”
    can you please help me on this issue

    • what are you using phonegap or phonegap build?

      Make sure that you are calling the admob function after that deviceready event.

      You can ask the question on stackoverflow and I will take a look at your code.

      I would be happy to help you if you need longer assistance here pointdeveloper.com/hire-me/

%d bloggers like this: