How to include Leadbolt ads in your HTML5 mobile games, showing your own ads when games are played on desktop

Well, this is one of the longest titles for a post, but the concept I am going to explain is very simple: showing ads in your HTML5 games. There are a lot of advertising company willing to serve ads to your HTML5 games but most of them have poor options or are very obtrusive. I am currently trying Leadbolt which has a clean dashboard, some interesting ad formats and it’s really easy to configure: in most cases you only have to add one line in your html page calling its remote JavaScript. This is the “to-do” to make a preloader work: Although this may sound great, there are two problems I had to face: 1 – Ads are only served on mobile devices, so I needed to display my own ads when games are run on desktop computers 2 – Ads do not come with a “close” button. I mean it, look at this screenshot: They will show a full screen overlay with no “close” button. Never mind, we are going to create the close button as well as an alternative ad to show when players aren’t opening the game from mobile. I was lucky enough Leadbolt ads always open in an iframe whose id is ap_iframe so I could create my button to close the element with such id. To keep loading times low, I did not include jQuery or other JavaScript frameworks, so here is how my index.html looks:
<!DOCTYPE html>
<html>
	<head>
	<style type="text/css">
		body{
			background: #000000;
			padding:0px;
			margin:0px;
		}
          #closebutton {
               background: #000000;
               font:bold 24px arial;
               padding: 2% 4% 2% 4%;
               color:white;
               text-decoration: none;
               position:fixed;
               z-index:1000;
               top:0px;
               right:0px;
               text-transform:uppercase;
               border:6px solid white; 
               cursor:pointer;
          }
          #bookad{
               background: url("assets/banners/book.jpg") no-repeat center center fixed; 
               -webkit-background-size: contain;
               -moz-background-size: contain;
               -o-background-size: contain;
               background-size: contain;
               background-color:white;
               position:fixed;
               width:100%;
               height:100%;
               z-index:100;   
               cursor:pointer;  
               display:none;
          }
	</style>
	<script src="phaser.min.js"></script>
     <script src = "game.js"></script>
     <script type="text/javascript" src="http://ad.leadbolt.net/show_app_ad.js?section_id=652903248"></script>
	</head>
	<body>
     <div id = "bookad" onclick = "window.location.href='http://www.emanueleferonato.com/2015/12/24/new-minibook-released-create-html5-vertical-endless-runner-cross-platform-games/'"></div>
     <script>
          if (document.getElementById("ap_iframe")){
               document.body.innerHTML += "<div id = 'closebutton' onclick = 'removeLeadBolt()'>X</div>";
          }
          else{
               showBookAd();           
          }
          function removeLeadBolt(){
               document.body.removeChild(document.getElementById("ap_iframe"));
               document.body.removeChild(document.getElementById("closebutton"));     
          }
          function showBookAd(){
               document.getElementById("bookad").style.display = "block"; 
               document.body.innerHTML += "<div id = 'closebutton' onclick = 'removeBookAd()'>X</div>";  
          }
          function removeBookAd(){
               document.body.removeChild(document.getElementById("bookad"));
               document.body.removeChild(document.getElementById("closebutton"));     
          }
     </script>     
	</body>
</html>
and this is the result, you should see the ad about my latest book if you are opening this page from a desktop computer, but if you point your mobile browser to this link you should see a Leadbolt ad.
Clicking or tapping on the X close button will remove the ad and make the game start. And here’s how I created an hybrid preloader ad using Leadbolt and my own ads.

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