How to Add Admob and Mopub Ads to Your CocoonJS Compiled HTML5 Game

Getting ads to work with my HTML5 game compiled into a APK using CocoonJS was a task that was pretty easy, but also had a couple confusing steps that I will try to clarify. The first thing you will need to do is become a "Premium Member", although this is free. You simply apply for it with Ludei, and then wait for them to respond that your account has been changed to Premium. For me, this only took a day and in the meantime, I configured my Admob and Mopub accounts and learned how to implement the ads. This example follows what it took to get banner ads working in my game, but interstitial, or full screen ads, work pretty much the same way. So this is how we will begin our procedure.

Step 1) Become a Premium Member with your Ludei Account.

Once you are a premium member by applying and receiving the approval, we can continue on the Step 2.

Step 2) Download the required CocoonJS extensions.

You can download the CocoonJS extensions from bitbucket Here. In my example, I am using the minified Javascript file. You can use the entire extension set, or just pick out the Ads file if that is all you want. I have tried all three and all work.

Step 3) Reference the CocoonJS extension in your index.html file.

You need to reference the functions that will be used for your ads. This is as simple as including this in your index.html file:

<script type="text/javascript" src="cocoon.min.js"></script>

Step 4) Create the ad in the game

Now that we have the file referenced, we can include functions and reference the CocoonJS.Ad class. Ludei has great documentation on this class here. In the main initialization function of my game, I preload a banner ad with the preloadBanner() function:

CocoonJS.Ad.preloadBanner();

One thing that took me a bit to realize is that we need to add an Event Listener method that is called once our add is loaded. Here, we can set some properties such as it's position. I was trying to set its position before creating or preloading the ad, which would not work. So, let's slap in this method, along with a call to the setBannerLayout() method to display the banner ad in the bottom center of the screen. Top center exists as well. You can also create a rectangle object to place the ad anywhere you want on the screen.

//Get width and height of banner when it is ready and set its position
CocoonJS.Ad.onBannerReady.addEventListener(function()
						{
	CocoonJS.Ad.setBannerLayout(CocoonJS.Ad.BannerLayout.BOTTOM_CENTER);
});

Step 5) Show and hide the ad in the game as desired!

The last step is to just use the showBanner() and hideBanner() functions whenever you want to show and hide the ad. I had my game show the ad at my homescreen and level complete screens. I hide the ad while the game is being played. It was that easy!

//if at homescreen
CocoonJS.Ad.showBanner()
 
//if playing game
CocoonJS.Ad.hideBanner()

After adding this code and compiling, ads began to work in my game. I could now track them in Admob and Mopub. One confusing issue I had with Mopub is that when you set up the Admob network within Mopub, the column specifies Publisher ID. I really had to paste in the Banner ID of the ad itself here, not the Publisher ID. Hope this quick guide helps you get ads working in your game!

Also note that at the time of this guide, ads do not display in the CocoonJS 2.0.0 beta compiler. I had to compiler in 1.4.7 version to continue displaying ads.