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:

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.

  • nice . thanks for sharing

  • QA

    Do you have any suggestion on how to distribute these HTML5 games with ads?
    You have created the game using Leadbolt ads for example, and what is next step?
    It’s easier to distribute flash games.

  • QA

    I have visited your link and it’s displaying Leadbolt ads, but banner is too large and does not look good. Same for my game, I am using the smallest available banner.

  • Your ad is not displaying on desktop. :(

    • Emanuele Feronato

      sure, because it’s for mobile games

  • Have you found an advertising platform for HTML5 games that works on both desktop and mobile?