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

Installation

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

Screen Shot 2016-01-07 at 10.52.55

 

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

Screen Shot 2016-01-07 at 10.53.55

 

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

AdMob Adapters

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

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

Screen Shot 2016-01-07 at 10.55.18

 

In the plugins list you will see all the supported AdMob 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.

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

At the moment we support these AdMob adapters:

AdColony

Due to changes in iOS 10, this adapter has the optional parameter: CALENDAR_USAGE_DESCRIPTION.

AdColony needs the permission to access the device calendar and this parameter is used in iOS only to display a description of the usage of the calendar the first time the application tries to use it. If not set, “This app requires the calendar usage permission” will be used.

AppLovin

Chartboost (Android only)

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 AdMob 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 AdMob plugin in your application.

Initialization

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

Getting the IDs

You can find the IDs in the AdMob application settings:

Screen Shot 2016-01-07 at 11.18.39

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

Setting up the IDs

At plugin configuration time

There are two ways of setting up the ads IDs in your code. First, you can call the “Cocoon.Ad.AdMob.configure” method with a configuration (you can omit any of those platforms if you are not targeting to them)

This will setup IDs for an ad that you can later create calling the creation method without parameters:

At ad creation time

Another option is to pass the ID at creation time:

This can be useful in case you want to create several ad instances with different IDs.

Banners

Creating a banner

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

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.

Example

exmaple_button

API

api_button

Testing

To test your AdMob plugin integration:

  1. Install theAdMob 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