Step by step monetizing your Android Cordova application

Mobile Application, Android, Cordova, 2015-06-16 23:48:45 UTC


1. You must have a Cordova application. If you don't have one, you can follow these steps.


2. Add plugin with command line. You can see readme from the source, here.

$ cordova plugin add com.rjfun.cordova.plugin.admob



3. Run your virtual device to testing it.
If you see the screen like bellow, you are on the right track and you can move to the next step.



4. Just copy AdMob.js into your js folder.

5. Just replace your index.html with below code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        <title>Hello World</title>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/AdMob.js"></script>
        <style type="text/css">
            html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; background-color:white; }
            div#fullpage { width:100%; height:100%; margin:0; padding:0; border:0px solid red; text-align:center; vertical-align:middle; }
            button { font-size: 22px; }
        </style>
    </head>
    <body onload="onDocLoad()" onresize="onResize()">
    <script>
    function onDocLoad() {
        if(( /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent) )) {
            document.addEventListener('deviceready', initApp, false);
        } else {
            initApp();
        }
    }
    
    function initApp() {
        initAd();

        // display the banner at startup
        window.plugins.AdMob.createBannerView();
    }
    function initAd(){
        if ( window.plugins && window.plugins.AdMob ) {
            var ad_units = {
                android : {
                    banner: 'ca-app-pub-6869992474017983/9375997553',
                    interstitial: 'ca-app-pub-6869992474017983/1657046752'
                }
            };
            var admobid = "";
            if( /(android)/i.test(navigator.userAgent) ) {
                admobid = ad_units.android;
            } else if(/(iphone|ipad)/i.test(navigator.userAgent)) {
                admobid = ad_units.ios;
            } else {
                admobid = ad_units.wp8;
            }

            window.plugins.AdMob.setOptions( {
                publisherId: admobid.banner,
                interstitialAdId: admobid.interstitial,
                bannerAtTop: false, // set to true, to put banner at top
                overlap: false, // set to true, to allow banner overlap webview
                offsetTopBar: false, // set to true to avoid ios7 status bar overlap
                isTesting: false, // receiving test ad
                autoShow: true // auto show interstitial ad when loaded
            });

            registerAdEvents();
            
        } else {
            alert( 'admob plugin not ready' );
        }
    }
    // optional, in case respond to events
    function registerAdEvents() {
        document.addEventListener('onReceiveAd', function(){});
        document.addEventListener('onFailedToReceiveAd', function(data){});
        document.addEventListener('onPresentAd', function(){});
        document.addEventListener('onDismissAd', function(){ });
        document.addEventListener('onLeaveToAd', function(){ });
        document.addEventListener('onReceiveInterstitialAd', function(){ });
        document.addEventListener('onPresentInterstitialAd', function(){ });
        document.addEventListener('onDismissInterstitialAd', function(){ });
    }
    function onResize() {
        var msg = 'web view: ' + window.innerWidth + ' x ' + window.innerHeight;
        document.getElementById('sizeinfo').innerHTML = msg;
    }
    </script>
    <div id="fullpage">
    <p>Demo for AdMob Plugin</p>
    <p><button onclick="window.plugins.AdMob.createBannerView();">create Ad</button> <button onclick="window.plugins.AdMob.destroyBannerView();">remove Ad</button></p>
    <p><button onclick="window.plugins.AdMob.showAd(true,function(){},function(e){alert(JSON.stringify(e));});">show Ad</button> <button onclick="window.plugins.AdMob.showAd(false);">hide Ad</button></p>
    <p><button onclick="window.plugins.AdMob.createInterstitialView();">create Interstitial Ad</button></p>
    <p><button onclick="window.plugins.AdMob.showInterstitialAd(true,function(){},function(e){alert(JSON.stringify(e));});">show Interstitial Ad</button></p>
    <div id="sizeinfo">width * height</div>
    <div>Try rotate screen to test the orientation change</div>

    </div>
    
    </body>
</html>


6. Run your virtual device again. If you can see the picture like below, you are success.



Share: