前回enchant.jsで作ったゲームをmonacaでアプリ化したので今回はそこに広告を入れます。
やっぱ収益化したいですもんね！(・∀・)
前の記事 ▷▷▷ 作ったゲームをmonacaでスマホアプリにする
monacaの有料プランが必要
まず、adMobの広告を表示できるようにするためにはプラグインを入れる必要があるんですがそれが有料プランじゃないと使えません。
一番安いプランでも2000円/月となっております。
金を得るためには金を使わねばならぬ。もどかしいですね（；^ω^）
まぁアプリ化が終わればまた無料プランに変更すればいいんですけどね。
プラグインをインストール
プラグインをインストールするわけですが、まずmonaca公式の説明ページ貼っときます→https://docs.monaca.io/ja/sampleapp/samples/admob/
プラグインの入れ方はここ参照→https://qiita.com/TaskForceYokohama/items/4367c4c11b9838c91607
で、公式の方にjQuery、onsenuiが必要と書いてますが、あれはデモアプリに必要なだけで広告を表示するにはプラグインだけあればOKです。
広告表示プログラム
私もいくつもサイト見たんですけど全然わかんないですよね。説明する気あんのかよって思いません？（；^ω^）
おかげでかなり試行錯誤しましたよ(-_-;)
でも、私は優しいので皆さんに情報を共有しちゃいます。だからみんな絶対ブックマークしたりシェアしたりしろよな！(・∀・)
と言うわけで私バージョンのプログラムがこちら
var admobid = {};
// デモ広告でテストする場合、IDは以下のままでOK
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
banner: 'ca-app-pub-3940256099942544/6300978111',
interstitial: 'ca-app-pub-3940256099942544/1033173712',
rewardvideo: 'ca-app-pub-3940256099942544/5224354917',
};
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = { // for iOS
banner: 'ca-app-pub-3940256099942544/2934735716',
interstitial: 'ca-app-pub-3940256099942544/4411468910',
rewardvideo: 'ca-app-pub-3940256099942544/1712485313',
};
} else {
admobid = { // for Windows Phone
banner: 'ca-app-pub-6869992474017983/8878394753',
interstitial: 'ca-app-pub-6869992474017983/1355127956',
rewardvideo: '',
};
}
var adMobInitialize = function() {
//オーバーレイバナー
if(AdMob){
AdMob.createBanner({//
adId: admobid.banner,
overlap: true,
position: AdMob.AD_POSITION.TOP_CENTER,
autoShow: true
});
}
//インタースティシャル(準備のみ)
if(AdMob){AdMob.prepareInterstitial({
adId: admobid.interstitial,
autoShow: false,//trueだと勝手に表示するので必ずfalse
});
}
};
document.addEventListener("deviceready", adMobInitialize, false);
function adMobShowInterstitial(){
if(AdMob){
AdMob.showInterstitial();//表示
AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );//次回分の準備
}
}
基本的にこれコピペするだけでオーバーレイ広告なら勝手に出てくれます(・∀・)
あ、広告が出るかどうかの確認はビルドしてインストールしないとできないので注意してください。ちょっと面倒ですけどね。。
では、以下細かい説明をしていきます。
admobID
// デモ広告でテストする場合、IDは以下のままでOK
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
banner: 'ca-app-pub-3940256099942544/6300978111',
interstitial: 'ca-app-pub-3940256099942544/1033173712',
rewardvideo: 'ca-app-pub-3940256099942544/5224354917',
};
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = { // for iOS
banner: 'ca-app-pub-3940256099942544/2934735716',
interstitial: 'ca-app-pub-3940256099942544/4411468910',
rewardvideo: 'ca-app-pub-3940256099942544/1712485313',
};
} else {
admobid = { // for Windows Phone
banner: 'ca-app-pub-6869992474017983/8878394753',
interstitial: 'ca-app-pub-6869992474017983/1355127956',
rewardvideo: '',
};
}
この部分は自分がadMobで作ったIDを入れます。
ただテスト段階はこのままでOKです。
この状態でプログラムを動かすとテスト用の画像が表示されます。
初期化処理
var adMobInitialize = function() {
//オーバーレイバナー
if(AdMob){
AdMob.createBanner({//
adId: admobid.banner,
overlap: true,
position: AdMob.AD_POSITION.TOP_CENTER,
autoShow: true
});
}
//インタースティシャル(準備のみ)
if(AdMob){AdMob.prepareInterstitial({
adId: admobid.interstitial,
autoShow: false,//trueだと勝手に表示するので必ずfalse
});
}
};
ここで初期化処理してます。
AdMob.createBannerでバナー広告を作ります。
overlap: trueでオーバーラップ、つまり上に重なって表示されます。
falseにすると広告の大きさ分ずれるのでtrueにしとくのが良いと思います。
ずれた場合、enchant.jsのゲームだと画面がずれた分タッチの位置がずれてしまうのでtrue一択です(^^;)
position: AdMob.AD_POSITION.TOP_CENTERで場所を指定してます。
他の位置にしたければmonaca公式ページで定数を探してください(^^;)
autoShow: これはtrueだと広告が自動で出てくれます。
なのでバナーはtrueにしておくといいんですが、問題はインタースティシャル広告の方。
こっちはtrueにしてしまうとプログラムを実行した時点で出てしまいます。
それでも良いと思うかもしれませんが、これで出すとタイムラグが結構あります。
で、あとで紹介するんですが表示専用の関数があるのでここではfalseにして読み込みだけさせときます。
関数名がprepareとなっているので準備の関数ですしね。
document.addEventListener("deviceready", adMobInitialize, false);
これはデバイスの準備が終わったら初期化処理を自動で実行してます。
インタースティシャル広告を表示
function adMobShowInterstitial(){
if(AdMob){
AdMob.showInterstitial();//表示
AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );//次回分の準備
}
}
この関数でインタースティシャルを表示させます。
AdMob.showInterstitial()で表示させて、AdMob.prepareInterstitial()で次回分を読み込んでいます。
これで表示にタイムラグが発生しなくて済みます。
ただこいつをどこで使うかっていうのがけっこうポイントだったりします。
インタースティシャル広告の入れ方（enchant.js向け）
基本的にゲームでミスをした際やステージ切替のタイミングで入れると良いと思います。
で、私の場合のやり方だと
if(++count >= 5){//決めた回数になったら表示させる
count = 0;
new AdMobScene();
}
こんな感じでシーンの切り替えの直後に画面切替回数が一定数を超えていたら出すようにしました(ループがないアプリだとsetTimeoutとか使うと良いかも)。
AdMobSceneはインタースティシャル広告をだすシーンです。
//AdMobインタースティシャル広告画面------------------------------------------------
var AdMobScene = enchant.Class.create(enchant.Scene, {
initialize: function(){
enchant.Scene.call(this);
core.pushScene(this);//プッシュで上に出す
this.backgroundColor = 'rgba(0, 0, 0, 1)';//背景黒
bgm.stop();
var isAdStart = false;//広告スタート合図
var flag = false;//画面タッチ可能のフラグ
this.addEventListener('touchstart', function(){
if(flag){
bgm.play();
removeChildren(this);//このシーンの要素を削除
core.popScene();
}
});
this.addEventListener('enterframe', function(){
if(!isAdStart && this.age > 30){//いきなり出すとびっくりするので少し待っている
isAdStart = true;
adMobShowInterstitial();
}
if(!flag && this.age > 60){//広告表示より少し後でタッチ可能にする(タイムラグがあると困るので)
flag = true;
this.backgroundColor = 'rgba(0, 0, 0, 0)';//背景白
}
});
}
});
pushでゲームの上に出します。
if(!isAdStart && this.age > 30){//いきなり出すとびっくりするので少し待っている
isAdStart = true;
adMobShowInterstitial();
}
この部分は広告を出す前に少し間を取ってます。
いきなり広告が出るとびっくりするので間を取ってるわけです。
別にすぐに出して誤クリック狙ってもいいですけどね。私は親切な人間なんで( *´艸｀)
で、このやり方だと広告消したあと一度タッチしてもらわないとpopしてゲームに戻ることができません。
残念ながら自動でゲームが再開されるやり方が分からなかったんでそこは今後の課題ですね(^^;)
その問題を少しでも見栄え良くするために途中で背景色を黒から透明にしてます。
これで広告を消した後にはゲーム画面が表示されています。
まとめ
とりあえずこんな感じでバナー広告とインタースティシャル広告は出せると思います。
動画広告に関してはまだ何もやってません(^^;)わかったら追記しときます。
一応、自分としてはけっこう詳しく書いたつもりです。