# 広告 アプリ (AdMob)

この記事では、MonacaでAdMobを使用してアプリに広告を表示する方法について説明します。

AdMobは、Googleによる広告サービスであり、Googleアカウントがあれば簡単に導入することができます。この記事を読むことで、AdMobを導入し、アプリに広告を表示することができるようになります。

解説するためのサンプルコードは、次のURLに配置しています。

<https://github.com/monaca-samples/admob-plus>

## AdMobへの申請

まず、[AdMobのサイト](https://admob.google.com/intl/ja/home/)にアクセスし広告を申請します。

この申請時に、アプリのIDが発行されますので、IDをコピーしておきます。 *（ID 例：ca-app-pub-3089782807744052\~xxxxxxxx）*

申請が承認されると、広告IDが発行されます。このIDを表示する際に利用しますので、こちらも控えておきます。

なお、広告が表示されるまでに承認が必要となるため、開発中はGoogleが提供するテスト用広告を利用することをお勧めします。

## プラグインのインストール

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

　**admob-plus-cordova**

　（URL: <https://github.com/admob-plus/admob-plus>）

プラグインをインストール後、プラグインの設定画面で「APP\_ID\_ANDROID」を設定します。 この値は、AdMobで取得したアプリIDを指定します。これはAndroid向けの設定です。

また、iOS向けには、「APP\_ID\_IOS」の値を設定する必要があります。

<figure><img src="/files/3mSqyCPxxSb3WF1NGQov" alt=""><figcaption></figcaption></figure>

## アプリ起動時の広告を表示

次のコードはアプリ起動時に表示される広告を実行しています。

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

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

<img src="/files/keDN9umvgBxQNtUblrf1" alt="" data-size="original">

## バナー広告を表示

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

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

## ![](/files/d6p1RdZaSnOdWSAhOfXp)

## 開発用のテスト広告

AdMobに申請した直後や、開発中はバナーが表示されません。その場合は、AdMobが用意しているテスト用の広告IDが利用できます。

* [デモ広告ユニットID (iOS)](https://developers.google.com/admob/ios/test-ads?hl=ja)
* [デモ広告ユニットID (Android)](https://developers.google.com/admob/android/test-ads?hl=ja)

<table><thead><tr><th width="263">広告フォーマット</th><th>デモ広告ユニットID (iOS)</th><th>デモ広告ユニットID (Android)</th></tr></thead><tbody><tr><td>アプリ起動</td><td>ca-app-pub-3940256099942544/5575463023</td><td>ca-app-pub-3940256099942544/9257395921</td></tr><tr><td>アダプティブ バナー</td><td>ca-app-pub-3940256099942544/2435281174</td><td>ca-app-pub-3940256099942544/9214589741</td></tr><tr><td>固定サイズのバナー</td><td>ca-app-pub-3940256099942544/2934735716</td><td>ca-app-pub-3940256099942544/6300978111</td></tr><tr><td>インタースティシャル</td><td>ca-app-pub-3940256099942544/4411468910</td><td>ca-app-pub-3940256099942544/1033173712</td></tr><tr><td>リワード広告</td><td>ca-app-pub-3940256099942544/1712485313</td><td>ca-app-pub-3940256099942544/5224354917</td></tr><tr><td>リワード インタースティシャル</td><td>ca-app-pub-3940256099942544/6978759866</td><td>ca-app-pub-3940256099942544/5354046379</td></tr><tr><td>ネイティブ</td><td>ca-app-pub-3940256099942544/3986624511</td><td>ca-app-pub-3940256099942544/2247696110</td></tr><tr><td>ネイティブ動画</td><td>ca-app-pub-3940256099942544/2521693316</td><td>ca-app-pub-3940256099942544/1044960115</td></tr></tbody></table>

{% hint style="info" %}
2023年12月15日現在、Android端末ではテストIDを利用しても下記のエラーが発生し、バナーが表示されない事象が確認されています。
{% endhint %}

```javascript
Uncaught (in promise) {
  "Code": 3,
  "Message": "No fill.",
  "Domain": "com.google.android.gms.ads",
  "Cause": "null",
  "Response Info": {
    "Response ID": "null",
    "Mediation Adapter Class Name": "",
    "Adapter Responses": []
  }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/sampleapp/samples/admob.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.