Quick Start

Overview

This guide walks you through displaying your first ad using AdMob Plus. We’ll use a banner ad as an example, but the concepts apply to all ad types.

Make sure you’ve completed the installation steps before continuing.

Choose Your Framework

Select your framework to see framework-specific examples:

Cordova
Capacitor
React Native
Ionic

Initialize the SDK

First, initialize the AdMob SDK when your app starts. This should be done once in your app’s lifecycle.

index.js

document.addEventListener('deviceready', onDeviceReady, false)

async function onDeviceReady() {
  try {
    // Start the AdMob SDK
    const result = await admob.start()
    console.log('AdMob SDK initialized:', result.version)

    // Optional: Configure test devices
    await admob.configure({
      testDeviceIds: ['YOUR_TEST_DEVICE_ID']
    })
  } catch (error) {
    console.error('Failed to initialize AdMob:', error)
  }
}

Use test ad units during development. See test ads documentation for test device IDs.

Create and show a banner ad at the bottom of the screen:

async function showBannerAd() {
  const banner = new admob.BannerAd({
    adUnitId: 'ca-app-pub-3940256099942544/6300978111', // Test ad unit
    position: 'bottom'
  })

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

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

  // Load and show the banner
  await banner.show()
}

Display an Interstitial Ad

Load and show a full-screen interstitial ad:

async function showInterstitialAd() {
  const interstitial = new admob.InterstitialAd({
    adUnitId: 'ca-app-pub-3940256099942544/1033173712' // Test ad unit
  })

  // Listen for ad events
  interstitial.on('load', () => {
    console.log('Interstitial ad loaded')
  })

  interstitial.on('dismiss', () => {
    console.log('Interstitial ad dismissed')
  })

  try {
    // Load the ad first
    await interstitial.load()
    // Then show it
    await interstitial.show()
  } catch (error) {
    console.error('Failed to show interstitial:', error)
  }
}

Display a Rewarded Ad

Show a rewarded ad and handle the reward:

async function showRewardedAd() {
  const rewarded = new admob.RewardedAd({
    adUnitId: 'ca-app-pub-3940256099942544/5224354917' // Test ad unit
  })

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

  rewarded.on('dismiss', () => {
    console.log('Rewarded ad dismissed')
  })

  try {
    await rewarded.load()
    await rewarded.show()
  } catch (error) {
    console.error('Failed to show rewarded ad:', error)
  }
}

function grantReward(amount, type) {
  console.log(`Granting ${amount} ${type} to user`)
  // Your reward logic here
}

TypeScript Example

For TypeScript projects, leverage the full type safety:

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

declare const admob: import('admob-plus-cordova').AdMob

async function showTypedBannerAd(): Promise<void> {
  const banner: BannerAd = new admob.BannerAd({
    adUnitId: 'ca-app-pub-3940256099942544/6300978111',
    position: 'bottom',
  })

  banner.on('load', (event) => {
    console.log('Loaded:', event.ad.id)
  })

  await banner.show()
}

Initialize the SDK

Import and initialize AdMob Plus when your app starts:

App.tsx

import { AdMobPlus } from '@admob-plus/capacitor'
import { useEffect } from 'react'

function App() {
  useEffect(() => {
    // Initialize AdMob SDK
    AdMobPlus.start()
      .then(() => console.log('AdMob initialized'))
      .catch(err => console.error('AdMob init failed:', err))
  }, [])

  return (
    // Your app content
  )
}

Create and show a banner ad:

import { BannerAd } from '@admob-plus/capacitor'

async function showBannerAd() {
  const banner = new BannerAd({
    adUnitId: 'ca-app-pub-3940256099942544/6300978111', // Test ad unit
    position: 'bottom'
  })

  try {
    await banner.show()
    console.log('Banner ad displayed')
  } catch (error) {
    console.error('Failed to show banner:', error)
  }
}

Display an Interstitial Ad

Load and show a full-screen interstitial:

import { InterstitialAd } from '@admob-plus/capacitor'

async function showInterstitialAd() {
  const interstitial = new InterstitialAd({
    adUnitId: 'ca-app-pub-3940256099942544/1033173712'
  })

  try {
    // Check if already loaded
    const isLoaded = await interstitial.isLoaded()
    if (!isLoaded) {
      await interstitial.load()
    }
    await interstitial.show()
  } catch (error) {
    console.error('Failed to show interstitial:', error)
  }
}

Display a Rewarded Ad

Show a rewarded ad with event listeners:

import { RewardedAd, AdMobPlus } from '@admob-plus/capacitor'

async function showRewardedAd() {
  const rewarded = new RewardedAd({
    adUnitId: 'ca-app-pub-3940256099942544/5224354917'
  })

  // Listen for reward event
  const listener = await AdMobPlus.addListener('ad.reward', (event) => {
    if (event.adId === rewarded.id) {
      console.log('User earned reward:', event.reward)
      // Grant reward to user
      grantReward(event.reward)
    }
  })

  try {
    await rewarded.load()
    await rewarded.show()
  } catch (error) {
    console.error('Failed to show rewarded ad:', error)
  } finally {
    // Clean up listener
    listener.remove()
  }
}

function grantReward(reward: { amount: number; type: string }) {
  console.log(`Granting ${reward.amount} ${reward.type}`)
  // Your reward logic
}

React Component Example

A complete React component with banner ad:

BannerAdComponent.tsx

import { BannerAd } from '@admob-plus/capacitor'
import { useEffect, useState } from 'react'

export function BannerAdComponent() {
  const [banner, setBanner] = useState<BannerAd | null>(null)

  useEffect(() => {
    const ad = new BannerAd({
      adUnitId: 'ca-app-pub-3940256099942544/6300978111',
      position: 'bottom'
    })

    ad.show()
      .then(() => console.log('Banner shown'))
      .catch(err => console.error('Banner error:', err))

    setBanner(ad)

    // Cleanup: hide banner when component unmounts
    return () => {
      ad.hide().catch(console.error)
    }
  }, [])

  return (
    <div>
      {/* Your component content */}
      {/* Banner will be shown at the bottom */}
    </div>
  )
}

Initialize the SDK

Initialize AdMob when your app component mounts:

App.tsx

import React, { useEffect } from 'react'
import AdMob from '@admob-plus/react-native'

export default function App() {
  useEffect(() => {
    // Initialize AdMob SDK
    AdMob.start()
      .then(() => console.log('AdMob initialized'))
      .catch(err => console.error('AdMob failed to initialize:', err))
  }, [])

  return (
    // Your app content
  )
}

Display an Interstitial Ad

Create and show a full-screen interstitial:

import { InterstitialAd } from '@admob-plus/react-native'
import { Button } from 'react-native'

function InterstitialButton() {
  const showInterstitial = async () => {
    try {
      const ad = new InterstitialAd({
        adUnitId: 'ca-app-pub-3940256099942544/4411468910'
      })

      // Listen for events
      ad.on('load', (event) => {
        console.log('Interstitial loaded:', event)
      })

      ad.on('dismiss', () => {
        console.log('Interstitial dismissed')
      })

      // Load and show
      await ad.load()
      await ad.show()
    } catch (err) {
      console.error('Interstitial error:', err)
    }
  }

  return <Button title="Show Interstitial" onPress={showInterstitial} />
}

Display a Rewarded Ad

Show a rewarded ad and handle the reward:

import { RewardedAd, eventEmitter } from '@admob-plus/react-native'
import { Button, Alert } from 'react-native'

function RewardedButton() {
  const showRewarded = async () => {
    try {
      const ad = new RewardedAd({
        adUnitId: 'ca-app-pub-3940256099942544/5224354917'
      })

      // Listen for reward event
      const subscription = eventEmitter.addListener('ad.reward', (event) => {
        if (event.adId === ad.id) {
          console.log('User earned reward:', event.reward)
          Alert.alert(
            'Reward Earned!',
            `You earned ${event.reward.amount} ${event.reward.type}`
          )
          // Grant reward to user
        }
      })

      ad.on('dismiss', () => {
        console.log('Rewarded ad dismissed')
        subscription.remove()
      })

      await ad.load()
      await ad.show()
    } catch (err) {
      console.error('Rewarded ad error:', err)
    }
  }

  return <Button title="Watch Ad for Reward" onPress={showRewarded} />
}

Display a Rewarded Interstitial Ad

Show a rewarded interstitial ad:

import { RewardedInterstitialAd } from '@admob-plus/react-native'
import { Button } from 'react-native'

function RewardedInterstitialButton() {
  const showRewardedInterstitial = async () => {
    try {
      const ad = new RewardedInterstitialAd({
        adUnitId: 'ca-app-pub-3940256099942544/6978759866'
      })

      ad.on('reward', (event) => {
        console.log('Reward earned:', event.reward)
        // Grant reward
      })

      await ad.load()
      await ad.show()
    } catch (err) {
      console.error('Rewarded interstitial error:', err)
    }
  }

  return (
    <Button 
      title="Show Rewarded Interstitial" 
      onPress={showRewardedInterstitial} 
    />
  )
}

Complete Example

Here’s a complete working example:

App.tsx

import React, { useEffect } from 'react'
import AdMob, { InterstitialAd, RewardedAd } from '@admob-plus/react-native'
import { 
  SafeAreaView, 
  Button, 
  StyleSheet, 
  View,
  Alert 
} from 'react-native'

export default function App() {
  useEffect(() => {
    AdMob.start().catch(console.error)
  }, [])

  const showInterstitial = async () => {
    try {
      const ad = new InterstitialAd({
        adUnitId: 'ca-app-pub-3940256099942544/4411468910'
      })
      await ad.load()
      await ad.show()
    } catch (err) {
      Alert.alert('Error', JSON.stringify(err))
    }
  }

  const showRewarded = async () => {
    try {
      const ad = new RewardedAd({
        adUnitId: 'ca-app-pub-3940256099942544/5224354917'
      })
      ad.on('reward', (event) => {
        Alert.alert('Reward!', `Earned ${event.reward.amount}`)
      })
      await ad.load()
      await ad.show()
    } catch (err) {
      Alert.alert('Error', JSON.stringify(err))
    }
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button title="Show Interstitial" onPress={showInterstitial} />
        <Button title="Show Rewarded" onPress={showRewarded} />
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  buttonContainer: {
    gap: 16,
    padding: 16,
  },
})

Initialize the SDK (Cordova)

For Ionic apps using Cordova:

app.component.ts

import { Component } from '@angular/core'
import { Platform } from '@ionic/angular'
import { BannerAd, InterstitialAd, RewardedAd } from 'admob-plus-cordova'

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor(private platform: Platform) {
    this.initializeApp()
  }

  async initializeApp() {
    await this.platform.ready()
    
    try {
      await admob.start()
      console.log('AdMob initialized')
    } catch (error) {
      console.error('AdMob initialization failed:', error)
    }
  }
}

Show a banner in your Ionic page:

home.page.ts

import { Component } from '@angular/core'
import { BannerAd } from 'admob-plus-cordova'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
})
export class HomePage {
  async showBannerAd() {
    const banner = new BannerAd({
      adUnitId: 'ca-app-pub-3940256099942544/6300978111',
      position: 'bottom'
    })

    try {
      await banner.show()
      console.log('Banner displayed')
    } catch (error) {
      console.error('Banner error:', error)
    }
  }
}

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>AdMob Plus Demo</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button expand="block" (click)="showBannerAd()">
    Show Banner Ad
  </ion-button>
</ion-content>

Display an Interstitial Ad

import { InterstitialAd } from 'admob-plus-cordova'

async showInterstitialAd() {
  const interstitial = new InterstitialAd({
    adUnitId: 'ca-app-pub-3940256099942544/1033173712'
  })

  interstitial.on('dismiss', () => {
    console.log('Interstitial dismissed')
  })

  try {
    await interstitial.load()
    await interstitial.show()
  } catch (error) {
    console.error('Interstitial error:', error)
  }
}

Display a Rewarded Ad

import { RewardedAd } from 'admob-plus-cordova'

async showRewardedAd() {
  const rewarded = new RewardedAd({
    adUnitId: 'ca-app-pub-3940256099942544/5224354917'
  })

  rewarded.on('reward', (event) => {
    console.log('Reward earned:', event.reward)
    this.grantReward(event.reward.amount, event.reward.type)
  })

  try {
    await rewarded.load()
    await rewarded.show()
  } catch (error) {
    console.error('Rewarded ad error:', error)
  }
}

grantReward(amount: number, type: string) {
  console.log(`Granting ${amount} ${type} to user`)
  // Your reward logic
}

Initialize with Capacitor

For Ionic apps using Capacitor:

app.component.ts

import { Component } from '@angular/core'
import { Platform } from '@ionic/angular'
import { AdMobPlus } from '@admob-plus/capacitor'

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor(private platform: Platform) {
    this.initializeApp()
  }

  async initializeApp() {
    await this.platform.ready()
    
    try {
      await AdMobPlus.start()
      console.log('AdMob initialized')
    } catch (error) {
      console.error('AdMob initialization failed:', error)
    }
  }
}

Then use @admob-plus/capacitor APIs as shown in the Capacitor tab.

Test Ad Units

During development, always use Google’s test ad units to avoid policy violations:

Banner: ca-app-pub-3940256099942544/6300978111
Interstitial: ca-app-pub-3940256099942544/1033173712
Rewarded: ca-app-pub-3940256099942544/5224354917
Rewarded Interstitial: ca-app-pub-3940256099942544/6978759866
App Open: ca-app-pub-3940256099942544/5662855259

Never click on your own live ads. This violates AdMob policies and can result in account suspension. Always use test ads during development.

Common Patterns

Pre-loading Ads

For better user experience, pre-load ads before showing them:

const interstitial = new InterstitialAd({
  adUnitId: 'your-ad-unit-id'
})

// Pre-load when app starts or at a natural break
await interstitial.load()

// Show immediately when needed (e.g., level complete)
await interstitial.show()

Error Handling

Always handle errors gracefully:

try {
  await ad.load()
  await ad.show()
} catch (error) {
  // Ad failed to load or show
  console.error('Ad error:', error)
  // Continue with app flow
  proceedWithoutAd()
}

Event Listeners

Listen to ad lifecycle events:

ad.on('load', () => console.log('Ad loaded'))
ad.on('loadfail', (err) => console.error('Ad load failed:', err))
ad.on('show', () => console.log('Ad shown'))
ad.on('showfail', (err) => console.error('Ad show failed:', err))
ad.on('dismiss', () => console.log('Ad dismissed'))
ad.on('impression', () => console.log('Ad impression recorded'))

Best Practices

Initialize Early

Call start() as early as possible in your app lifecycle to reduce ad loading times.

Pre-load Ads

Load ads before you need to show them. This ensures ads are ready when users reach natural transition points.

Use Test Ads

Always use test ad units during development. Switch to your real ad units only for production builds.

Handle Failures

Ad loading can fail due to network issues or inventory. Always handle errors and continue your app flow.

Respect User Experience

Don’t show ads too frequently. Follow AdMob policies and show ads at natural breaks.

Next Steps

Now that you’ve shown your first ad, explore more features:

Banner Ads

Learn about banner ad positioning and sizing

Interstitial Ads

Implement full-screen interstitial ads

Rewarded Ads

Add rewarded video ads with incentives

API Reference

Explore the complete API documentation

Getting Started

Frameworks

Ad Formats

Guides

CLI

Overview

Choose Your Framework

Initialize the SDK

Display a Banner Ad

Display an Interstitial Ad

Display a Rewarded Ad

TypeScript Example

Initialize the SDK

Display a Banner Ad

Display an Interstitial Ad

Display a Rewarded Ad

React Component Example

Initialize the SDK

Display an Interstitial Ad

Display a Rewarded Ad

Display a Rewarded Interstitial Ad

Complete Example

Initialize the SDK (Cordova)

Display a Banner Ad

Display an Interstitial Ad

Display a Rewarded Ad

Initialize with Capacitor

Test Ad Units

Common Patterns

Pre-loading Ads

Error Handling

Event Listeners

Best Practices

Next Steps

Banner Ads

Interstitial Ads

Rewarded Ads

API Reference

Build docs developers (and LLMs) love

Getting Started

Frameworks

Ad Formats

Guides

CLI

​Overview

​Choose Your Framework

​Initialize the SDK

​Display a Banner Ad

​Display an Interstitial Ad

​Display a Rewarded Ad

​TypeScript Example

​Initialize the SDK

​Display a Banner Ad

​Display an Interstitial Ad

​Display a Rewarded Ad

​React Component Example

​Initialize the SDK

​Display an Interstitial Ad

​Display a Rewarded Ad

​Display a Rewarded Interstitial Ad

​Complete Example

​Initialize the SDK (Cordova)

​Display a Banner Ad

​Display an Interstitial Ad

​Display a Rewarded Ad

​Initialize with Capacitor

​Test Ad Units

​Common Patterns

​Pre-loading Ads

​Error Handling

​Event Listeners

​Best Practices

​Next Steps

Banner Ads

Interstitial Ads

Rewarded Ads

API Reference

Build docs developers (and LLMs) love

Overview

Choose Your Framework

Initialize the SDK

Display a Banner Ad

Display an Interstitial Ad

Display a Rewarded Ad

TypeScript Example

Initialize the SDK

Display a Banner Ad

Display an Interstitial Ad

Display a Rewarded Ad

React Component Example

Initialize the SDK

Display an Interstitial Ad

Display a Rewarded Ad

Display a Rewarded Interstitial Ad

Complete Example

Initialize the SDK (Cordova)

Display a Banner Ad

Display an Interstitial Ad

Display a Rewarded Ad

Initialize with Capacitor

Test Ad Units

Common Patterns

Pre-loading Ads

Error Handling

Event Listeners

Best Practices

Next Steps