手軽にアプリの収益化。AdMobをアプリに組み込もう

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

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が公開しているテスト用広告を利用しましょう。

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

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

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

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

プラグインのインストール後、プラグインの設定にて「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が利用できます。