Banner Ads - Tutorial [CocoonJS + (Phaser / HTML5 Game)]

[iShellz]

How to use CocoonJS Ads Plugin with a Phaser / HTML5 Game. 

 

<DISCLAIMER> 

I have removed ads from the live version.  This method may be outdated.  

</DISCLAIMER>

 

Requirements

• Premium CocoonJS App
• Use of CocoonJS Compiler or Launcher 
• Mopub Account

 

Alright to keep this as simple as possible you need to setup a MoPub account.  

 

Ludei has a tutorial on setting up Ads with MoPub when you use their service.  It can he found here http://support.ludei.com/hc/en-us/articles/200978237-Ads

 

After you complete this setup you need to edit the settings in your Project settings on a premium CocoonJS account.

 

Go to the "Ads" section of the settings and then fill in your banner IDs from MoPub in the "Apple AppStore" section and the "Google PlayStore" section.  These ids can be found when you are in MoPub's control pannel. 

 

 

Now to the code!

 

In your index.html you need to include the following JavaScript files provided by Ludei.  

 

    <script src="libs/CocoonJSExtensions/CocoonJS.js"></script>    <script src="libs/CocoonJSExtensions/CocoonJS_Ad.js"></script>      <script src="libs/CocoonJSExtensions/CocoonJS_App.js"></script>   

These files can be downloaded here https://bitbucket.org/ludei/cocoon_cocoonjsextensions

 

Reminder: You need a premium account to use these files.

 

 

In your Phaser game JavaScript file you need to add the following function.

 

function banner()    {        CocoonJS.Ad.onBannerReady.addEventListener(function()        {            CocoonJS.Ad.setBannerLayout(CocoonJS.Ad.BannerLayout.BOTTOM_CENTER);            CocoonJS.Ad.showBanner();        });    }

and in your load function or where ever you want the Ad to load run the function

banner();

This should work if I'm missing something just let me know!

 

 

 

Final Product! ( !!! Go Terry in the Play Store !!! --> HERE

 

 

(Using adMob) 

 

 

[Wavertron]

Nice tutorial.

What's a "premium" cocoonjs account? Their website only has info on free accounts as best as I can tell

[iShellz]

Nice tutorial.

What's a "premium" cocoonjs account? Their website only has info on free accounts as best as I can tell

 

Thank you, and all their accounts are free at the moment you just have to request a premium account. 

[bfresh]

I am currently having an issue where my ads display in the CocoonJS launcher, but not in the compiled apk.  Your post is helping me double check my steps!  I will report what I find to fix it.

[iShellz]

I am currently having an issue where my ads display in the CocoonJS launcher, but not in the compiled apk.  Your post is helping me double check my steps!  I will report what I find to fix it.

I would say check all you're ID and check the settings in the cocoonJS panel. 

[bfresh]

You are correct!  I believe a combo of changing my mopub reference to admob from the Publisher ID to Banner ID (although it confusingly says publisher) and just waiting a few hours caused the ads to start populating.

 

I am not sure why they always work in the launcher though unless examples are shown in some way.  Thanks again for your writeup, I really don't know what I am doing inside of mopub yet.

[Bruno Assarisse]

Thanks for the tutorial!

 

Does anybody have recommendations on how to handle the BannerReady event when you want to hide the banner during gameplay? I noticed that there is a method to hide the banner, but I imagining the following scenario (assuming that the code is something like the one presented by iShellz):

 

- You trigger the banner loading with the onBannerReady function

- The player starts the game

- You call the hideBanner method

- The BannerReady events gets triggered, consequently showing the banner when you don't want

 

I think that slow internet connections could cause this. Is this really possible?

I'm also worried if the banner gets eventually refreshed, and the function passed to onBannerReady is called again.

[JhonDoes]

Hi!, can you help me connect my admob account in MoPub? 

[iShellz]

Hi!, can you help me connect my admob account in MoPub? 

 

 

the first step would be connecting the network in the mopub control pannel look at the CocoonJS guide it tell everything. 

[JhonDoes]

Hello again, already linked my Admob account but now I have another problem, the only ad that is displayed is the MoPub Demo, Have you any idea why this happens?

 

[BdR]

I'm also interested in creating an action game so just using phonegap isn't fast enough. This cocoonjs sounds interesting and I downloaded your game "Go Terry!!" on my phone but it doesn't display a banner at all..? Is this because it's running Android 4.1.1? Or is it maybe because of mopub territory settings and it doesn't display banners in the Netherlands?

 

See screenshot below.

[Toknos]

Hi.

I am currently trying to set up ads in my game. I've followed all the instructions, but I don't get anything to show at all.
I got all the files and they load ok, but when I try to load the banner nothing happens, when I run my banner function it prints "will show banner when ready" but never "blehshowbanner".
 

function banner(){	console.log("will show banner when ready");    CocoonJS.Ad.onBannerReady.addEventListener(function()    {    	console.log("blehshowbanner");        CocoonJS.Ad.setBannerLayout(CocoonJS.Ad.BannerLayout.BOTTOM_CENTER);        CocoonJS.Ad.showBanner();    });}

I also tried downloading "Go Terry", but the ads doesn't show for me! Does that mean it's not my code that's wrong, but it's because it doesn't want to show the ads in sweden or something?

Is there any way to get a useful error message that says why it doesn't show the ad?

I'm on iPhone

[Toknos]

Ok, update, the ad example does work for me, so the problem can't be with the network:
http://storage.cocoonjsservice.ludei.com/demos/cjs822491484457223350facebook.zip

The problem is that I'm really not sure what code to take from that example, it's so many different files and it creates so many different ads!
Could anybody who is more used to javascript give me a tip what part does what? I want a banner to show up at the bottom of the screen all the time.

I tried this code:
 

if (navigator.isCocoonJS) {   console.log(bannerCREATED, "bannerCREATED");   if(bannerCREATED == false)   {    	bannerCREATED = true;    	var banner1Params = {            "bannerAdUnit": "myadunitid",            "bannerAdUnit-iPhone": "myadunitid",            "refresh": 20    	};    	var banner1 = CocoonJS.Ad.createBanner(banner1Params);        banner1.onBannerReady.addEventListener(function(width, height)       	{            console.log("banner1 onBannerReady (" + width + ", " + height + ")");            // You need to layout the banner after receiving a onBannerReady event as that's the point            // where we know the banner dimensions.            console.log("window.innerWidth: " + window.innerWidth + ", window.innerHeight: " + window.innerHeight);            x = window.innerWidth/2 - width/2;            if (y == 0)                y = window.innerHeight - height;            else                y = 0;            	var rect = new CocoonJS.Ad.Rectangle(x, y, width, height);            	banner1.setRectangle(rect);            	banner1.showBanner();        });        banner1.refreshBanner();   }}

and it works, but the only problem now is that the banner starts at the top of the screen and then jumps down after a certain time and then jumps up to the top again.. I want it permantly on the bottom..

Am I on the right track or am I doing something crazy?

EDIT:
Ugh.. also it locks all user input sometimes after changing scene and doing that little jump changing to the bottom of the screen... I'm pretty sure I've done something wrong.... >_>

[agamemnus]

Toknos, check what your console is telling you. Sometimes you will see a non-Webview error (if you are using Webview) in the console. In that case there will also be a JSON erro (internal API returns "", and CocoonJS tries to JSON.parse that.)

 

I'm having a lot of trouble with the ads.. I'm using Webview+. I haven't tried banners yet but I have found a lot of different bugs with full screen mode.

[iShellz]

UPDATE : I took ads out of my current version so ignore the live version in the app stores! Sorry. 

[valueerror]

i just tried t ad ads to my game.. first with crossover..  huh.. that was a piece of work.. and then with cocoonjs..  this was relatively easy:  

 

a little update:

you need to include only one file in your game to make ads work:   cocoon.min.js

 https://github.com/ludei/cocoonjs-plugins/tree/master/build

 

you need to register at mopub - then add configure your cocoonjs premium account with your banner or interstitial id's which you first need to create there (you get the id's in your ad unit details section with the button "code integration")

 https://app.mopub.com/

 

and add a network to mopub (for example admob -- seems to be the easiest )

 

then add the code to your app to trigger the ads:

 

var ADS = true;

 

 

 if( ADS === true){            Cocoon.Ad.banner.on("ready" , function(){                Cocoon.Ad.setBannerLayout(Cocoon.Ad.BannerLayout.BOTTOM_CENTER);                Cocoon.Ad.showBanner();            });            Cocoon.Ad.interstitial.on("ready", function(){                Cocoon.Ad.showInterstitial();            });            function show_iAD(){  Cocoon.Ad.loadInterstitial(); }            function show_bAD(){  Cocoon.Ad.loadBanner();       }            function kill_bAD(){  Cocoon.Ad.hideBanner();       }        }

you can now call one of the show functions to show your ad or hide it  ( you don't need the ADS var.. it's just that i made it configurable for me to test..

[valueerror]

You are correct!  I believe a combo of changing my mopub reference to admob from the Publisher ID to Banner ID (although it confusingly says publisher) and just waiting a few hours caused the ads to start populating.

 

I am not sure why they always work in the launcher though unless examples are shown in some way.  Thanks again for your writeup, I really don't know what I am doing inside of mopub yet.

 

i am having the exact same problem (and also wonder why the ads work in the launcher if my id's aren't correct)   but i am still not able to solve the prob.  

it looks like a lot has changed..  for example i can't find any way to enter my admob publisher id anywhere in mopub..  am i supposed to give cocoonjs my admob ids or my mopub ids i get when creating a new adunit?   i gave the adunit id's. 

 

mopub is listing the requests by 0 impressions.. it looks like it gets the request from my app but can not get ads from admob..  but i connected admob as service and connected my account to see revenue..

 

?? 

could you help me figure out what is going wrong?

 

edit:  i found out how to enter my publisher ID in the admob network settings (afaik they mean the ad-id that starts with ca-)  - i had to disable my adblocker ...

still no ads and admob network doesn't list an app when i click on "network detail" in mopub..  hmm

[iShellz]

i am having the exact same problem (and also wonder why the ads work in the launcher if my id's aren't correct)   but i am still not able to solve the prob.  

it looks like a lot has changed..  for example i can't find any way to enter my admob publisher id anywhere in mopub..  am i supposed to give cocoonjs my admob ids or my mopub ids i get when creating a new adunit?   i gave the adunit id's. 

 

mopub is listing the requests by 0 impressions.. it looks like it gets the request from my app but can not get ads from admob..  but i connected admob as service and connected my account to see revenue..

 

?? 

could you help me figure out what is going wrong?

 

edit:  i found out how to enter my publisher ID in the admob network settings (afaik they mean the ad-id that starts with ca-)  - i had to disable my adblocker ...

still no ads and admob network doesn't list an app when i click on "network detail" in mopub..  hmm

 

i will attempt to get the ads flowing again i've been kinda inactive in the game recently 

[valueerror]

i've found out that i have to set a minimum cpm for my ads before they start showing up..  it's still congfusing because cocoonjs launcher serves add without this.. don't know where these come from..

 

in another forum they said i have to use "table" instead of "phone" otherwise ads will not show..  i actually don't know which one did the trick (the cpm setting to 0.05 or the tablet) but ads work now  

[iShellz]

i've found out that i have to set a minimum cpm for my ads before they start showing up..  it's still congfusing because cocoonjs launcher serves add without this.. don't know where these come from..

 

in another forum they said i have to use "table" instead of "phone" otherwise ads will not show..  i actually don't know which one did the trick (the cpm setting to 0.05 or the tablet) but ads work now  

 

The cpm sounds like an important setting, il keep it in mind.  I'm assuming Ludei has released an updated ad api or something along those lines. 

[BdR]

I registered a Mopub account and as far as I could figure out I set everything up. But it seems that new accounts first need to be reviewed before you can get ads in your app(?).  When I open Mopub and click the Marketplace tab, I see this. Not sure what it means exactly, so I sent them a mail this morning but no answer yet:

 

Your access to Marketplace is currently being reviewed. You can enable your inventory and set minimum CPMs during this process; note that Marketplace will not serve ads until you have been approved. If you have questions, please contact [email protected].

 

[valueerror]

same here..   still no answer.   but i configured the admob service and ads show up now..   the marketplace is not needed for that

[BdR]

I gotta say, the user interface on Mopub is totally confusing.  Here's where I am at the moment.

 

I'm looking at the Ad Source Breakdown which has 4 lines. I've somehow added the line at the top which is Type G(=Guaranteed, whatever that means), but when I click on that I see a "Line Item Details" and Mopub warns me that I need to create a "Creative". From what I can gather a "Creative" is something with which I can create my own banners to advertise myself which is not what I want to do.. I've got no clue what the "MarketPlace" line does or how I can edit it, and I've paused the demo line at the bottom. When I click Test Ad all I ever see is the text "admob_native native".

 

Any help in pointing me in the right direction would be greatly appreciated..

 

[BdR]

okay just to be 100% clear here.. Can anyone confirm that the following is correct or not?

 

When I go in Mopub to the Network tab, I see one entry under Networks which is Admob. When I edit this network, there's a part "Add Your Account Info" which I've left empty (don't want to give away my Admob credentials obviously). Underneath that there's "Set Up Your Inventory", and I assume that I need to enter my Ad Unit ID from the banner I've created in Admob. So NOT my Admob publisher id.

 

My Admob publisher id: pub-775*************

My Admob Ad Unit Id: ca-app-pub-775*************/69********

 

[BdR]

So I've recently released my CocoonJS game with a Mopub banner, with setup like in my previous posts. In Admob, I created a new Ad Unit ID for this game, and I set that up in Mopub. So far Mopub shows 99 requests but only 16 impressions, so a very low fillrate of 16.16% and on my Admob page I see no requests for the new Ad Unit ID. For comparison, on Admob the fillrate for my other ads is thus far always around 99% to 99.5%. 

 

So my questions:

- Why the low fill rate?

- Why no requests from Admob?

- Will any possible revenue on Admob impressions come via Mopub or Admob?

 

Can anyone comment on their experience with Mopub? Did you get it working, and did you get impressions?