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

Installation

To add the Heyzap 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 “Heyzap SDK” plugin. The Heyzap SDK related plugins should be filtered in the plugins list.

Screen Shot 2016-05-24 at 15.55.21

 

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

 

Screen Shot 2016-05-24 at 15.57.41

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

Heyzap Adapters

Heyzap is an Ad network mediator so you can integrate other third party networks using Heyzap. You just need to install the Heyzap Ad network adapter for the network you want and configure it in the Heyzap administration panel.

To install the Heyzap adapter, go to the Cocoon plugins list and choose “Heyzap Adapters” from the list:

Screen Shot 2016-05-24 at 15.59.34

In the plugins list you will see all the supported Heyzap adapters. Just select the one (or many, you can install several adapters at the same time) you want to install and click on the “Install” button on the right side.

At the moment we support the following Heyzap adapters:

  • AdColony
  • Chartboost
  • UnityAds

No further configurations are needed in the Cocoon side, all the adapter configuration is done in the Heyzap administration panel. You can read more information about it here.

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

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.

Usage

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

Initialization

For the plugin initialization you only need the PublisherId.

Getting the PublisherID

You can find the PublisherID in the Heyzap panel:

Screen Shot 2016-05-24 at 16.09.59

Screen Shot 2016-05-24 at 16.10.21

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

Setting up the IDs

Call the “Cocoon.Ad.Heyzap.configure” method with the PublisherID:

Banners

Creating a banner

You can create a banner ad calling the creation method with an optional campaign ID parameter.

Listening to banner events

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

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

Showing/hiding a banner

Interstitials

Creating an interstitial

You can create an interstial ad calling the creation method with an optional campaign ID parameter.

Listening to interstitial events

First thing you have to do after creating an interstitial is to listen to its life cycle  events:

  • load: An interstitial has been loaded and is ready to be shown.
  • fail: The interstitial load has failed so there is no ad available to be shown 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

The interstitials cannot be hidden from code.

Rewarded videos

You can create a rewarded video calling the creation method with an optional campaign ID parameter.

Creating a rewarded video

Listening to rewarded video events

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

The rewarded videos cannot be hidden from code.

Debug Integration

Heyzap SDK includes a very useful method to debug the integration:

This will show a debug view where you can see the integrated networks and the integrated status for each one of them:

Screen Shot 2016-05-24 at 16.16.36

Example

exmaple_button

API

api_button

Testing

To test your Heyzap plugin integration:

  1. Install theHeyzap plugin (and adapters if needed) in your project
  2. Compile a Developer App
  3. Launch you app from the Developer App using a zip or a url options