Integration Guides


Cordova

Full Guide

Getting Started

Ad Unit

Advanced

SDK Package

1 Overview

Follow these three simple steps to start monetizing:

  1. Add your app to our system and get your App ID.
  2. Add the plugin to your project.
  3. Implement Start Session and preferred Ad Unit code.
media_id

2 Configuration

Access your Apps page and register your application to get your App ID.

Cordova

Add the plugin to your existing Cordova project: cordova plugin add https://github.com/RevMob/cordova-sdk-plugin

Phonegap

Add the plugin to your existing Phonegap project:phonegap local plugin add https://github.com/RevMob/cordova-sdk-plugin

3 Start Session

Before showing any ads, you must start a Revmob session, i.e. initialize our SDK.
It's a best practice to do that as soon as your app is ready, so you can call ads easily whenever you want to.
In your index.html file, inside www folder, put the following code.

Implementation

revmob.startSession(onSuccess, onError);
            

Check the full example below:

Sample

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
        <style>
            button{
                width:100%;
                background:#17AADF;
                color:#fff;
                font-size:12px;
                border:none;
                border-radius:3px;
                padding:16px;
                margin:10px 5px 15px 20px;
                margin-top:40px;
                cursor:pointer;
                -webkit-appearance: none;
            }
            button:hover{
                background:#000;
            }
        </style>
    </head>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
        var revmob = null;
        function onDeviceReady() {
            if( /(android)/i.test(navigator.userAgent) ) {
                // for Android
                revmob = new RevMob("<YOUR_APP_ID>");
            } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
                // for iOS
                revmob = new RevMob("<YOUR_APP_ID>");
            } else {
                alert('platform not supported');
            }
        }
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        var onSuccess = function (event) {
            var message = "";
            if (event.RevMobAdsEvent == "SESSION_STARTED") {
                message = "Session started!";
            }else {
                message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'EVENT: ' + message;
        }
        var onError = function (event) {
            var message = "";
            if (event.RevMobAdsEvent == "AD_NOT_RECEIVED") {
                message = "Ad not received!";
            }
            else if (event.RevMobAdsEvent == "SESSION_NOT_STARTED") {
                message = "Session not started!";
            }
            else {
                message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'ERROR: ' + message;
        }
    </script>
    <body onload="onBodyLoad()">
        <div class="app">
            <div id="deviceready" class="blink">
            </div>
            <div class="revmob-panel">
                <button onclick="revmob.startSession(onSuccess, onError);">Start Session</button><br />
            </div>
            <p id="eventLog">Waiting for events</p>
        </div>
    </body>
</html>
            

4 Testing

While you're developing your app, you will only receive test ads. Your app must make at least one ad request while on test mode in order to be validated before receiving live ads. Be sure you are able to receive at least one of our sample ads and that it’s redirecting to our "Success Page" when clicked. Once you are able to receive our sample ads it means you’ve successfully integrated our sdk.

sample_ads

Fullscreen sample, Banner sample, and Success Page

5 Go Live

Once you're finished and your app is in the store with our SDK, click on the "Go live" button in your Apps page and insert your app's URL. It may take up to 48h for your app to be approved. After that, it will start receiving live ads.

app_store_idfa

6 Kids Category

Apps designed for families have special regulations for monetizing. As stated in Google Play's guidelines and in Apple's guidelines, they may not include behavioral advertising and the ads must be appropriate for kids.
Revmob is fully COPPA compliant. To specify that your app is designed for kids and to guarantee that it's fully compliant, you must set the user minimum age when your user is 13 or less years old:

revmob.setUserAgeRangeMin(10);
            

It is also required that you do not display a fullscreen ad immediately upon app launch and show no more than one ad placement per page.

Attention:
This method is only to protect children from abusive advertising, setting the user age incorrectly may affect your eCPM due to our algorithms that uses this information for retargeting.

7 Upload to App Store

When uploading your app to App Store with Revmob SDK, you will be asked about the use of IDFA.
Revmob uses IDFA for targeting purposes. Check "Yes" on the option at the right side of the page, as it will improve your earnings a lot.
Then, on the last three checkboxes:

  1. Check this box to serve ads.
  2. Check this box if you are also advertising the app you are uploading, and its installations will be tracked.
  3. This check is optional, as it's not used by Revmob.
app_store_idfa

8 Sample App

Requirements

There are a few simple requirements you'll need prior to running the Sample App:

Installing Cordova

  • Open a command prompt (Windows) or Terminal (Mac/Linux), and type npm install -g cordova
  • Navigate to the directory where you wish to clone your project and type git clone https://github.com/RevMob/cordova-sdk-plugin

Add a Platform

  • To add a platform, type cordova platform add android ios

Run Sample App

  • From the command line, type cordova run ios android

1 Native Button/Link

You have full control over this ad unit's layout. You design it, attach our method to its click event and the user will be redirected to the Play Store.
A common usage is to associate it to a "more games" button or to a custom banner your team designed.
Keep in mind that the image associated with this link must be clearly identified as an advertising.

Implementation

You can call the openLoadedAdLink method like this:

revmob.openLoadedAdLink(onSuccess, onError);
            

Sample

<!DOCTYPE html>
<html>
    <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" /> -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Revmob Sample App</title>
        <style>
            button{
                width:100%;
                background:#17AADF;
                color:#fff;
                font-size:12px;
                border:none;
                border-radius:3px;
                padding:16px;
                margin:10px 5px 15px 20px;
                margin-top:40px;
                cursor:pointer;
                -webkit-appearance: none;
            }
            button:hover{
                background:#000;
            }
        </style>
    </head>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
        var revmob = null;
        function onDeviceReady() {
            if( /(android)/i.test(navigator.userAgent) ) {
                // for Android
                revmob = new RevMob("<YOUR_APP_ID_ANDROID>");
            } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
                // for iOS
                revmob = new RevMob("<YOUR_APP_ID_IOS>");
            } else {
                alert('platform not supported');
            }
            revmob.startSession(onSuccess, onError);
        }
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        var onSuccess = function (event) {
            var message = "";
            switch(event.RevMobAdsEvent) {
                  case "SESSION_STARTED":
                    message = "Session started";
                    revmob.loadAdLink(onSuccess, onError);
                    break;
                  case "LOAD_NATIVE_LINK_CLICKED":
                      message = "LoadNative link clicked.";
                      break;
                  case "LOAD_NATIVE_LINK_RECEIVED":
                      message = "LoadNative link received.";
                      document.getElementById("button").style.visibility = "visible";
                      break;
                  default:
                    message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'EVENT: ' + message;
        }
        var onError = function (event) {
            var message = "";
            String.prototype.startsWith = function( str ){
              return ( this.indexOf( str ) === 0 );
            };
            switch(true){
              case event.RevMobAdsEvent.startsWith('LOAD_NATIVE_LINK_NOT_RECEIVED'):
                message = "LoadNative not received!";
                break;
              case event.RevMobAdsEvent.startsWith('SESSION_NOT_STARTED'):
                message = "Session not started!";
                alert(event.RevMobAdsEvent);
                break;
              default:
                message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'ERROR: ' + message;
        }
    </script>
    <body onload="onBodyLoad()">
        <div class="app">
            <h1> Revmob Sample App</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
            <div>
                <input name="" type="text" placeholder="Test input">
            </div>
            <div class="revmob-panel" id="button" style="visibility:hidden;">
                <button onclick="revmob.openLoadedAdLink(onSuccess, onError);">Open Loaded Ad Link</button><br>
            </div>
            <p id="eventLog">Waiting for events</p>
        </div>
    </body>
</html>
            
ant_smasher_native

100-million-downloads Ant Smasher's success case.

2 Fullscreen

The Interstitial is an advertisement that fills the whole screen. It's usually shown:

  1. On app start;
  2. Before/after a game round;
  3. After a service is used (e.g. alarm turned off).

When pre-caching, the ad received can either be a static interstitial or a video ad. Our servers will always return the one that can pay you more.

Supporting Orientations

In your showLoadedFullscreen method, you should implement:

  • if you support only portrait:
    UIInterfaceOrientationPortrait
    UIInterfaceOrientationPortraitUpsideDown
  • if you support only landscape:
    UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight

You can call the showLoadedFullscreen method like this:

revmob.showLoadedFullscreen(['UIInterfaceOrientationPortrait','UIInterfaceOrientationPortraitUpsideDown'], onSuccess, onError);
            

Sample

<!DOCTYPE html>
<html>
    <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" /> -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Revmob Sample App</title>
        <style>
            button{
                width:100%;
                background:#17AADF;
                color:#fff;
                font-size:12px;
                border:none;
                border-radius:3px;
                padding:16px;
                margin:10px 5px 15px 20px;
                margin-top:40px;
                cursor:pointer;
                -webkit-appearance: none;
            }
            button:hover{
                background:#000;
            }
        </style>
    </head>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
        var revmob = null;
        function onDeviceReady() {
            if( /(android)/i.test(navigator.userAgent) ) {
                // for Android
                revmob = new RevMob("<YOUR_APP_ID_ANDROID>");
            } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
                // for iOS
                revmob = new RevMob("<YOUR_APP_ID_IOS>");
            } else {
                alert('platform not supported');
            }
            revmob.startSession(onSuccess, onError);
        }
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        var onSuccess = function (event) {
            var message = "";
            switch(event.RevMobAdsEvent) {
                  case "SESSION_STARTED":
                    message = "Session started";
                    revmob.loadFullscreen(['UIInterfaceOrientationPortrait','UIInterfaceOrientationPortraitUpsideDown'], onSuccess, onError);
                    break;
                  case "LOAD_FULLSCREEN_RECEIVED":
                  revmob.showLoadedFullscreen( onSuccess, onError);
                    message = "LoadFullscreen ad received and ready to be displayed.";
                    break;
                  case "LOAD_FULLSCREEN_DISMISSED":
                    message = "LoadFullscreen dismissed.";
                    break;
                  case "LOAD_FULLSCREEN_CLICKED":
                    message = "LoadFullscreen clicked.";
                    break;
                  case "LOAD_FULLSCREEN_DISPLAYED":
                    message = "loadFullscreen displayed!";
                    break;
                  default:
                    message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'EVENT: ' + message;
        }
        var onError = function (event) {
            var message = "";
            String.prototype.startsWith = function( str ){
              return ( this.indexOf( str ) === 0 );
            };
            switch(true){
              case event.RevMobAdsEvent.startsWith('LOAD_FULLSCREEN_NOT_RECEIVED'):
                message = "LoadFullscreen not received!";
                break;
              case event.RevMobAdsEvent.startsWith('SESSION_NOT_STARTED'):
                message = "Session not started!";
                alert(event.RevMobAdsEvent);
                break;
              default:
                message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'ERROR: ' + message;
        }
    </script>
    <body onload="onBodyLoad()">
        <div class="app">
            <h1> Revmob Sample App</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
            <div>
                <input name="" type="text" placeholder="Test input">
            </div>
            <div class="revmob-panel">
            </div>
            <p id="eventLog">Waiting for events</p>
        </div>
    </body>
</html>
            
ant_smasher_fullscreen

Revmob's test Fullscreen ad.

3 Banner

Banner ads have a standard size of 320x50 for phones and 728x90 for tablets.
You can use it in 2 different ways:

  • Basic Banner
  • Custom Banner

Supporting orientations

In your showBanner method, you should implement:

  • If you support only portrait:
    UIInterfaceOrientationPortrait
    UIInterfaceOrientationPortraitUpsideDown
  • If you support only landscape:
    UIInterfaceOrientationLandscapeLeft
    UIInterfaceOrientationLandscapeRight

Basic Banner

This method is the simplest way to show a banner ad.
The banner will be displayed at the bottom, with the screen width.
You can call the preLoadBanner method like this:

revmob.preLoadBanner(['UIInterfaceOrientationPortrait','UIInterfaceOrientationPortraitUpsideDown'], onSuccess, onError);
            

You can call the showBanner method like this:

revmob.showBanner(['UIInterfaceOrientationPortrait','UIInterfaceOrientationPortraitUpsideDown'], onSuccess, onError);
            

To hide the basic banner, just write the code below:

revmob.hideBanner();
            

If you hide the ad, you can call showCustomBannerPos to show the same ad.
To request a new banner, you have to release the old ad and then call releaseBanner.

revmob.releaseBanner();
            

Custom Banner

You can display a banner with custom positioning and size.
You can call the preLoadCustomBanner method like this:

revmob.preLoadCustomBanner(['UIInterfaceOrientationPortrait','UIInterfaceOrientationPortraitUpsideDown'], onSuccess, onError);
            

You can call the showCustomBannerPos method like this:

revmob.showCustomBannerPos(['UIInterfaceOrientationPortrait','UIInterfaceOrientationPortraitUpsideDown'], onSuccess, onError);
            

To hide the basic customBanner, just write the code below:

revmob.hideCustomBanner();
            

If you hide the ad, you can call Show() to show the same ad.
To request a new banner, you have to release the old ad and then call preLoadCustomBanner.

revmob.releaseCustomBanner();
            

You can call the showBanner method like this:

revmob.showBanner(['UIInterfaceOrientationPortrait','UIInterfaceOrientationPortraitUpsideDown'], onSuccess, onError);
            

Sample

<!DOCTYPE html>
<html>
    <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" /> -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Revmob Sample App</title>
        <style>
            button{
                width:100%;
                background:#17AADF;
                color:#fff;
                font-size:12px;
                border:none;
                border-radius:3px;
                padding:16px;
                margin:10px 5px 15px 20px;
                margin-top:40px;
                cursor:pointer;
                -webkit-appearance: none;
            }
            button:hover{
                background:#000;
            }
        </style>
    </head>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
        var revmob = null;
        function onDeviceReady() {
            if( /(android)/i.test(navigator.userAgent) ) {
                // for Android
                revmob = new RevMob("<YOUR_APP_ID_ANDROID>");
            } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
                // for iOS
                revmob = new RevMob("<YOUR_APP_ID_IOS>");
            } else {
                alert('platform not supported');
            }
            revmob.startSession(onSuccess, onError);
        }
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        var onSuccess = function (event) {
            var message = "";
            switch(event.RevMobAdsEvent) {
                case "SESSION_STARTED":
                    message = "Session started";
                    revmob.preLoadBanner(['UIInterfaceOrientationPortrait','UIInterfaceOrientationPortraitUpsideDown'], onSuccess, onError);
                    break;
                case "BANNER_RECEIVED":
                    message = "Banner ad received and ready to be displayed.";
                    revmob.showBanner(['UIInterfaceOrientationPortrait','UIInterfaceOrientationPortraitUpsideDown'], onSuccess, onError);
                    break;
                case "BANNER_DISMISSED":
                    message = "Banner ad dismissed.";
                    break;
                case "BANNER_CLICKED":
                    message = "Banner clicked.";
                    break;
                case "BANNER_DISPLAYED":
                    message = "Banner displayed!";
                    break;
                default:
                    message = event.RevMobAdsEvent;
            }
        var element = document.getElementById('eventLog');
        element.innerHTML = 'EVENT: ' + message;
        }
        var onError = function (event) {
            var message = "";
            String.prototype.startsWith = function( str ){
              return ( this.indexOf( str ) === 0 );
            };
            switch(true){
              case event.RevMobAdsEvent.startsWith('BANNER_NOT_RECEIVED'):
                message = "Banner not received!";
                break;
              case event.RevMobAdsEvent.startsWith('SESSION_NOT_STARTED'):
                message = "Session not started!";
                alert(event.RevMobAdsEvent);
                break;
              default:
                message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'ERROR: ' + message;
        }
    </script>
    <body onload="onBodyLoad()">
        <div class="app">
            <h1> RevMob Sample App</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
            <div>
                <input name="" type="text" placeholder="Test input">
            </div>
            <div class="revmob-panel">
            </div>
            <p id="eventLog">Waiting for events</p>
        </div>
    </body>
</html>
            
ant_smasher_banner

100-million-downloads Ant Smasher's home menu banner.

4 Video

To show a video ad, it is mandatory to call the loadVideo method. A good place to call this method is after the startSession.
Then, when you receive a callback from our VIDEO_LOADED listener, you can call the showVideo method. A good place to call this method is after a game over, for example.

Implementation

You can call the showVideo method like this:

revmob.showVideo(onSuccess, onError);
            

Sample

<!DOCTYPE html>
<html>
    <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" /> -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Revmob Sample App</title>
        <style>
            button{
                width:100%;
                background:#17AADF;
                color:#fff;
                font-size:12px;
                border:none;
                border-radius:3px;
                padding:16px;
                margin:10px 5px 15px 20px;
                margin-top:40px;
                cursor:pointer;
                -webkit-appearance: none;
            }
            button:hover{
                background:#000;
            }
        </style>
    </head>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
        var revmob = null;
        function onDeviceReady() {
            if( /(android)/i.test(navigator.userAgent) ) {
                // for Android
                revmob = new RevMob("<YOUR_APP_ID_ANDROID>");
            } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
                // for iOS
                revmob = new RevMob("<YOUR_APP_ID_IOS>");
            } else {
                alert('platform not supported');
            }
            revmob.startSession(onSuccess, onError);
        }
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        var onSuccess = function (event) {
            var message = "";
            switch(event.RevMobAdsEvent) {
                  case "SESSION_STARTED":
                    message = "Session started";
                    revmob.loadVideo(onSuccess, onError);
                    break;
                  case "VIDEO_LOADED":
                    message = "Video loaded.";
                    revmob.showVideo(onSuccess, onError);
                    break;
                  case "VIDEO_DID_START":
                      message = "Video started.";
                      break;
                  case "VIDEO_DID_FINISH":
                      message = "Video finished.";
                      break;
                  case "VIDEO_DID_CLOSE_VIDEO":
                      message = "Video closed.";
                      break;
                    case "VIDEO_DID_CLICK_ON_VIDEO":
                      message = "Video clicked.";
                      break;
                  default:
                    message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'EVENT: ' + message;
        }
        var onError = function (event) {
            var message = "";
            String.prototype.startsWith = function( str ){
              return ( this.indexOf( str ) === 0 );
            };
            switch(true){
              case event.RevMobAdsEvent.startsWith('VIDEO_DID_FAIL_WITH_ERROR'):
                message = "Video failed";
                break;
              case event.RevMobAdsEvent.startsWith('VIDEO_NOT_COMPLETELY_LOADED'):
                message = "Video not completely loaded.";
                break;
              case event.RevMobAdsEvent.startsWith('SESSION_NOT_STARTED'):
                message = "Session not started!";
                alert(event.RevMobAdsEvent);
                break;
              default:
                message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'ERROR: ' + message;
        }
    </script>
    <body onload="onBodyLoad()">
        <div class="app">
            <h1> RevMob Sample App</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
            <div>
                <input name="" type="text" placeholder="Test input">
            </div>
            <div class="revmob-panel">
            </div>
            <p id="eventLog">Waiting for events</p>
        </div>
    </body>
</html>
            
ant_smasher_video

Revmob's Video test ad

5 Rewarded Video

Rewarded Video ads are offered as an option to earn digital currency in your app. You must tell the user it's an advertising video before showing the ad and giving the reward.
You can either prompt the user with a pre-roll box for him to accept or customize a button that he spontaneously will click, being aware that he's going to watch an advertising video.
Rewarded video ads are not skippable after the user has accepted to watch them.

Implementation

You can call the showRewardedVideo method like this:

revmob.showRewardedVideo(onSuccess, onError);
            

Sample

<!DOCTYPE html>
<html>
    <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" /> -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Revmob Sample App</title>
        <style>
            button{
                width:100%;
                background:#17AADF;
                color:#fff;
                font-size:12px;
                border:none;
                border-radius:3px;
                padding:16px;
                margin:10px 5px 15px 20px;
                margin-top:40px;
                cursor:pointer;
                -webkit-appearance: none;
            }
            button:hover{
                background:#000;
            }
        </style>
    </head>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
        var revmob = null;
        function onDeviceReady() {
            if( /(android)/i.test(navigator.userAgent) ) {
                // for Android
                revmob = new RevMob("<YOUR_APP_ID_ANDROID>");
            } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
                // for iOS
                revmob = new RevMob("<YOUR_APP_ID_IOS>");
            } else {
                alert('platform not supported');
            }
            revmob.startSession(onSuccess, onError);
        }
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        var onSuccess = function (event) {
            var message = "";
            switch(event.RevMobAdsEvent) {
                  case "SESSION_STARTED":
                    message = "Session started";
                    revmob.loadRewardedVideo(onSuccess, onError);
                    break;
                    case "REWARDED_VIDEO_LOADED":
                      message = "Rewarded Video loaded.";
                      revmob.showRewardedVideo(onSuccess, onError);
                      break;
                    case "REWARDED_VIDEO_STARTED":
                      message = "Rewarded Video started.";
                      break;
                    case "REWARDED_VIDEO_COMPLETED":
                      message = "Rewarded Video completed.";
                      break;
                  default:
                    message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'EVENT: ' + message;
        }
        var onError = function (event) {
            var message = "";
            String.prototype.startsWith = function( str ){
              return ( this.indexOf( str ) === 0 );
            };
            switch(true){
              case event.RevMobAdsEvent.startsWith('REWARDED_VIDEO_FAILED_TO_LOAD'):
                message = "Rewarded Video failed to load.";
                break;
              case event.RevMobAdsEvent.startsWith('REWARDED_VIDEO_NOT_COMPLETELY_LOADED'):
                message = "Rewarded Video not completely loaded.";
                break;
              case event.RevMobAdsEvent.startsWith('SESSION_NOT_STARTED'):
                message = "Session not started!";
                alert(event.RevMobAdsEvent);
                break;
              default:
                message = event.RevMobAdsEvent;
            }
            var element = document.getElementById('eventLog');
            element.innerHTML = 'ERROR: ' + message;
        }
    </script>
    <body onload="onBodyLoad()">
        <div class="app">
            <h1> RevMob Sample App</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
            <div>
                <input name="" type="text" placeholder="Test input">
            </div>
            <div class="revmob-panel">
            </div>
            <p id="eventLog">Waiting for events</p>
        </div>
    </body>
</html>
            
ant_smasher_video

Revmob's Video test ad

1 Event Listeners

With Listeners (also known as Delegates or Callbacks) you can follow the ad workflow. The Revmob SDK will fire events for every important change in the ad state. For example, you can identify if the ad was loaded successfully or if the user clicked on the ad.

var onSuccess = function (event) {
    var message = "";
    switch(event.RevMobAdsEvent) {
        case "SESSION_STARTED":
            message = "Session started";
            break;
        case "FULLSCREEN_RECEIVED":
            message = "Fullscreen ad received and ready to be displayed.";
            break;
        case "FULLSCREEN_DISMISSED":
            message = "Fullscreen dismissed!";
            break;
        case "FULLSCREEN_CLICKED":
            message = "Fullscreen clicked!";
            break;
        case "FULLSCREEN_DISPLAYED":
            message = "Fullscreen displayed!";
            break;
        case "LOAD_FULLSCREEN_RECEIVED":
            message = "LoadFullscreen ad received and ready to be displayed.";
            break;
        case "LOAD_FULLSCREEN_DISMISSED":
            message = "LoadFullscreen dismissed.";
            break;
        case "LOAD_FULLSCREEN_CLICKED":
            message = "LoadFullscreen clicked.";
            break;
        case "LOAD_FULLSCREEN_DISPLAYED":
            message = "loadFullscreen displayed!";
            break;
        case "VIDEO_LOADED":
            message = "Video loaded.";
            break;
        case "VIDEO_DID_START":
            message = "Video started.";
            break;
        case "VIDEO_DID_FINISH":
            message = "Video finished.";
            break;
        case "VIDEO_DID_CLOSE_VIDEO":
            message = "Video closed.";
            break;
        case "VIDEO_DID_CLICK_ON_VIDEO":
            message = "Video clicked.";
            break;
        case "REWARDED_VIDEO_LOADED":
            message = "Rewarded Video loaded.";
            break;
        case "REWARDED_VIDEO_STARTED":
            message = "Rewarded Video started.";
            break;
        case "REWARDED_VIDEO_COMPLETED":
            message = "Rewarded Video completed.";
            break;
        case "BANNER_RECEIVED":
            message = "Banner ad received and ready to be displayed.";
            break;
        case "BANNER_DISMISSED":
            message = "Banner ad dismissed.";
            break;
        case "BANNER_CLICKED":
            message = "Banner clicked.";
            break;
        case "BANNER_DISPLAYED":
            message = "Banner displayed!";
            break;
        case "CUSTOM_BANNER_RECEIVED":
            message = "Custom Banner ad received and ready to be displayed.";
            break;
        case "CUSTOM_BANNER_DISMISSED":
            message = "Custom Banner dismissed.";
            break;
        case "CUSTOM_BANNER_CLICKED":
            message = "Custom Banner clicked.";
            break;
        case "CUSTOM_BANNER_DISPLAYED":
            message = "Custom Banner displayed.";
            break;
        case "LOAD_NATIVE_LINK_CLICKED":
            message = "LoadNative link clicked.";
            break;
        case "LOAD_NATIVE_LINK_RECEIVED":
            message = "LoadNative link received.";
            break;
        case "NATIVE_LINK_CLICKED":
            message = "Native link clicked.";
            break;
        default:
            message = event.RevMobAdsEvent;
    }
    var element = document.getElementById('eventLog');
    element.innerHTML = 'EVENT: ' + message;
}
var onError = function (event) {
    var message = "";
    String.prototype.startsWith = function( str ){
        return ( this.indexOf( str ) === 0 );
    };
    switch(true){
        case event.RevMobAdsEvent.startsWith('NATIVE_LINK_NOT_RECEIVED'):
            message = "Native not received!";
            break;
        case event.RevMobAdsEvent.startsWith('LOAD_NATIVE_LINK_NOT_RECEIVED'):
            message = "LoadNative not received!";
            break;
        case event.RevMobAdsEvent.startsWith('LOAD_FULLSCREEN_NOT_RECEIVED'):
            message = "LoadFullscreen not received!";
            break;
        case event.RevMobAdsEvent.startsWith('FULLSCREEN_NOT_RECEIVED'):
            message = "fullscreen not received!";
            break;
        case event.RevMobAdsEvent.startsWith('VIDEO_DID_FAIL_WITH_ERROR'):
            message = "Video failed";
            break;
        case event.RevMobAdsEvent.startsWith('VIDEO_NOT_COMPLETELY_LOADED'):
            message = "Video not completely loaded.";
            break;
        case event.RevMobAdsEvent.startsWith('REWARDED_VIDEO_FAILED_TO_LOAD'):
            message = "Rewarded Video failed to load.";
            break;
        case event.RevMobAdsEvent.startsWith('REWARDED_VIDEO_NOT_COMPLETELY_LOADED'):
            message = "Rewarded Video not completely loaded.";
            break;
        case event.RevMobAdsEvent.startsWith('BANNER_NOT_RECEIVED'):
            message = "Banner not received!";
            break;
        case event.RevMobAdsEvent.startsWith('CUSTOM_BANNER_NOT_RECEIVED'):
            message = "Custom Banner not received!";
            break;
        case event.RevMobAdsEvent.startsWith('SESSION_NOT_STARTED'):
            message = "Session not started!";
            alert(event.RevMobAdsEvent);
            break;
        default:
            message = event.RevMobAdsEvent;
    }
    var element = document.getElementById('eventLog');
    element.innerHTML = 'ERROR: ' + message;
}
            

1 Change Log (yyyy/mm/dd)

9.2.0 (2016/08/17)

  • ImportantBugfix Improved memory performance.
  • New Added Load and Release Banner.
  • Update Improved Video Ad UX.
  • Bugfix Fixed minor bugs.

9.1.0 (2016/05/12)

  • NewImportantBugfix Passed through new extensive Quality Assurance procedures.
  • Bugfix Fixed AdDidFail listener being fired on some click events on Android.

9.0.4 (2015/09/01)

  • New Added RevMob Button ad unit.
  • Bugfix Fixes an important issue affecting part of the clicks, lowering the eCPM.
  • Important Many internal improvements and performance enhances.

9.0.2 (2015/06/17)

  • Important Updated the SDK to follow Cordova's plugin structure

9.0.0 (2015/05/19)

  • New Added video ads, rewarded video ads and support to VAST.
  • New Refreshable banners.
  • Important Many internal improvements and performance enhances.

1.4.2 - 2015/04/07

  • Important Added x86_64 architecture support due to Apple's new requirement.
  • New Added refreshable banners.

1.3.4 - 2014/11/28

  • Important Fixes violations in the newest Google's Policy for advertising
  • Important Fixes issues that were causing the SDK to be flagged by some antivirus

1.3.3 - 2014/11/05

  • NewImportantUpdate Added support to iOS 8.1
  • ImportantUpdate Internal improvements for both iOS and Android.

1.3.2 - 2014/09/10

  • NewImportantUpdate iOS Video Ads support.
  • NewImportant Android L compatibility.
  • NewImportant iOS 8 compatibility.

1.3.1 - 2014/07/10

  • ImportantUpdate iOS Banner dimensions are not limited anymore. Logs inform if they are smaller than the expected.
  • ImportantBugfix iOS Banner was being shown in front of the keyboard.
  • NewImportant Support for Google ID for Advertisement (details)
  • NewImportant New listeners for Eula popup window (details) for Android
  • NewImportant New public methods for accepting and rejecting the Eula programmatically - ONLY for testing purposes (details) for Android
  • NewImportant New listeners for start session in iOS and Android (documentation).
  • ImportantBugfix In iOS, status bar was being shown even if the app was hiding it.
  • ImportantUpdate Internal improvements.

1.3.0 - 2014/06/11

  • Update Internal improvements for Android releases.
  • Update Internal improvements for iOS releases.

1.2.2 - 2014/04/10

  • ImportantBugfix Fixes a bug that could lead to "SESSION NOT STARTED" warning.

1.2.1 - 2014/02/19

  • Update Internal improvements for Android releases.
  • Update Internal improvements for iOS releases.

1.2.0 - 2013/11/13

  • New Banners are now available but with limited options.
  • Update Internal improvements for Android releases.
  • Update Internal improvements for iOS releases.

1.1.0 - 2013/10/04

  • New The listener returns what was the event (received, displayed, clicked, dismiss and not received).

1.0.0 - 2013/09/19

  • NewImportant Support to iOS 7 GM (arm64 architecture are not supported yet).
  • Important Dropped support to iOS 4.
  • Update Important internal improvements for Android releases.
  • Update Important internal improvements for iOS releases.

0.6.1 - 2013/09/11

  • Update Reduced sample app size.

0.6.0 - 2013/08/12

  • Update Cordova SDK 3.0.0.

0.5.2 - 2013/08/01

  • Update Important internal improvements for iOS releases.

0.5.1 - 2013/07/25

  • Update Important internal improvements for Android releases.
  • Update Important internal improvements for iOS releases.

0.5.0 - 2013/05/29

  • Update Important internal improvements for Android releases.
  • Update Important internal improvements for iOS releases.
  • Optimization Using less memory in Android fullscreen.

0.4.1 - 2013/04/09

  • NewImportant iOS UDIDs are not collected anymore (More info).
  • Update Improvement on the logs.
  • Update Lots of internal improvements that will increase the eCPM significantly.
  • Update Android permissions validations (logs to alert implementation issues).
  • Bugfix Fixed an issue that can cause a click to fail on fullscreen.
  • Bugfix Fixed some issues that can prevent the notification of errors clicks.
  • Bugfix Fixed some issues that can cause memory leaks.

0.4.0 - 2013/02/27

  • New Using cordova 2.4.0.
  • New Ad Link for Android and iOS: revmob.openAdLink();
  • New Custom timeout for Android and iOS: revmob.setTimeoutInSeconds(5);
  • New Print Environment Informtion for Android and iOS: revmob.printEnvironmentInformation();
  • UpdateImportant New testing mode: revmob.setTestingMode(revmob.TEST_WITH_ADS); revmob.setTestingMode(revmob.TEST_WITHOUT_ADS);
  • Update Improvements in Android and iOS sample apps.

0.3.0 - 2012/11/30

  • New Using cordova 2.2.0.
  • Update RevMobPlugin210 class to keep compatibility with older versions of Cordova/PhoneGap.
  • Update Improvements in Android and iOS sample apps.

0.2.0 - 2012/11/19

  • Bugfix Avoid null pointer exception on create Fullscreen activity.
  • Bugfix Fixed error on click pop up.

0.1.5 - 2012/10/08

  • New Added sample android app.

0.1.5 - 2012/10/08

  • New Added support to iphone simulator.