05. How to Use with Mobile Chrome App

Tools Required

To use AdMob plugin with Mobile Chrome App, you have to install cca CLI first.

sudo npm install -g cca

Please follow the cca guideline here to learn how to use cca CLI: https://github.com/MobileChromeApps/mobile-chrome-apps

Now create project with cca CLI and install the plugin:

cca create testcca com.rjfun.testcca TestCCA
cd testcca
cca platform add android
cca platform add ios
cca plugin add cordova-plugin-admobpro

manifest.json

{
    "name": "TestCCA",
    "description": "A Sample Chrome App",
    "manifest_version": 2,
    "minimum_chrome_version": "23",
    "version": "0.1.1",
    "offline_enabled": true,
    "icons": {
        "36": "assets/icons/icon36.png",
        "144": "assets/icons/icon144.png"
    },
    "app": {
        "background": {
            "scripts": [
                "background.js"
            ]
        }
    },
    "permissions": [
        "<all_urls>"
    ]
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    width: 244,
    height: 380,
  });
});

index.html

The reference to cordova.js is NOT needed, cca will inject cordova.js automatically. Please remove it from your index.html, or else the doc load event will not be fired correctly.

<script type="text/javascript" src="cordova.js"></script>

Put your javascript code in app.js:

<script type="text/javascript" src="app.js"></script>

app.js

Now let's call AdMob plugin APIs:

// optional, in case respond to events or handle error
function registerAdEvents() {
    // new events, with variable to differentiate: adNetwork, adType, adEvent
    document.addEventListener('onAdFailLoad', function(data) {
        alert('error: ' + data.error 
            + ', reason: ' + data.reason
            + ', adNetwork:' + data.adNetwork 
            + ', adType:' + data.adType
            + ', adEvent:' + data.adEvent); // adType: 'banner' or 'interstitial'
    });
    document.addEventListener('onAdLoaded', function(data) {});
    document.addEventListener('onAdPresent', function(data) {});
    document.addEventListener('onAdLeaveApp', function(data) {});
    document.addEventListener('onAdDismiss', function(data) {});
}
function initAd() {
    // optional: set some options
    if(AdMob) AdMob.setOptions({
        isTesting : true, // set to true, to receiving test ad for testing purpose
        // bannerId: admobid.banner,
        // interstitialId: admobid.interstitial,
        // adSize: 'SMART_BANNER',
        // width: integer, // valid when set adSize 'CUSTOM'
        // height: integer, // valid when set adSize 'CUSTOM'
        position : AdMob.AD_POSITION.BOTTOM_CENTER,
        // offsetTopBar: false, // avoid overlapped by status bar, for iOS7+
        bgColor : 'black', // color name, or '#RRGGBB'
        // x: integer,		// valid when set position to 0 / POS_XY
        // y: integer,		// valid when set position to 0 / POS_XY
    });
	
    registerAdEvents();
	
    // display the banner at startup
    if(AdMob) AdMob.createBanner({ adId:admobid.banner, autoShow:true, isTesting:true });
}

function deviceReady() {
    if(! AdMob) {
        alert('admob plugin not ready');
        return;
    }
    
    // initAd(); // this won't work, have to wait a few secs, so call window.setTimeout()
    window.setTimeout(initAd, 3000); 
}

function onAppLoad() {
    if(typeof window.cordova !== 'undefined') { // for mobile chrome app, detect in cordova environment
        deviceReady();

    } else { // for test in pc browser
        deviceReady();
    }
}

$(document).ready(onAppLoad); // if you are using jQuery
//document.addEventListener('DOMContentLoaded', onAppLoad);

Finally, let's build and run:

cca prepare;
cca run android;
cca run ios;

Have fun!