How Integrating Google AdMob Advertisements in Ionic

Integrating Google AdMob Advertisements in Ionic

Advertisements, although not always the best way to monetise a venture, are one of the easiest ways to potentially earn some money from an application or website. Google’s advertisement platform allows you to easily implement advertisements without having to secure deals with advertisers yourself – you display Google’s ads and you get a percentage of the cost for those ads.

Google has a service specifically for mobile applications called AdMob. In this tutorial, we will be covering how to add Google AdMob to an Ionic application. We will cover both banner ads (which display a horizontal banner at the bottom of your application) and interstitial ads (which pop up and cover the entire screen).

This time we will learn how to install admob in ionic, here's how to make first empty ionic application or forward your own application

to create ionic applications: baca di

When you already have an ionic framework, you need to add platfrom first, depending on the project name and storage on your computer,

Integrate the AdMob Plugin

In order to use Google AdMob, we will need to use a Cordova plugin. There are a few plugins available that we can use, but we will be using one called AdMob Free. As you can likely tell from the name, this is a free to use community maintained plugin.

D:\myApp>ionic ionic cordova plugin add cordova-plugin-admob-free

and CMD will automatically save the folder as shown below:

add new platfrom

ionic cordova platform add android

In case you’re developing on a Mac, you can also choose to add:

ionic cordova platform add ios

If you are developing windows, you can also choose to add:

ionic cordova platform add windows

Add the following code to your app.js file (located in the www folder) inside the .run function:

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }

        if(window.plugins && window.plugins.AdMob) {
            var admob_key = device.platform == "Android" ? "ca-app-pub-ad unit code" : "ca-app-pub-ad unit code"; // your ad unit
            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'); }
            );
        }
    });
})

Note : replace the ca-app-pub-ad unit code with your ad code

Start the emulator by running:

ionic cordova build android