cordova-plugin-smaato

Cordova/PhoneGap plugin for Smaato, support Banner, Interstitial.

Usage no npm install needed!

<script type="module">
  import cordovaPluginSmaato from 'https://cdn.skypack.dev/cordova-plugin-smaato';
</script>

README

Smaato Cordova Plugin

Present Smaato Ads in Mobile App/Games natively from JavaScript.

Highlights:

  • Easy-to-use APIs. Display Ad with single line of Js code.
  • Support Banner, Interstitial, Native, and Video Ads.
  • One plugin supports all plataforms.
  • Multiple banner size, also support custom size.
  • Fixed and overlapped mode.
  • Auto fit on orientation change.
  • Actively maintained, prompt support.

Compatible with:

  • Cordova CLI, v3.5+
  • Intel XDK and Crosswalk, r1095+
  • IBM Worklight, v6.2+

Instalation

To install this plugin, follow the Command-line Interface Guide. You can use one of the following command lines:

cordova plugin add com.pherasoft.cordova-plugin-smaato
cordova plugin add https://github.com/phfsantos/cordova-plugin-smaato.git

If use with Intel XDK: Project -> CORDOVA 3.X HYBRID MOBILE APP SETTINGS -> PLUGINS AND PERMISSIONS -> Third-Party Plugins -> Add a Third-Party Plugin -> Get Plugin from the Web, input:

Name: Smaato Ads
Plugin ID: com.pherasoft.cordova-plugin-smaato
[x] Plugin is located in the Apache Cordova Plugins Registry

Quick Start Example Code

Step 1: Prepare your Smaato publisher Id for your app, create it in Smaato website

var ad_units = {
    publisherId: "1001000968",    
    iosadid: "",
    iosadtracking: true,
    googleadid: "",
    googlednt: false,
    android: {
        tiny_banner: '101002696',       // Phones and Tablets 120 x 20
        puny_banner: '101002695',       // Phones and Tablets 168 x 28
        little_banner: '101002694',     // Phones and Tablets 216 x 36
        small_banner: '101002693',      // Tablets 300 x 50
        banner: '101002692',            // Phones and Tablets 320 x 50
        medium_rectangle: '101002697',  // Phones and Tablets 300 x 250
        leaderboard: '101002669',       // Tablets 728 x 90
        interstitial: '101002659',      // Phones and Tablets 100%
        skyscraper: '101002698'         // Tablets 120 x 600
    },
    ios: {
        tiny_banner: '101002696',       // Phones and Tablets 120 x 20
        puny_banner: '101002695',       // Phones and Tablets 168 x 28
        little_banner: '101002694',     // Phones and Tablets 216 x 36
        small_banner: '101002693',      // Tablets 300 x 50
        banner: '101002692',            // Phones and Tablets 320 x 50
        medium_rectangle: '101002697',  // Phones and Tablets 300 x 250
        leaderboard: '101002669',       // Tablets 728 x 90
        interstitial: '101002659',      // Phones and Tablets 100%
        skyscraper: '101002698'         // Tablets 120 x 600
    },
    wp8: {
        tiny_banner: '101002675',       // Phones and Tablets 120 x 20
        puny_banner: '101002358',       // Phones and Tablets 168 x 28
        little_banner: '101002359',     // Phones and Tablets 216 x 36
        small_banner: '101002362',      // Tablets 300 x 50
        banner: '101002353',            // Phones and Tablets 320 x 50
        medium_rectangle: '101002354',  // Phones and Tablets 300 x 250
        leaderboard: '101002218',       // Tablets 728 x 90
        interstitial: '101002361',      // Phones and Tablets 100%
        skyscraper: '101002360'         // Tablets 120 x 600
    },
    web: {
        tiny_banner: '101002675',       // Phones and Tablets 120 x 20
        puny_banner: '101002358',       // Phones and Tablets 168 x 28
        little_banner: '101002359',     // Phones and Tablets 216 x 36
        small_banner: '101002362',      // Tablets 300 x 50
        banner: '101002353',            // Phones and Tablets 320 x 50
        medium_rectangle: '101002354',  // Phones and Tablets 300 x 250
        leaderboard: '101002218',       // Tablets 728 x 90
        interstitial: '101002361',      // Phones and Tablets 100%
        skyscraper: '101002360'         // Tablets 120 x 600
    }
};

// select the right Ad Id according to platform
var adid = (/(android)/i.test(navigator.userAgent)) ? ad_units.android : ad_units.ios;

Step 2: Create a banner with single line of javascript

// it will display leaderboard banner at bottom center, using the default options
var div = document.createElement("div");
document.appendChild(div);
var simpleAd = new Smaato(div, {
    publisherId: ad_units.publisherId,
    adId: adid.leaderboard
});

Or, show a banner Ad in some other way:

// or, show a default banner at top
var div = document.createElement("div");
document.appendChild(div);
var banner = new Smaato(div, {
    publisherId: ad_units.publisherId,
    adId: adid.banner, 
    position:SMAATO_AD_POSITION.TOP_CENTER, 
    adSize: SMAATO_AD_SIZE.BANNER,
    autoShow: true
});

Or, show a video Ad in a custom way:

// or, show a video Ad in a custom way:
var div = document.createElement("div");
document.appendChild(div);
var banner = new Smaato(div, {
    publisherId: ad_units.publisherId,
    adId: "1234545789", 
    position: SMAATO_AD_POSITION.CENTER, 
    adSize: SMAATO_AD_SIZE.CUSTOM,
    width: 1024,
    height: 768,
    type: "vast"
});

Or, show native Ad in a custom way:

// or, show native Ad in a custom way:
var div = document.createElement("div");
document.appendChild(div);
var banner = new Smaato(div, {
    publisherId: ad_units.publisherId,
    adId: "1234545789", 
    position: SMAATO_AD_POSITION.CENTER, 
    adSize: SMAATO_AD_SIZE.CUSTOM,
    width: 1024,
    height: 768,
    type: "native"
});

Step 3: Prepare an interstitial, and show it when needed

// preppare and load ad resource in background, e.g. at begining of game level
var div = document.createElement("div");
document.appendChild(div);
var interstitial = new Smaato({
    publisherId: ad_units.publisherId,
    adId: adid.interstitial, 
    position: SMAATO_AD_POSITION.CENTER,
    adSize: SMAATO_AD_SIZE.INTERSTITIAL, // ad size
    autoShow: false
});

// show the interstitial later, e.g. at end of game level
interstitial.show();

Javascript Methods Overview

Methods:

var smaatoAd = new Smaato();

smaatoAd.setOptions(options); // set default value for other methods
smaatoAd.show(); // show ad element
smaatoAd.showAtXY(x, y); // show element at the coordinates
smaatoAd.reload(); // requests a new ad
smaatoAd.hide(); // hide ad element
smaatoAd.remove(); // removes ad element and clear events

All options

// Options name    |   Default Value   |   Description
var options = {
    publisherId:        "",              // smaato ad publisherId
    adId:               "",              // smaato ad id
    closeButton:        false,           // if set to true, will show a close button
    overlay:            false,           // if set to true, will show an overlay the under ad        
    type:               "all",           // all(img, text, richmedia), img, text, richmedia, vast, native
    autoShow:           true,            // if set to true, no need call show
    autoReload:         false,           // if set to true, no need to call reload
    position:           8,               // default position
    adSize:             "LEADERBOARD",   // ad size
    width:              728,             // banner width, if set adSize to 'CUSTOM'
    height:             90,              // banner height, if set adSize to 'CUSTOM'
    x:                  0,               // default X of banner
    y:                  0,               // default Y of banner
    isTesting:          false,           // if set to true, to receive test ads 
    enableVideo:        false,           // if set to true, enable video for interstitial
    session:            "",              // session for ads on this device
    childDirected:      false,           // if set to true, ads are safe for children
    gps:                undefined,       // GPS coordinates of the user`s location.
    iosadid:            undefined,       // IOS ad id.
    iosadtracking:      true,            // IOS ad tracking.
    googleadid:         undefined,       // Google ad id.
    googlednt:          false,           // Google ad tracking.
    onerror:            function () { }, // Function to call when an error occurs
    onadloaded:         function () { }, // Function to call when ad loads
    onadclosed:         function () { }  // Function to call when close button gets clicked
};

All Constants

var SMAATO_AD_POSITION = {
    NO_CHANGE: 11,
    TOP_LEFT: 1,
    TOP_CENTER: 2,
    TOP_RIGHT: 3,
    LEFT: 4,
    CENTER: 5,
    RIGHT: 6,
    BOTTOM_LEFT: 7,
    BOTTOM_CENTER: 8,
    BOTTOM_RIGHT: 9,
    POS_XY: 10
};

var SMAATO_AD_SIZE = {
    TINY_BANNER:        'TINY_BANNER',      // Phones 120 x 20
    PUNY_BANNER:        'PUNY_BANNER',      // Phones 168 x 28
    LITTLE_BANNER:      'LITTLE_BANNER',    // Phones 216 x 36
    SMALL_BANNER:       'SMALL_BANNER',     // Phones and Tablets 300 x 50
    BANNER:             'BANNER',           // Phones and Tablets 320 x 50
    LEADERBOARD:        'LEADERBOARD',      // Tablets 728 x 90
    SKYSCRAPER:         'SKYSCRAPER',       // Tablets 120 x 600
    MEDIUM_RECTANGLE:   'MEDIUM_RECTANGLE', // Phones and Tablets 300 x 250
    INTERSTITIAL:       'INTERSTITIAL',     // Phones and Tablets 100%
    CUSTOM:             'CUSTOM'            // Phones and Tablets custom width and height
};