Example

 
This is what our application looks like:
 

HTML

Application main page.
 
<!DOCTYPE html>
<html ng-app="starter">
  <head>
    <meta charset="utf-8">
	<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">		
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
	<script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-controller="AdmobController">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">AdMobDemo</h1>
      </ion-header-bar>
      <ion-content>
		<button class="button button-full button-positive " ng-click="showBannerAd();">Show Banner Add</button>
		<button class="button button-full button-positive " ng-click="showInterstitialAd();">Show Interstitial Add</button>
      </ion-content>
    </ion-pane>
	
  </body>
</html>
 

JavaScript

Application JavaScript file.
 
// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic', 'ngCordova']);

app.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) {
      StatusBar.styleDefault();
    }
  });
});

app.controller('AdmobController', function($scope, $ionicPlatform, $cordovaAdMob, $window) {
  $ionicPlatform.ready(function() {

	var adMobId = {
		admob_banner_key: 'YOUR BANNER KEY GOES HERE',
		admob_interstitial_key: 'YOUR INTERSTITIAL KEY GOES HERE'
	};
	
	var adMobPosition = {
		BOTTOM_CENTER: 8
	};	
	
	$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);
		}		
	}
	
	$scope.showInterstitialAd = function() {
		
		try {
			
			console.log('Show Interstitial Ad');			

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

Deployment

 
Next step, we need to build our application:
 
ionic build android
 
Be careful here, this step may break if you’re behind a firewall. The first execution will take a long time, so be patient.
 
When this step ends, look at the output log, last two lines should look something like this:
 
Built the following apk(s):
    D:\Development\IonicAdMobDemo\platforms\android\build\outputs\apk\android-debug.apk
 
We’ll use the last line location to deploy our application. Make sure your smartphone is prepared to accept an incoming application. In case of Android platform, you must enable Developer Options and USB Debugging.
 
Do this:
 
adb install -r platforms\android\build\outputs\apk\android-debug.apk
 
or you can do this:
 
ionic run android -l -c -s
 

Download The Code

 
You can download this example at GitHub, just don’t forget to fill ad keys:
 
GitHub Download
 
 

Video Example

 
 
 
 
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • 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.

  • sk.md.basha

    i fallow step by step but it not working
    i want contact plugin to fetch the contacts in my mobile
    please help me
    thankyou

  • Haya

    Hello sir, i need help in my project ionic please contact me in whats app
    +966552295374
    or any body have know about ionic 1