Interstitial ads are full-screen ads that cover the interface of their host app. They’re typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game. When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue to its destination or close it and return to the app.
Creating an Interstitial Ad
Create Instance
Create a new InterstitialAd instance with your ad unit ID.const interstitial = new admob.InterstitialAd({
adUnitId: 'ca-app-pub-3940256099942544/1033173712' // Test ad unit
})
Load the Ad
Load the interstitial ad before showing it.await interstitial.load()
Show the Ad
Once loaded, show the ad at an appropriate time.await interstitial.show()
API Reference
Constructor Options
Your AdMob ad unit ID for interstitial ads.
Optional unique identifier for this ad instance. Defaults to adUnitId if not provided.
URL string for content that is being displayed in your app.
Array of keyword strings for ad targeting.new admob.InterstitialAd({
adUnitId: 'ca-app-pub-xxx/yyy',
keywords: ['gaming', 'puzzle']
})
Set to '1' to enable non-personalized ads (for GDPR compliance).new admob.InterstitialAd({
adUnitId: 'ca-app-pub-xxx/yyy',
npa: '1'
})
Methods
load()
Loads an interstitial ad from AdMob.
await interstitial.load()
Promise<void>
Always load interstitial ads before you plan to show them. Loading can take several seconds.
show()
Displays the loaded interstitial ad.
await interstitial.show()
Promise<void>
Once an interstitial ad is shown, it cannot be shown again. You must load a new ad after each display.
isLoaded()
Checks if an ad is loaded and ready to be shown.
const loaded = await interstitial.isLoaded()
if (loaded) {
await interstitial.show()
}
Promise<boolean>
on(eventName, callback)
Registers an event listener for the ad.
const unsubscribe = interstitial.on('load', (evt) => {
console.log('Interstitial loaded:', evt.ad)
})
// Later: remove listener
unsubscribe()
Function - Unsubscribe function
Events
All events can be listened to using the on() method or via global event listeners.
load
Fired when the ad is successfully loaded and ready to show.
interstitial.on('load', (evt) => {
console.log('Interstitial ready:', evt.ad.id)
})
loadfail
Fired when the ad request fails.
interstitial.on('loadfail', (evt) => {
console.error('Load failed:', evt.error)
})
show
Fired when the ad is displayed to the user.
interstitial.on('show', (evt) => {
console.log('Interstitial displayed')
})
showfail
Fired when the ad fails to display.
interstitial.on('showfail', (evt) => {
console.error('Show failed:', evt.error)
})
dismiss
Fired when the user closes the ad and returns to the app.
interstitial.on('dismiss', (evt) => {
console.log('Interstitial dismissed')
// Load next ad
})
impression
Fired when an impression is recorded for the ad.
interstitial.on('impression', (evt) => {
console.log('Impression recorded')
})
click
Fired when the user clicks on the ad.
interstitial.on('click', (evt) => {
console.log('Ad clicked')
})
Usage Examples
Basic Implementation
let interstitial
document.addEventListener('deviceready', async () => {
interstitial = new admob.InterstitialAd({
adUnitId: 'ca-app-pub-xxx/yyy'
})
await interstitial.load()
await interstitial.show()
}, false)
With Event Handling
let interstitial
document.addEventListener('deviceready', async () => {
interstitial = new admob.InterstitialAd({
adUnitId: 'ca-app-pub-xxx/yyy'
})
interstitial.on('load', (evt) => {
console.log('Interstitial loaded, ready to show')
})
interstitial.on('loadfail', (evt) => {
console.error('Failed to load:', evt.error)
})
await interstitial.load()
await interstitial.show()
}, false)
Auto-reload After Dismiss
let interstitial
document.addEventListener('deviceready', async () => {
interstitial = new admob.InterstitialAd({
adUnitId: 'ca-app-pub-xxx/yyy'
})
await interstitial.load()
await interstitial.show()
}, false)
// Listen globally for dismiss events
document.addEventListener('admob.ad.dismiss', async (evt) => {
if (evt.ad instanceof admob.InterstitialAd) {
console.log('Interstitial dismissed, loading next ad')
// Load the next ad immediately
await interstitial.load()
}
})
Check Load Status Before Showing
const interstitial = new admob.InterstitialAd({
adUnitId: 'ca-app-pub-xxx/yyy'
})
// Start loading early
await interstitial.load()
// Later, at a transition point
async function showAdIfReady() {
const isLoaded = await interstitial.isLoaded()
if (isLoaded) {
await interstitial.show()
} else {
console.log('Ad not ready yet')
// Load and show
await interstitial.load()
await interstitial.show()
}
}
Level Complete Example
let interstitial
let levelCount = 0
document.addEventListener('deviceready', async () => {
interstitial = new admob.InterstitialAd({
adUnitId: 'ca-app-pub-xxx/yyy'
})
// Preload first ad
await interstitial.load()
// Reload after dismiss
interstitial.on('dismiss', async () => {
await interstitial.load()
})
}, false)
function onLevelComplete() {
levelCount++
// Show ad every 3 levels
if (levelCount % 3 === 0) {
showInterstitial()
}
}
async function showInterstitial() {
const isLoaded = await interstitial.isLoaded()
if (isLoaded) {
await interstitial.show()
}
}
Error Handling
const interstitial = new admob.InterstitialAd({
adUnitId: 'ca-app-pub-xxx/yyy'
})
try {
await interstitial.load()
await interstitial.show()
} catch (error) {
console.error('Ad error:', error)
// Continue with app flow
}
// Or with events
interstitial.on('loadfail', (evt) => {
console.error('Load failed:', evt.error)
// Implement retry logic or continue without ad
})
interstitial.on('showfail', (evt) => {
console.error('Show failed:', evt.error)
// Continue with app flow
})
Best Practices
Timing is EverythingDisplay interstitial ads at natural transition points such as:
- Between game levels
- After completing a task
- During navigation between app sections
Avoid showing ads during active gameplay or user interaction. One-Time UseInterstitial ads can only be shown once. After an ad is displayed or dismissed, you must load a new ad before showing another one.
Preloading Strategy
- Load ads early, before you need them
- Load the next ad immediately after the current one is dismissed
- Check
isLoaded() before attempting to show
- Have a fallback if ads fail to load
Frequency Capping
- Don’t show interstitials too frequently (e.g., not on every level)
- Consider user experience over ad revenue
- Follow AdMob policies on ad placement
References