I was kindly asked to write this article and make it as detailed as humanly possible. So Filipe this one is for you.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
 
Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)
 

Preparation

 
This tutorial will require these prerequisites. If you have a previous Ionic installation, you can skip everything mentioned in this chapter.
 
  • Android Environment (or iOS if your working on a MacOS)
  • nodeJS
  • Ionic
  • Cordova
If you don’t have previous Ionic Framework experience, find more information here: Ionic Framework | Installation Guide.
 

1. Update Ionic & Cordova

 
Before we can start make sure you have the latest nodeJS installation, without it, you’ll not be able to install Ionic and Cordova properly.
 
If everything went well with nodeJS, let’s continue with Ionic and Cordova:
 
npm update -g cordova ionic
 

2. Create a New Project

 
ionic start IonicAdMobDemo blank
cd IonicAdMobDemo
 
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
 
This example requires Android platform:
 
ionic platform add android
 
For MacOS users, do it like this:
 
ionic platform add ios
 

3. Download ngCordova archive

 
ngCordova is a collection of 63+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS. While we can make this work without ngCordova, it’s much more practical this way. This collection also holds many Ionic Framework compatible plugins.
 
Download ngCordova zip file, here’s site link:
 
Official Site Docs Download Link
 
 
Unzip this archive, find a file name called: ng-cordova.min.js, it should be available at this location: ng-cordova-master\dist\.
 
Open your newly created project directory and copy ng-cordova.min.js to this location: IonicAdMobDemo\www\js.
 
Now include this location to index.html located at IonicAdMobDemo\www; add it above cordova.js file, like this:
 
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
 

4. Install Cordova AdMob Plugin

 
Add required plugins:
 
cordova plugin add https://github.com/floatinghotpot/cordova-plugin-admob.git
cordova plugin add cordova-plugin-whitelist
 
Install Whitelist plugin only if you’re using Cordova 4.0 +. Without it you’ll receive “Application Error: There was a network error.” error.
 
Npm - AdMob
 
 
 

5. Create an AdMob Account

 
We can’t continue without an AdMob account. So if you have one, please skip this tutorial.
 
Go to this site and authorize yourself with your Google account:
 
AdMob Home
 
 
Apply for AdMob service:
 
 
 
 
 
 
Follow required steps. You will need to wait for few days before Google decides if you can have permission to use this service. On the other hand, you will be able to use this service right now if you have an existing AdSense account.
 
When you finally sucesfully authorize yourself, look at the top left corner and click on Monetize tab, then click a red button called Monetize New App.
 
 
 
 
 
 
When you finally click Save button you will be given Ad unit ID. You can’t miss it, it’s a string that starts with ca-app-pub-. For the future reference we’ll call it an ad key.
 

Development

 
At this point, you should have everything set up and ready, we can start working on our example.
 
Go to IonicAdMobDemo project directory and find app.js, alter angular.module line and include ngCordova service, like this:
 
var app = angular.module('starter', ['ionic', 'ngCordova'])
 
Open index.html file, add a controller to ion-pane directive:
 
  <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">AdMob Example</h1>
      </ion-header-bar>
      <ion-content ng-controller="AdmobController">
      </ion-content>
   </ion-pane>
 
Initialize this controller in app.js file; don’t forget to inject $cordovaAdMob service:
 
app.controller('MotionController', function($scope, $cordovaAdMob, $ionicPlatform, $window) {

});
 
If you’re using Cordova 4+, you will need to check if there’s a Whitelist plugin installed with your project. If you have it, add this security meta tag to your index.html HEAD content:
 
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
 
Without it your application will throw an error during the app initialization, after that it will continually throwing no security meta-tag found. While not a blocking point, constant console log warnings will make it hard to do any debugging.
 
We’ll be using these two functions:
 
//Show banner ads
$scope.showBannerAd = function() {

    try {

        console.log('Show Banner Ad');			

        $cordovaAdMob.createBannerView({
            adId: adMobId.admob_banner_key,
            position: adMobPosition.BOTTOM_CENTER,
            isTesting: true,
            autoShow: true
        });

    } catch (e) {
        alert(e);
    }		
}

//Show interstitial ads
$scope.showInterstitialAd = function() {

    try {

        console.log('Show Interstitial Ad');			

        $cordovaAdMob.createInterstitialView({
            adId: adMobId.admob_interstitial_key,
            isTesting: true,
            autoShow: true
        });

    } catch (e) {
        alert(e);
    }		
}	
 
A little introduction. AdMob handles two kinds of ads, banner, and interstitial ads. Banner ads are smaller advertisements shown on the application inner edge. On the other hand, interstitial ads are full-screen advertisements.
 
Both functions require a configuration key you created in the Create an AdMob Account chapter. Each ad type requires a unique key.
 
// Configuration object holding kyes
var adMobId = {
    admob_banner_key: 'YOUR BANNER KEY GOES HERE',
    admob_interstitial_key: 'YOUR INTERSTITIAL KEY GOES HERE',
};

// Configuration object holding banner positions
var adMobPosition = {
    BOTTOM_CENTER: 8 // BOTTOM CENTER
};	
 
One last thing, this example was configured to show test ads. Application will display normal ads if you change isTesting parameter to false:
 
$cordovaAdMob.createInterstitialView({
    adId: adMobId.admob_interstitial_key,
    isTesting: false, // Use false for normal ads
    autoShow: true
});	
 
Continue to the next page

  • Dinesh Raja

    Will be good if you add screenshots of the end product of your tutorial.
    Just a humble request 🙂

    • I’ll do it even better. I’ve recorded a video of a final application. I’ll post it as soon as I come home.

  • Filipe

    Perfect! Worked like a charm.
    Thanks.

  • How would you go about preparing the interstitial so it is ready as soon as it is called?

    • I don’t think it’s possible with this plugin, you would need to call it synchronously, where by default it works asynchronously.

      • I was able to get both features working, but I ended up having to use the newest version of the Cordova AdMob Pro plugin.

  • muhsin k

    Showing
    TypeError: Cannot read property ‘AdMob’ of undefined(…)

  • Tomas Baena

    Thank you!

  • Sorry for a late response, I was on vacation. Try it several more times, if problem is still there report it to the official plugin repo.

  • De. Disq.

    Hi, thanks a lot for this amazing tutorial. Any idea on how to get admob in an inline position instead of at the bottom? For example, within a list or just after the content starts?

    • Technically you can’t do that with hybrid apps, only native. These ads behave like fixed positioned DOM elements (when used with this plugin), you can’t include them into HTML content. You could track scroll location and change ad position using this data (.showBannerAtXY(x, y)) but that’s pain in the neck.

      • De. Disq.

        That’s sad 🙁 any other way to get inline google ads working ?

        • None that will work with hybrid mobile applications.

  • Prabhjas Singh Bajwa

    Hi, Thanks for your tutorial. But i’m unable to display ads checked your whole tutorial. Also going step by step but its not working for me. Please help.