MoPub - Integrate AdMob in your CocoonJS games

Stats

2,713 visits, 5,908 views

Translations

This tutorial hasn't been translated.

Tools

Basics

Download Demo capx

C2 Ads Basement

Today I will lead you through mopub and show you how to set it up with AdMob and CooconJS (works with Android and IOS).

If you have some tipps please feel free to post them at the comment area. And I apologize for my english, I'm not a native english man :)

Download Tutorial as PDF

CocoonJS - Guide (PDF)

Update 23.07.2014

- Version 2.0.2 was introduced

- Ads Bug has been fixed in this version

Note: The issue with fullscreen ads is still in the runtime.js file! Download the fixed runtime.js here (with guide)

You can now use the compiler version 2.0.2. But you need to re-configer your settings at mopub (the game doesn't need to be re-compiled if you have compiled it in 2.0.2 once!)

Prepare the Game

First of all you need to setup ads in your game. It's up to you how you want to handle it. To see my solution feel free to download the demo .capx file attached to this tutorial at the left sidebar.

Features

The Demo File includes the ads function and the ability to buy a "disable ads" perk via In-App purchase. You just need to enter your Products.

How it works

Click on the "Buy" button to be able to switch the ads toggle button (no worry you will not charged for anything)

Note: To test it on your Android device download this APK file (It's the demo file compiled with the Cloud Compiler from Ludei.

Download:

Android Demo App

It maybe takes a while till the ads are be shown.

Important

1) Use the compiler version 2.0.2 in order to use AdMob. Ads Bug has been fixed by ludei.

2) Don't minify the javascript if you export your project to CocoonJS. On my end the game crashed.

Setup at AdMob

Visit AdMob and login or create an account. Click on the "Monetize" tab in the header and click on "Add a new App".

Fill out all fields! (You can search your app via name if it is already uploaded at the Google Play Store/Itunes.)

If you have created your app successfully you will get a Banner-ID ("ca-app-pub-XXXX"). You will need this ID later at mopub.

Setup at Mopub

Visit mopub and login to your account or create one (its free).

If you are logged in visit the “Network” tab in the main nav and click on “Add a Network”.

Choose admob (or any other network you want to connect with your mopub account). Follow all steps.

The Inventory

If you have successfully connected your admob account click on the “Inventory” Tab and click on “Add a New App” and enter all necessary information.

Important for version 2.0.2. You need to specify the target as tablet! Don't know why, but it doesn't work if you choose smartphone.

Note: If you choose tablet it will work on both devices (tablet and smartphone). But don't forget to set the right size for the ads. I recommand 320x50, but it's up to you.

Note: Set as target 'Tablet'. Even if you only want to use smartphones. Works for both.

The Marketplace

Now visit the “Marketplace” Tab and you will find your added App. Change the values at CPM to “0.01″. Otherwise mopub will show no ads from their side.

Note: If you get this message at the top of your marketplace page.

In this case you should contact mopub to help them to verify your account. Otherwise no ads will be shown! Only the mopub-demo ad.

Then click the Network tab again and click on "Segments".

Then click on one Segment (you need to do this for both) and add a value to the CPM field.

If this value is higher then the value at the mopub banner, admob banner will be preferred. But don't set this value to high. I made the best experience with 0.05 USD.

Add admob Publisher-ID

Visit the “Network” Tab and choose admob. Now click on “Edit Network” and scroll down till “Set Up Your Inventory” and click on “Edit Section”.

Here you need to insert the Banner-ID ("ca-app-pub-XXX") from your created banner at AdMob.

Ludei's Cloud Compiler

Get the Banner ID from Mopub

In order to get the Banner ID click on the “Inventory” Tab and click on your created app. Then scroll down till “Ad Unit Summary” and click on your banner.

Then you can test your app and get the ID.

And here is your ID.

Now visit ludei's cloud compiler and login ore register a new account (IMPORTANT: You need to be a premium user in order to show ads at your game)

Then go to the Dev Portal – Projects

Note: If this is your first visit you have to create a new project.

Now click on the little pen or on the project name to edit your project. Visit the tab “Configuration” in the sidebar. Here you are able to activate your Ads.

Choose “MoPub”

Save changes by clicking on the “Update Extensions” button.

Now you can see a new tab in your sidebar, Ads. Click on that tab.

Choose your network and add your banner ID in the fields above (Here you need to enter the Banner ID from Mopub, not from AdMob!)

Test it

Now test it :) Good luck with your projects!

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!