Monaca Docs
  • Monaca
  • Create Your First App
  • Release Notes and Updates
    • Privacy Manifest Requirement for iOS Apps
    • Plugin uses-permission Tag Deduplication Feature
    • iOS Monaca Debugger Discontinuation & Alternative Features
    • Error submitting to iOS App Store (ITMS-90165)
    • Build error in cordova-custom-config
    • Cordova 11 changes
    • Cordova 10 changes
    • Cordova 9 changes
    • New Monaca CLI and Localkit
    • Migration from Cordova to Capacitor
  • Product Guides
    • Monaca Development Overview
    • Monaca Cloud IDE
      • Overview
      • Features in the Monaca Cloud IDE
      • Integrated Terminal
      • Editor Shortcuts
      • Project Dependencies
        • File and Folder Structure
        • JS/CSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Version Control
        • Introduction
        • GitHub Integration
        • Git SSH Integration
      • Monaca CI
        • Overview
        • Deploy Services
        • Deploy to Appetize.io
        • Deploy to DeployGate
        • Deploy to Firebase
      • Build
        • Building for iOS
          • Building an iOS App
          • Build Settings between Monaca and Xcode
        • Building for Android
        • Building for Electron
          • Building on Windows
        • Building for PWA
        • Building for Windows
        • Build Environment Settings
        • Common Build and Application Upload Errors
        • Build History
      • Distribution
        • App Store Distribution
          • App Store Connect Guide
          • iOS App Upload Feature
        • Google Play Distribution
        • Amazon Appstore Distribution
        • Non-market App Distribution
      • Download App Package
      • Tutorial
    • Monaca Localkit
      • Overview
      • Pairing and Debugging
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca CLI
      • Overview
      • Monaca CLI Commands
      • Pairing and Debugging
      • Project Dependencies
        • File and Folder Structure
        • JS/JSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca Debugger
      • Functionalities
      • Installation
        • Monaca Debugger for Android
        • Monaca Debugger for iOS
        • Monaca Debugger for Android Emulator
      • Usage
      • Custom Build Debugger for iOS
      • iOS App Simulator Build
      • Troubleshooting Guide
      • Tutorials
    • Team Dashboard
    • Quick Viewer
    • Migrating from Other Platforms
      • Key Points
      • Cloud IDE preview function settings
      • Migrating from Angular
      • Migrating from Ionic
      • Migrating from React
      • Migrating from Vue
      • Migrating from PhoneGap
        • Key Differences
        • Guide for PhoneGap Build Users
        • Guide for PhoneGap CLI Users
        • Guide for PhoneGap Desktop App Users
      • Migrating from Telerik
  • Build App
    • Build for iOS
      • Creating a Private Key and CSR
      • Creating a Certificate
      • Updating Provisioning Profiles
  • Tutorials
    • Monaca Cloud IDE Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Cloud IDE
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca Localkit Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Localkit
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca CLI Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca CLI
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Electron Tutorial
      • How to Use a NPM Package
      • How to Use a Web API
    • Barcode Scanner Plugin
    • Cordova SQLite Storage Plugin
    • Cordova Google Analytics Plugin
    • Cordova Firebase Plugin
    • Cordova In-app Purchase Plugin
    • Cordova AppVersion Plugin
    • Cordova Ionic Keyboard Plugin
    • Cordova Social Sharing Plugin
    • NIFCLOUD mobile backend
    • Phonegap Push Plugin
  • API Reference
    • Monaca API
      • Monaca Cloud & Remote Build API Guide
      • Utilities
    • Core Cordova Plugins
      • Cordova 11.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
      • Cordova 10.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
      • Cordova 9.0
        • Battery Status Plugin
        • Camera Plugin
        • Contacts Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • File Transfer Plugin
        • Geolocation Plugin
        • Globalization Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
    • Third-party Cordova Plugins
      • Advanced HTTP Plugin
      • PhoneGap BarcodeScanner Plugin
      • Cordova Custom Config Plugin
      • DatePicker Plugin
      • Share Plugin (Android)
      • WebIntent Plugin (Android)
    • Monaca Power Plugins
      • Monaca HTML5 Resource Encryption
      • Monaca In-App Updater
      • Monaca Secure Storage
      • Barcode Scanner Plugin
      • Android build memory size setting
    • Service Integration
      • Repro
      • AppsFlyer
    • Configuration Files
      • Android
        • Android Configuration
        • config.xml
        • AndroidManifest.xml
      • iOS
        • iOS Configuration
        • config.xml
        • MonacaApp-Info.plist
  • Samples & Tips
    • Sample Apps
      • AdMob
      • Twitter Single Sign-on App
      • Facebook Single Sign-on App
      • Flickr
      • TODO App
      • BirthYear App
      • Break the Bricks
      • Train Catalog App
      • Omikuji Fortune Telling App
      • Clock App
      • Memo Application
      • RSS Reader App
      • Hello World App
    • Tips & Tricks
      • Playing Sound and Music
      • Control the Splash Screen
      • Using Database
  • Features
    • Push Notification
    • SNS Authentication
    • Database
  • FAQ
    • General
    • IDE
    • Build
    • Release
    • Subscription
      • How to Use Activation Code
    • Application
    • Usage
    • Debugger
  • Supported Environments
  • Trouble Shooting
    • Preview Log repeats to reload (Vue packages version mismatch error)
  • Monaca Product Website
  • 日本語
Powered by GitBook
On this page
  • Applying for AdMob
  • Installing the Plugin
  • Displaying Ads on App Launch
  • Displaying Banner Ads
  • Test Ads for Development
  • Conclusion:

Was this helpful?

  1. Samples & Tips
  2. Sample Apps

AdMob

PreviousSample AppsNextTwitter Single Sign-on App

Last updated 5 months ago

Was this helpful?

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:

Applying for AdMob

First, access 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: )

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 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.

https://github.com/monaca-samples/admob-plus
the AdMob website
https://github.com/admob-plus/admob-plus
Demo ad unit ID (iOS)
Demo ad unit ID (Android)