The Cocoon Chartboost plugin is a Cordova plugin aimed at providing easy integration with the Chartboost ads network.

Important: Please note that we don’t support Chartboost banner ad type, only interstitials and rewarded videos are supported.

Installation

To add the Chartboost plugin to your project first go to your project configuration and once there go to the Setting  section and click on the “Plugins” tab. You should see something like this:

New Cocoon

If you click on the “Cocoon” category you will see al the Cocoon available plugins.  Over the plugins list you will see a dropdown menu set to “All” by default. Click on the menu to see the available Cocoon plugins categories, you should see a list of plugins with at least the following groups:

Screen Shot 2016-01-05 at 16.40.33

Select the “Chatboost SDK” plugin. Then the Chartboost SDK related plugins should be filtered in the plugins list.

Screen Shot 2016-01-07 at 11.36.00

 

Now click on install and your project will include the Chartboost SDK plugin in the next compilation.

Screen Shot 2016-01-07 at 11.36.53

 

Now you are ready to compile the Developer App to start testing your Chartboost ads.

Parameters

For this plugin you need to add the parameters from the source code. See the integration guide bellow and the example to see how to setup the Chartboost parameters.

Integration

Cordova needs to be specifically loaded in your index.html so it can start the Cordova framework and load the plugins that you have installed in your project. So first thing is to add the “cordova.js” script tag to your index.html.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <title>Ads demo</title>
</head>
 
<body style="margin:0; padding:0;">
 
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/pixi.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</body>
</html>
 

That’s the only code script you need to include in your index.html for the plugin to be ready to be used. Cordova will do the rest.

Important: Remember to wait for the “deviceready” event before using the plugin as that is the moment when the plugin will be fully initialized.

JavaScript
1
2
3
4
5
6
7
8
 
 
function main() {
// You application code
};
document.addEventListener('deviceready', main, false);
 
 

Usage

Let’s see some code snippets showing how to use the Cocoon Chartboost plugin in your application.

Initialization

First you need to configure the IDs for the different Chartboost ads types.

Getting the IDs

You can find the IDs in the Chartboost application settings:

Screen Shot 2016-01-07 at 12.13.37

Copy paste the ID in your Javascript code and you are ready to go. You can read the complete Chartboost guide here.

Interstitials

Creating an interstitial

You need to call the “Cocoon.Ad.Chartboost.configure” method with a configuration (you can omit any of those platforms if you are not targeting to them)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
 
Cocoon.Ad.Chartboost.configure({
ios: {
appId:"4ed254a3cb5015e47c000000",
appSignature:"91858cc162b56414ca47e63ce7a1b20105c70e65"
},
android: {
appId:"50ae12d715ba47c00d01000c",
appSignature:"95fb313c08717042903819d76f65d64d2347ac44"
}
});
 

This will setup IDs for an interstitial that you can later create calling the creation method wit a campaign Id parameter:

JavaScript
1
2
3
 
var interstitial = Cocoon.Ad.Chartboost.createInterstitial("50d1909c17b147523700000e");
 

Note: Do not use the ids above, they are only the for illustrative purposes.

Listening to interstitial events

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
interstitial.on("load", function(){
    console.log("Interstitial loaded");
});
 
interstitial.on("fail", function(){
    console.log("Interstitial failed");
});
 
interstitial.on("show", function(){
    console.log("Interstitial shown");
});
 
interstitial.on("dismiss", function(){
    console.log("Interstitial dismissed");
});
 

First thing you have to do after creating an interstitial is to listen to the interstitial  events:

  • load: An interstitial has been loaded and is ready to be showed.
  • fail: The interstitial load has failed so there is no ad available to be showed at the moment.
  • show: The interstitial has been showed probably as consequence of calling the “show” method.
  • dismiss: The interstitial has been closed by the user.
  • click: The user has clicked on the interstitial.

Showing an interstitial

JavaScript
1
2
3
 
interstitial.show()
 

The interstitials cannot be hidden from code.

The Chartboost ad network support rewarded videos. Rewarded videos must be configured in the Chartboost control panel and can be created using the code below:

Rewarded videos

Creating a rewarded video

JavaScript
1
2
3
 
var rewardedVideo = Cocoon.Ad.Chartboost.createRewardedVideo(adUnit);
 

Listening to rewarded video events

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
rewardedVideo.on("load", function(){
    console.log("Rewarded Video loaded");
});
 
rewardedVideo.on("fail", function(){
    console.log("Rewarded Video failed");
});
 
rewardedVideo.on("show", function(){
    console.log("Rewarded Video shown");
});
 
rewardedVideo.on("dismiss", function(){
    console.log("Rewarded Video dismissed");
});
 
rewardedVideo.on("click", function(){
    console.log("Rewarded Video clicked");
});
 
rewardedVideo.on("reward", function(){
    console.log("Reward completed");
});
 

First thing you have to do after creating a rewarded video is to listen to its life cycle  events:

  • load: A rewarded video has been loaded and is ready to be shown.
  • fail: The rewarded video load has failed so there is no ad available to be showed at the moment.
  • show: The rewarded video has been showed probably as consequence of calling the “show” method.
  • dismiss: The rewarded video has been closed by the user.
  • click: The user has clicked on the rewarded video.
  • reward: The rewarded video is completed.

Showing a rewarded video

JavaScript
1
2
3
 
rewardedVideo.show()
 

The rewarded videos cannot be hidden from code.

Example

exmaple_button

API

api_button

Testing

To test your Chartboost plugin integration:

  1. Install the Chartboost plugin in your project
  2. Compile a Developer App
  3. Launch you app from the Developer App using a zip or a url options