Jump to content

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


iShellz
 Share

Recommended Posts

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. 

 

jPh8ycXOymZiR.png

 

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

 

jpJrLHcXTfUpF.png

 

(Using adMob) 

 

 

Link to comment
Share on other sites

  • 3 weeks later...

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 months later...

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.

2pr9vyc.png

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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.... >_>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...

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..

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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  :)

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 3 weeks later...

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(?). :huh: 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].

 

2rrqo1z.jpg

Link to comment
Share on other sites

I gotta say, the user interface on Mopub is totally confusing. :wacko: 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..

 

2i8gq5s.png

Link to comment
Share on other sites

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********

 

25kr1hi.png

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...