PR

VS2015のcordova5.1.1で作ったAndoroidアプリにadmobを貼る

admobはpluginでスマートに貼り付ける

cordova(phonegap)はプラグインを追加して機能を拡張できますが、admobを貼り付けることもpluginで簡単に実現できます。しかし、簡単といってもpluginによっては動作しないものもあり、動作不能の原因はわかりにくいです。

ところで話は変わりますが、アプリを作る目的は何でしょう?

アプリがヒットして億万長者という夢があるかもしれません。

andoridのアプリはgoogleplayで販売できますが、アプリを売るのは結構難しいです。そこで、アプリ自体は無料にし広告を表示することで広告収入を得るという方法が一般的なマネタイズです。

ということで、今回はAndoroidのアプリにadmob(アドモブ)という広告を貼りたいと思います。

前回は、コルドバでグーグルマップを表示するだけの簡単なアンドロイドアプリを作ってみました。

あれだけの短いコードでAndoroidの地図アプリができますが、こんかいはこれに広告を貼り収益化を図ります!

1 必要なプラグイン

まず必須のプラグインですが、deviceというプラグイン。

これは、cordova(phonegap)がスマホなどの端末機能を利用できる状態を検知するプラグインです。このプラグインがないとadmobを設置することができません。

 

VS2015-cordova-phonegap-1

 

plugin ’device’ の導入は、config.xmlの[プラグイン]-[コア]-[device]-[追加]で導入できます。

deviceで端末機能を利用できるようになったあと、admobのバナーを表示するコードを実行します。

前後が逆転すると広告のバナーが表示されないため注意が必要です。

また、deviceは常用するプラグインで、カメラなどを利用する場合にもこのプラグインがあることが前提です。

 

次にaomobのバナーを表示するプラグインです。

このプラグインは様々なものがありますが、このfloatinghotpotを使います。というより、このプラグイン以外で広告表示の確認ができませんでした。

まず、githabでプラグインのコードを取得します。

場所はここです。  「https://github.com/floatinghotpot/cordova-plugin-admob」

ここを開くと、こんな感じですので、赤丸をクリックし、プラグインのリンクをクリップボードにコピーします。

 

VS2015-cordova-phonegap-2

 

続いて、config.xmlの[プラグイン]-[カスタム]-[Git]を選択。

 

VS2015-cordova-phonegap-3

 

Gitリポジトリの場所に先ほどクリップボードにコピーしたアドレスを入力すると右にプラグイン名が表示されるので、[追加]をクリックすると晴れてadmobを利用できる状態になります。

2 admobにアカウントを開設

admobのサイトからアカウントを開設します。

ここで、こんな感じの’ca-app-pub-1111111111111111/2222222222’のコードが決まります。

bannerバナーとinterstitialインタースティシャル(全画面広告)の二つを作っておきましょう。

 

3 VS2015にadmobを表示する関数をjavascriptで追加

大ざっぱですが、index.htmlを以下のコードに書き換えます。

まずは、admobの広告(テストのバナー)を表示してみましょう!


[code language=”javascript”]
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src*;script-src’self’ ‘unsafe-inline’ ‘unsafe-eval’*;style-src ‘self’ ‘unsafe-inline’;" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=true"></script>

<script type="text/javascript">

function onLoad() {///デバイスの初期化
if (typeof device === ‘undefined’) {
document.addEventListener(‘deviceready’, onDeviceReady, false);
} else {
initApp();
}
}

function onDeviceReady() {
document.removeEventListener(‘deviceready’, onDeviceReady, false);
initApp();
}

function initApp() {
initAd();
window.plugins.AdMob.createBannerView();
init();
}
function initAd() {

if (window.plugins && window.plugins.AdMob) {
var ad_units = {

android: {
banner: ‘ca-app-pub-1111111111111111/2222222222’,
interstitial: ‘ca-app-pub-1111111111111111/3333333333’
},

};
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: true, // set to true, to allow banner overlap webview
offsetTopBar: false, // set to true to avoid ios7 status bar overlap
isTesting: true, // receiving test ad
autoShow: true // auto show interstitial ad when loaded
});
registerAdEvents();

}
}
// 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 init() {

var map = document.getElementById("map");
var options = {
zoom: 17,
center: new google.maps.LatLng(35.6904, 139.6999),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
new google.maps.Map(map, options);
};
</script>
</head>
<body onload="onLoad()">

<div id="map" style="width :100%; height :100%;"></div>

</body>
</html>
[/code]

成功すると、こんな感じで広告が表示されます。
VS2015-cordova-phonegap-4

 

スポンサードリンク