AdMob « Cocoon Documentation

5 min


0

The Cocoon AdMob plugin is a Cordova plugin aimed toward offering straightforward integration with the AdMob advertisements community.

Installation

To add the AdMob plugin to your mission first go to your mission configuration and as soon as there go to the Setting  part and click on on the “Plugins” tab. You ought to see one thing like this:

If you click on on the “Cocoon” class you will notice al the Cocoon obtainable plugins.  Over the plugins listing you will notice a drop-down menu set to “All” by default. Click on the menu to see the obtainable Cocoon plugins classes, you must see a listing of plugins with a minimum of the next teams:

Select the “AdMob SDK” plugin. The AdMob SDK associated plugins needs to be filtered within the plugins listing.

Now click on on set up and your mission will embrace the AdMob SDK plugin within the subsequent compilation.

Now you’re able to compile the Developer App to begin testing your AdMob advertisements.

AdMob Adapters

AdMob is an Ad community mediator so you possibly can combine different third occasion networks utilizing AdMob. You simply want to put in the AdMob Ad community adapter for the community you need and configure it within the AdMob administration panel.

To set up the AdMob adapter, go to the Cocoon plugins listing and select “AdMob Adapters” from the listing:

In the plugins listing you will notice all of the supported AdMob adapters. Just choose the one (or many, you possibly can set up a number of adapters on the similar time) you wish to set up and click on on the “Install” button on the precise aspect.

No additional configurations are wanted within the Cocoon aspect, all of the adapter configuration is finished within the AdMob administration panel. You can learn extra details about it right here.

At the second we help these AdMob adapters:

AdColony

This adapter requires the APP_ID and the ZONE_ID, which you will discover in your AdColony dashboard. Add this values to your config.xml.

<plugin title=“cocoon-plugin-ads-[android|ios]-admob-adcolony”spec=“*”>

<variable title=“APP_ID”worth=“[Your App ID]” />

<variable title=“ZONE_ID”worth=“[Your zone ID]” />

</plugin>

Due to adjustments in iOS 10, this adapter has the optionally available parameters: CALENDAR_USAGE_DESCRIPTIONCAMERA_USAGE_DESCRIPTION, MOTION_USAGE_DESCRIPTIONPHOTO_LIBRARY_USAGE_DESCRIPTION.

<plugin title=“cocoon-plugin-ads-ios-admob-adcolony”spec=“*”>

<variable title=“CALENDAR_USAGE_DESCRIPTION”worth=“[Your description]” />

<variable title=“CAMERA_USAGE_DESCRIPTION”worth=“[Your description]” />

<variable title=“MOTION_USAGE_DESCRIPTION”worth=“[Your description]” />

<variable title=“PHOTO_LIBRARY_USAGE_DESCRIPTION”worth=“[Your description]” />

</plugin>

AdColony wants these variables in iOS solely to show an outline of the utilization of the permission the primary time the appliance tries to make use of it. If not set, a default permission request textual content might be used.

AppLovin

This adapter requires the SDK_KEY, which you will discover in your AppLovin dashboard. Add this SDK key to your config.xml.

<plugin title=“cocoon-plugin-ads-[android|ios]-admob-applovin”spec=“*”>

<variable title=“SDK_KEY”worth=“[Your SDK key]” />

</plugin>

Chartboost (Android solely)

This adapter doesn’t require additional configuration.

InMobi (iOS solely)

This adapter doesn’t require additional configuration.

UnityAds

This adapter doesn’t require additional configuration.

Parameters

For this plugin it’s good to add the parameters from the supply code. See the combination information bellow and the instance to see setup the AdMob parameters.

Integration

Cordova must be particularly loaded in your index.html so it may begin the Cordova framework and cargo the plugins that you’ve got put in in your mission. So very first thing is so as to add the cordova.js script tag to your index.html.

<!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 title=“msapplication-tap-highlight”content material=“no”/>

<meta title=“viewport”content material=“user-scalable=no, initial-scale=1, width=device-width, height=device-height”/>

<title>Ads demo</title>

</head>

<physique fashion=“margin:0; padding:0;”>

    <script sort=“text/javascript”src=“cordova.js”></script>

    <script sort=“text/javascript”src=“js/pixi.js”></script>

    <script sort=“text/javascript”src=“js/demo.js”></script>

</physique>

</html>

That’s the one code script it’s good to embrace in your index.html for the plugin to be prepared for use. Cordova will do the remaining.

Important: Remember to attend for the deviceready occasion earlier than utilizing the plugin as that’s the second when the plugin might be totally initialized.

performprincipal(){

// Your software code

};

doc.addEventListener(‘deviceready’,principal,false);

Usage

Let’s see some code snippets exhibiting use the Cocoon AdMob plugin in your software.

Initialization

First it’s good to configure the IDs for the totally different MoPub advertisements sorts.

Getting the IDs

You can discover the IDs within the AdMob software settings:

Copy paste the ID in your JavaScript code and you’re able to go. You can learn the entire AdMob information right here.

Setting up the IDs

At plugin configuration time

There are two methods of establishing the advertisements IDs in your code. First, you possibly can name the Cocoon.Ad.AdMob.configure methodology with a configuration. If you’re focusing on solely a platform the IDs don’t have to be nestered inside an android or ios entry.

This will setup IDs for an advert which you could later create calling the creation methodology with out parameters:

At advert creation time

Another choice is to cross the ID at creation time:

This might be helpful in case you wish to create a number of advert situations with totally different IDs.

Note that the appId parameter should be handed by way of the Cocoon.Ad.AdMob.configure methodology whatever the means the advertisements IDs are supplied.

GDPR

The optionally available parameter customizedAdsConsent within the Cocoon.Ad.AdMob.configure methodology determines if the consumer has consented to be focused by customized advertisements. This parameter spreads to each Cocoon AdMob adapter put in.

Banners

Creating a banner

Listening to banner occasions

banner.on(“load”,perform(){

console.log(“Banner loaded “+banner.width,banner.peak);

});

banner.on(“fail”,perform(){

console.log(“Banner failed to load”);

});

banner.on(“show”,perform(){

console.log(“Banner shown a modal content”);

});

banner.on(“dismiss”,perform(){

console.log(“Banner dismissed the modal content”);

});

banner.on(“click”,perform(){

console.log(“Banner clicked”);

});

First factor it’s a must to do after making a banner is to take heed to its life cycle occasions:

  • load: A banner has been loaded and is able to be proven.
  • fail: The banner load has failed so there isn’t any advert obtainable to be proven in the mean time.
  • present: The banner has been confirmed in all probability as consequence of calling the “show” methodology.
  • dismiss: The banner has been collapsed.
  • click on: The consumer has clicked on the banner.

Showing/hiding a banner

Interstitials

Creating an interstitial

Listening to interstitial occasions

interstitial.on(“load”,perform(){

console.log(“Interstitial loaded”);

});

interstitial.on(“fail”,perform(error){

console.log(“Interstitial failed: “+JSON.stringify(error));

});

interstitial.on(“show”,perform(){

console.log(“Interstitial shown”);

});

interstitial.on(“dismiss”,perform(){

console.log(“Interstitial dismissed”);

});

interstitial.on(“click”,perform(){

console.log(“Interstitial clicked”);

});

First factor it’s a must to do after creating an interstitial is to take heed to its life cycle  occasions:

  • load: An interstitial has been loaded and is able to be proven.
  • fail: The interstitial load has failed so there isn’t any advert obtainable to be proven in the mean time.
  • present: The interstitial has been confirmed in all probability as consequence of calling the “show” methodology.
  • dismiss: The interstitial has been closed by the consumer.
  • click on: The consumer has clicked on the interstitial.

Showing an interstitial

The interstitials can’t be hidden from code.

Rewarded Videos

Creating a rewarded video

Listening to rewarded movies occasions

rewardedVideo.on(“load”,perform(){

console.log(“Rewarded video loaded”);

});

rewardedVideo.on(“fail”,perform(error){

console.log(“Rewarded video failed: “+JSON.stringify(error));

});

rewardedVideo.on(“show”,perform(){

console.log(“Rewarded video shown”);

});

rewardedVideo.on(“dismiss”,perform(){

console.log(“Rewarded video dismissed”);

});

rewardedVideo.on(“reward”,perform(reward,error){

if(!error){

console.log(“Rewarded video completed”);

}else{

console.log(“Rewarded video failed: “+JSON.stringify(error));

}

});

rewardedVideo.on(“click”,perform(){

console.log(“Rewarded video clicked”);

});

First factor it’s a must to do after making a rewarded video is to take heed to its life cycle  occasions:

  • load: A rewarded video has been loaded and is able to be proven.
  • fail: The rewarded video load has failed so there isn’t any advert obtainable to be proven in the mean time.
  • present: The rewarded video has been confirmed in all probability as consequence of calling the “show” methodology.
  • dismiss: The rewarded video has been closed by the consumer.
  • reward: The consumer has watched sufficient to obtain the reward. But an error not captured by fail may have occurred.
  • click on: The consumer has clicked on the rewarded video.

Showing an interstitial

The rewarded movies can’t be hidden from code.

Example

API

Testing

To take a look at your AdMob plugin integration:

  1. Install the AdMob plugin (and adapters if wanted) in your mission.
  2. Compile a Developer App.
  3. Launch you app from the Developer App utilizing a zip or a URL choices.

What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win

0 Comments

Your email address will not be published. Required fields are marked *

Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format