AdMob

This article explains how to display ads in your app using AdMob in Monaca. AdMob is a Google advertising service that can be easily integrated with a Google account. By reading this article, you will be able to integrate AdMob and display ads in your app.

The sample code for explanation is available at the following URL:

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

Applying for AdMob

First, access the AdMob website and apply for advertising.

During this application process, an app ID will be issued, so be sure to copy it. (Example ID: ca-app-pub-3089782807744052~xxxxxxxx)

Once the application is approved, an ad ID will be issued, which will be used when displaying the ads, so make sure to also keep it on record.

Note that approval is required before ads can be displayed, so during development, it is recommended to use the test ads provided by Google.

Installing the Plugin

Please install the following plugin:

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

After installing the plugin, set "APP_ID_ANDROID" in the plugin's configuration screen. This value should specify the App ID obtained from AdMob. This is for Android settings. Additionally, for iOS settings, you need to set the value of "APP_ID_IOS".

Displaying Ads on App Launch

The following code executes an ad that is displayed when the app is launched.

The ad is displayed when show() is executed.

// Display ad shown on app launch
const ad = new admob.AppOpenAd({
  adUnitId: 'ca-app-pub-3940256099942544/5575463023',
})
await ad.load()
await ad.show()

Displaying Banner Ads

To display a banner ad at the bottom of the app, create an object of "admob.BannerAd" as shown in the following code. The ad is displayed using show().

// Display banner ad
const banner = new admob.BannerAd({
　　adUnitId: 'ca-app-pub-3940256099942544/6300978111',
　　position: 'bottom',
})
await banner.show()

Test Ads for Development

After applying to AdMob or during development, banners may not be displayed. In such cases, you can use the test ad ID provided by AdMob.

• Demo ad unit ID (iOS)

• Demo ad unit ID (Android)

Ad format	Demo ad unit ID (iOS)	Demo ad unit ID (Android)
App Open	ca-app-pub-3940256099942544/5575463023	ca-app-pub-3940256099942544/9257395921
Adaptive Banner	ca-app-pub-3940256099942544/2435281174	ca-app-pub-3940256099942544/9214589741
Fixed Size Banner	ca-app-pub-3940256099942544/2934735716	ca-app-pub-3940256099942544/6300978111
Interstitial	ca-app-pub-3940256099942544/4411468910	ca-app-pub-3940256099942544/1033173712
Rewarded Ads	ca-app-pub-3940256099942544/1712485313	ca-app-pub-3940256099942544/5224354917
Rewarded Interstitial	ca-app-pub-3940256099942544/6978759866	ca-app-pub-3940256099942544/5354046379
Native	ca-app-pub-3940256099942544/3986624511	ca-app-pub-3940256099942544/2247696110
Native Video	ca-app-pub-3940256099942544/2521693316	ca-app-pub-3940256099942544/1044960115

As of December 15, 2023, we have confirmed that the following error occurs on Android devices when using the test ID and the banner is not displayed.

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": []
  }
}

Conclusion:

You have now successfully integrated AdMob into your mobile application using Monaca. This will enable you to monetize your app with targeted ads from the AdMob platform. With Monaca's powerful tools and the AdMob service, you can create a profitable mobile application that provides value to both users and advertisers.