無料のアプリにおいて、収益を上げる手段として広告の機能は、手軽に導入できるものです。

Monacaアプリにおいても広告を表示するものがたくさんあります。

広告SDKはいくつもありますが、特に人気なのがAdMobではないでしょうか。

今回はAdMob SDKをMonacaアプリに組み込む手順について解説します。

解説するためのサンプルコードは、次のURLに配置しています。
https://github.com/monaca-samples/admob-plus

AdMobに申請する

まず、AdMobのサイトにいき、広告を申請します。

この時、アプリのIDが発行されますので、IDをコピーしておきます。
ca-app-pub-3089782807744052~xxxxxxxx といった形式になります。)

申請が終わると広告IDが入手できます。

これを表示する際に利用しますので、こちらも控えておきます。

なお、申請が通るまで広告が表示されないため、開発時には後述するGoogleが公開しているテスト用広告を利用しましょう。

この記事では、テスト用広告を利用して解説していきます。

SDKはCordovaプラグインでインストール

AdMobは、スマートフォンアプリ用の広告サービスになります。

Web向けにはライブラリがありませんのでネイティブのもの(Cordovaプラグイン)を利用します。

Monaca IDEで次のプラグインをインストールしてください。

admob-plus-cordova
(URL: https://github.com/admob-plus/admob-plus)

プラグインのインストール後、プラグインの設定にて 「APP_ID_ANDROID」 を指定します。

値はAdMobで取得したアプリIDになります。 これはAndroid向けに必要な設定です。

iOS向けには、「APP_ID_IOS」 の値を設定します。

広告をアプリから表示させる

各広告ごとにIDの発行が必要になりますが、プラグインの使い方は簡単です。

次のコードでは、アプリ起動時に表示される広告を立ち上げています。

show() を実行したタイミングで広告が表示されます。

// アプリ起動時に表示される広告を表示
const ad = new admob.AppOpenAd({
adUnitId: 'ca-app-pub-3940256099942544/3419835294',
})
await ad.load()
await ad.show()

アプリの下にバナー広告を表示するには、
次のコードのように「admob.BannerAd」のオブジェクトを生成します。

こちらも同じようにshow() で広告を表示させます。

// バナー広告を表示
const banner = new admob.BannerAd({
  adUnitId: 'ca-app-pub-3940256099942544/6300978111',
  position: 'bottom',
})
await banner.show()

開発時にはテスト広告を利用

AdMobに申請した直後や、開発中はバナーが表示されません。

そこでAdMobが用意しているテスト用の広告IDが利用できます。

広告フォーマット デモ広告ユニットID
アプリ起動 ca-app-pub-3940256099942544/5662855259
バナー ca-app-pub-3940256099942544/2934735716
インタースティシャル ca-app-pub-3940256099942544/4411468910
インタースティシャル動画 ca-app-pub-3940256099942544/5135589807
リワード ca-app-pub-3940256099942544/1712485313

まとめ

AdMobを利用するのはとても手軽です。広告もバナーや動画などさまざまに用意されていますので、アプリの特性や画面によって使い分けてみてください。

Google AdMob - モバイルアプリの収益化