Setting up Admob in Ionic 1 mobile apps

In this tutorial we are going to see how to setup AdMob in Ionic 1 apps ,we'll see first how to create an ad in AdMob then how to install the necessary plugin (cordova pluign) for supporting AdMob inside Ionic apps so lets get started .

The first thing you need to do is signing up for an account at https://www.google.com/admob/ if you haven't already done this before.

After getting your AdMob account you need to create Ads units to show in your mobile apps.That's actually an easy to do thing.

So after creating our Admob account and then created the Ads unit to use in our app ,lets create an Ionic app and add the ad units to it .

Go ahead and generate a new Ionic 1 project using the CLI

ionic start ionic1-admob-demo  blank --id "com.techiediaries.demoadmob"

Next add your target platform .I'm going to add Android pltaform since I'm developing for Android and I have no MAC but feel free to use iOS if you are developing on a MAC machine.

ionic platform add android

Now we need to add a Cordova plugin for Admob support in Ionic

cordova plugin add cordova-plugin-admob

Or also you the plugin repo in GitHub

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

Next you need to open your app.js file and locate the run() method then add the following code inside this method

window.plugins.AdMob.setOptions( {
          publisherId: 'ca-app-pub-9293763250492023/8573028797',
          interstitialAdId: '',
          bannerAtTop: false, // set to true, to put banner at top
          overlap: false, // set to true, to allow banner overlap webview
          offsetTopBar: false, // set to true to avoid ios7 status bar overlap
          isTesting: false, // receiving test ad
          autoShow: true // auto show interstitial ad when loaded
});

window.plugins.AdMob.createBannerView();

You can also check the target platform first and then set the publisher id accordingly

        var publisherId = '';
        if(device.platform == "Android")
        {
             publisherId = "ca-app-pub-9293763250492023/8573028797" 
        }
        else
        {
             publisherId ="ca-app-pub-9293763250492023/8573028797"; 
        }       

Of course you need to replace the publisherId and interstitialAdId with your own ids from the unit ads we created earlier unless you want to me to make money from your app :D

You can play with all the options above as you like to get a better understanding.

Next attach your device and test

ionic run android       

Or ionic run ios

Conclusion

That's all for this tutorial .I hope this can be useful for your and good luck on making money with your apps.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status