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.

Ad formatDemo ad unit ID

ca-app-pub-3940256099942544/5575463023

ca-app-pub-3940256099942544/2934735716

ca-app-pub-3940256099942544/4411468910

ca-app-pub-3940256099942544/5135589807

ca-app-pub-3940256099942544/1712485313

ca-app-pub-3940256099942544/6978759866

ca-app-pub-3940256099942544/3986624511

ca-app-pub-3940256099942544/2521693316

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.

Last updated