Using Admob With Ionic Framework

Having your mobile application generate some kind of revenue is usually critical. Not many people want to spend endless hours slaving over an app without some kind of profit. Luckily, using Ionic Framework with Apache Cordova device APIs in addition to a nifty and easy to use Admob plugin, you can take full advantage of Google Admob in your cross platform application.

To use Admob with Ionic Framework we will be using the floatinghotpot Cordova plugin.

If you’re using Ionic 2, you should visit the revised tutorial I wrote to accommodate the Angular differences. Otherwise, continue for Ionic Framework 1 and AngularJS.

In your Ionic Framework project, make sure that you have already added the Android and iOS platforms. Run the following commands if you haven’t:

ionic platform add android
ionic platform add ios

Remember, if you are planning to develop for iOS, you must be using a Mac with Xcode installed.

The next step is to add the floatinghotpot plugin into your project. Taken directly from the plugin’s README, run the following commands from the command line while in your project’s directory.

cordova plugin add com.rjfun.cordova.plugin.admob

Now we are going to deviate from the plugin’s README since we are using AngularJS rather than just Cordova and JavaScript. To keep things simple, we are going to have the banner ad show up on every screen at the bottom. If you wanted to be fancy you could expand upon this tutorial however you please.

var admobApp = angular.module('myapp', ['ionic'])
    .run(function($ionicPlatform, $ionicPopup) {
        $ionicPlatform.ready(function() {
            if(window.plugins && window.plugins.AdMob) {
                var admob_key = device.platform == "Android" ? "ANDROID_PUBLISHER_KEY" : "IOS_PUBLISHER_KEY";
                var admob = window.plugins.AdMob;
                admob.createBannerView(
                    {
                        'publisherId': admob_key,
                        'adSize': admob.AD_SIZE.BANNER,
                        'bannerAtTop': false
                    },
                    function() {
                        admob.requestAd(
                            { 'isTesting': false },
                            function() {
                                admob.showAd(true);
                            },
                            function() { console.log('failed to request ad'); }
                        );
                    },
                    function() { console.log('failed to create banner view'); }
                );
            }
        });
    });

The device.platform call is one of the Cordova API calls. If the platform is Android, the plugin will use the Android key that you provided, otherwise it will use the iOS key. Please note that no ads are going to show up in your web browser since this plugin is for Android, iOS, and Windows Phone only.

Here is an example of what this advertisement looks like on Android:

You might be concerned about what happens to the content in your application. The good news is, by default it will not display on top of your content. The plugin will push all content above the ad, even if you’re using a footer. In the example image I provided you’ll notice that I am using a footer in addition to the advertisement and it works fine.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.