How to include AdMob ads in your HTML5 iOS game using PhoneGap

In a previous post I showed you how to go from HTML5 to iOS native game with PhoneGap in order to publish your HTML5 games on the App Store, now it’s time to see how to include ads into your free game.

If you follow me on Facebook or Twitter, you know I had a lot of trouble in including ads into my PhoneGap games, mostly because I was trying to use the official Leadbolt plugin which did not work as it seems to be a little outdated – in their tutorial they also say to use phonegap local plugin add when local is deprecated.

So, thanks to some suggestions from loyal readers and fans I really want to thank, I was pointed to AdMob and the whole process was really easy, let me explain how to do that. If you didn’t already, register for an AdMob account.

Let’s start clicking on “Monetize new app” button.

If it’s a new app, one you still have to publish, select “Add your app manually” tab, give your app a name, select the platform – iOS in this case – then click on “Add app”

Now it’s time to choose ad format, I am showing you how to create an interstitial, giving it a name and saving it, but the process is the same for the banner. You should add them both.

Write down your ad unit ID, then create the banner Ad type if you didn’t already. You should end with two Ad unit IDs, one for the banner and the other for the interstitial.

Time to switch to our terminal and apply some of the concepts already seen in the post from HTML5 to iOS native game with PhoneGap, starting with the creation of the project:

phonegap create ninJump com.emanueleferonato.ninjump ninJump -d

Then once the project has been created, let’s move in its folder

cd ninjump

and then install the AdMob plugin

phonegap plugin add com.google.cordova.admob

this will automatically install the plugin “AdMob Plugin Pro“.

Add your HTML5 game as shown in the previous step and launch the build

phonegap build ios

your Xcode project is finally ready.

Finally it’s time to open Xcode, and to check if the plugin has been correctly installed, check “Plugins” folder and “config.xml” file inside “Staging” folder. This file should have something like this:

<feature name="AdMob">
	<param name="ios-package" value="CDVAdMobPlugin" />
	<param name="onload" value="true" />
</feature>

With the latest versions of PhoneGap, plugins are listed in config.xml as “feature” while previously were listed as “plugin“.

Now we are ready to include banners and interstitials into our game, but we need to pay some attention to a couple of code tricks: first, in the index.html file you should include the call to cordova.js. This is what I made in my Phaser game:

<!DOCTYPE html>
<html>
    <head>
        <script src="cordova.js"></script>
        <script src="phaser.min.js"></script>
        <script src = "game.js"></script>
        <style>
            body{
                margin:0px;
                padding:0px;
            }
        </style>
    </head>
    <body>
    </body>
</html>

The game itself should start with a “deviceready” event listener, this way:

document.addEventListener('deviceready', onDeviceReady);
function onDeviceReady(){
	// my game
}

To show a banner, use createBanner method:

AdMob.createBanner({
	adId: "ca-app-pub-2062493463858889/7200177030", // AdMob banner ID
	position: AdMob.AD_POSITION.BOTTOM_CENTER, // position
	autoShow: true, // show it once it's ready
	overlap:true, // overlap the game, so it won't steal space to canvas
	isTesting: true // show a demo ad
});

Look how does it look in the emulator:

To create an interstitial, first preload it some time before it’s needed, such as at the beginning of a level

AdMob.prepareInterstitial({
	adId:"ca-app-pub-2062493463858889/4944714634", // AdMob interstitial ID
	autoShow:false // don't show now
});

then show it!

AdMob.showInterstitial();

And here it is how this stuff will look in your emulator:

And now you are able to use AdMob ads in your HTML5 games ported to iOS with PhoneGap.

Next stop, Game Center.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers