Skip to main content

How To Add Banner Ads To Ionic 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 Ionic apps. I will be doing this on a new app but you can do it to your existing app as well. I have also written a post on Adding banner ads to Ionic 2 apps, so if you are looking for Ionic 2 apps You can check that post out as well.

I no longer recommend using the AdMob Pro plugin. There is a much better AdMob Free plugin that you should use. I have written a blog post onĀ  how you can implement banner ads using it. I highly recommend that you use that plugin over the AdMob Pro plugin.

 

Step 1)

We will first start by creating a new Ionic 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)

Now we will need to add the following code to the $ionicPlatform.ready() in the app.js file

So the finished app.js file looks like this:

 

NOTE: The app.js file will be different for each template namely tabs,bank,sideMenu, make sure you add the code to the $ionicPlatform.ready() function and no to any function inside it.

Watch Video Tutorial Of This Post Here:

Got A Question?

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

 

Want to learn how to implement Google AdMob Ads to you Ionic Apps?I have written an E-book which goes in details in implementing various Ad Formats and Monetization techniques using this plugin. You can take a look at it here.
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. :-)

  • Adrenaline Junkie

    good job

  • Pingback: How To Add Interstitial Ads on Navigation To Ionic Framework Apps Admob pro - pointDeveloper.com()

  • Pingback: Ionic 2 Banner Ads With AdMob Pro Plugin - pointDeveloper.com()

  • Who solved this problem ?
    ionic plugin add com.google.cordova.admob

    Updated the hooks directory to have execute permissions
    Error: Registry returned 404 for GET on https://registry.npmjs.org/com.google.cordova.admob

    • you can add the plugin using –> plugin add cordova-plugin-admobpro

      the post has been updated.

      Thanks

      • Hi , I will install cordova-plugin-admobpro to new project , but when build android apk . it’s failed to build the error in admobpro . can you download admob plugin before update post. I want to install manual in my project ?

        • You can remove the current plugin by doing

          –> ionic plugin remove plugin-name

          then add the plugin the new way. Both ways will add the same plugin but the old way does not work anymore, So you have to add the plugin using the following

          –> cordova plugin add cordova-plugin-admobpro
          OR
          –> ionic plugin add cordova-plugin-admobpro

          -Thanks

          • what’s ionic framework version you use? command line – “ionic -v” ?

          • I am using the latest beta version 2.0.0-beta.36

  • nishant ber

    I am trying hard in ionic 1 but not get success, plz help me

  • naveen

    it is not working please find below errors:

    C:AGS_PROJECTSMM_ProjectMM_GIT_CODEwindowsapp_bannerMyNewApp>cordova plugin add cordova-plugin-admobpro
    Error: Failed to fetch plugin cordova-plugin-admobpro via registry.
    Probably this is either a connection problem, or plugin spec is incorrect.
    Check your connection and plugin name/version/URL.
    “npm” command line tool is not installed: make sure it is accessible on your PATH.

    C:AGS_PROJECTSMM_ProjectMM_GIT_CODEwindowsapp_bannerMyNewApp>

    C:AGS_PROJECTSMM_ProjectMM_GIT_CODEwindowsapp_banner>ionic start MyNewApp Tabs
    Unable to find starter template for Tabs

%d bloggers like this: