monacaで作ったアプリにadMobで広告を入れる

前回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です。

プログラムについて

私もいくつもサイト見たんですけど全然わかんないですよね。説明する気あんのかよって思いません?(;^ω^)

おかげでかなり試行錯誤しましたよ(-_-;)

でも、私は優しいので皆さんに情報を共有しちゃいます。だからみんな絶対ブックマークしたりシェアしたりしろよな!(・∀・)

と言うわけで私バージョンのプログラムがこちら

基本的にこれコピペするだけでオーバーレイ広告なら勝手に出てくれます(・∀・)

あ、広告が出るかどうかの確認はビルドしてインストールしないとできないので注意してください。ちょっと面倒ですけどね。。

では、以下細かい説明をしていきます。

admobID

この部分は自分がadMobで作ったIDを入れます。ただテスト段階はこのままでOKです。この状態でプログラムを動かすとテスト用の画像が表示されます。

初期化処理

ここで初期化処理してます。

AdMob.createBannerでバナー広告を作ります。overlap: trueでオーバーラップ、つまり上に重なって表示されます。falseにすると広告の大きさ分ずれるのでtrueにしとくのが良いと思います。ずれた場合、enchant.jsのゲームだと画面がずれた分タッチの位置がずれてしまうのでtrue一択です(^^;)

position: AdMob.AD_POSITION.TOP_CENTERで場所を指定してます。他の位置にしたければmonaca公式ページで定数を探してください(^^;)

autoShow: これはtrueだと広告が自動で出てくれます。なのでバナーはtrueにしておくといいんですが、問題はインタースティシャル広告の方。こっちはtrueにしてしまうとプログラムを実行した時点で出てしまいます。

それでも良いと思うかもしれませんが、これで出すとタイムラグが結構あります。で、あとで紹介するんですが表示専用の関数があるのでここではfalseにして読み込みだけさせときます。関数名がprepareとなっているので準備の関数ですしね。

これはデバイスの準備が終わったら初期化処理を自動で実行してます。

インタースティシャル広告を表示

この関数でインタースティシャルを表示させます。AdMob.showInterstitial()で表示させて、AdMob.prepareInterstitial()で次回分を読み込んでいます。これで表示にタイムラグが発生しなくて済みます。

ただこいつをどこで使うかっていうのがけっこうポイントだったりします。

インタースティシャル広告の入れ方

基本的にゲームでミスをした際やステージ切替のタイミングで入れると良いと思います。で、私の場合のやり方だと

こんな感じでシーンの切り替えの直後に画面切替回数が一定数を超えていたら出すようにしました。AdMobSceneはインタースティシャル広告をだすシーンです。

pushでゲームの上に出します。

この部分は広告を出す前に少し間を取ってます。いきなり広告が出るとびっくりするので間を取ってるわけです。別にすぐに出して誤クリック狙ってもいいですけどね。私は親切な人間なんで( *´艸`)

で、このやり方だと広告消したあと一度タッチしてもらわないとpopしてゲームに戻ることができません。残念ながら自動でゲームが再開されるやり方が分からなかったんでそこは今後の課題ですね(^^;)

その問題を少しでも見栄え良くするために途中で背景色を黒から透明にしてます。これで広告を消した後にはゲーム画面が表示されています。

まとめ

とりあえずこんな感じでバナー広告とインタースティシャル広告は出せると思います。動画広告に関してはまだ何もやってません(^^;)わかったら追記しときます。

一応、自分としてはけっこう詳しく書いたつもりです。

 

で、みんなさん実際どんな感じに表示されるの?って気になるでしょ?(`・ω・´)

というわけでサンプルとしてぜひわたしのゲームをプレイしてみてください(・∀・)

▷▷▷  https://play.google.com/store/apps/details?id=com.inwans.grind

コメントを残す

メールアドレスが公開されることはありません。