Cordova Usage

Display ads in your Cordova app

Learn how to implement AdMob ads in your Cordova application using AdMob Plus.

Basic Setup

Import and Initialize

First, import AdMob and initialize it when your app starts:

import admob from 'admob-plus-cordova';

// Wait for the Cordova deviceready event
document.addEventListener('deviceready', onDeviceReady, false);

async function onDeviceReady() {
  await admob.start();
  console.log('AdMob initialized');
}

Global Instance

AdMob Plus provides a global admob instance:

// The global admob instance is automatically available
document.addEventListener('deviceready', async () => {
  await admob.start();
}, false);

Displaying Ads

Banner Ad

Display a banner ad at the bottom of the screen:

const banner = new admob.BannerAd({
  adUnitId: 'ca-app-pub-xxx/xxx',
  position: 'bottom',
});

await banner.show();

Use test ad unit IDs during development. See the Test Ads guide.

Interstitial Ad

Show a full-screen interstitial ad:

const interstitial = new admob.InterstitialAd({
  adUnitId: 'ca-app-pub-xxx/xxx',
});

// Load the ad
await interstitial.load();

// Show when ready
if (await interstitial.isLoaded()) {
  await interstitial.show();
}

Rewarded Ad

Implement rewarded video ads:

const rewarded = new admob.RewardedAd({
  adUnitId: 'ca-app-pub-xxx/xxx',
});

// Load the ad
await rewarded.load();

// Listen for reward event
rewarded.on('reward', (reward) => {
  console.log('User earned reward:', reward.amount, reward.type);
  // Grant the reward to the user
});

// Show the ad
if (await rewarded.isLoaded()) {
  await rewarded.show();
}

Event Handling

Listen to ad lifecycle events:

const banner = new admob.BannerAd({
  adUnitId: 'ca-app-pub-xxx/xxx',
});

// Listen for events
banner.on('load', () => {
  console.log('Banner ad loaded');
});

banner.on('loadfail', (error) => {
  console.error('Banner ad failed to load:', error);
});

banner.on('impression', () => {
  console.log('Banner ad impression recorded');
});

await banner.show();

Global Events

Listen to all ad events globally:

document.addEventListener(admob.Events.adLoad, (event) => {
  console.log('Ad loaded:', event.ad);
});

document.addEventListener(admob.Events.adDismiss, (event) => {
  console.log('Ad dismissed:', event.ad);
});

Configuration

Global Configuration

Configure AdMob settings:

await admob.configure({
  maxAdContentRating: 'PG',
  tagForChildDirectedTreatment: false,
  tagForUnderAgeOfConsent: false,
  testDeviceIds: ['YOUR_TEST_DEVICE_ID'],
});

Banner Configuration (iOS)

Configure banner appearance on iOS:

import { BannerAd } from 'admob-plus-cordova';

BannerAd.config({
  backgroundColor: '#ffffff',
  marginTop: 0,
  marginBottom: 0,
});

Complete Example

Here’s a complete example showing multiple ad types:

import admob, { BannerAd, InterstitialAd, RewardedAd } from 'admob-plus-cordova';

class AdManager {
  private banner: BannerAd | null = null;
  private interstitial: InterstitialAd | null = null;
  private rewarded: RewardedAd | null = null;

  async initialize() {
    await admob.start();
    
    await admob.configure({
      testDeviceIds: ['YOUR_TEST_DEVICE_ID'],
    });
  }

  async showBanner() {
    this.banner = new BannerAd({
      adUnitId: 'ca-app-pub-xxx/xxx',
      position: 'bottom',
    });

    await this.banner.show();
  }

  async showInterstitial() {
    this.interstitial = new InterstitialAd({
      adUnitId: 'ca-app-pub-xxx/xxx',
    });

    await this.interstitial.load();
    
    this.interstitial.on('dismiss', () => {
      // Preload next interstitial
      this.interstitial = new InterstitialAd({
        adUnitId: 'ca-app-pub-xxx/xxx',
      });
      this.interstitial.load();
    });

    if (await this.interstitial.isLoaded()) {
      await this.interstitial.show();
    }
  }

  async showRewarded() {
    this.rewarded = new RewardedAd({
      adUnitId: 'ca-app-pub-xxx/xxx',
    });

    await this.rewarded.load();

    this.rewarded.on('reward', (reward) => {
      console.log(`Reward: ${reward.amount} ${reward.type}`);
      // Grant reward to user
    });

    if (await this.rewarded.isLoaded()) {
      await this.rewarded.show();
    }
  }
}

// Usage
document.addEventListener('deviceready', async () => {
  const adManager = new AdManager();
  await adManager.initialize();
  await adManager.showBanner();
}, false);

Best Practices

Always wait for the deviceready event before initializing AdMob

Preload interstitial and rewarded ads before showing them

Use test ad unit IDs during development

Handle ad load failures gracefully

Respect user privacy and comply with GDPR/CCPA regulations

Next Steps

Ad Formats

Explore all available ad formats

Events

Learn about ad lifecycle events

Configuration

Advanced configuration options

Consent

Implement GDPR/CCPA consent