Native Ad - AdMob Plus

This feature is implemented differently from the original AdMob Native Ad design, as there is no official way to use it with webview. Be aware of potential policy violations when using this feature.Review the Native ads policies and guidelines before implementation.

Native ads are ad assets that are presented to users via UI components that are native to the platform. They’re shown using the same types of views with which you’re already building your layouts, and can be formatted to match your app’s visual design.

Installation

In addition to installing admob-plus-cordova, you need to install admob-plus-cordova-native for displaying native ads.

cordova plugin add admob-plus-cordova-native --save

Or use a local version with customized views:

cordova plugin add /path/to/admob-plus-cordova-native --link --save

Creating a Native Ad

Create Instance

Create a new NativeAd instance with your ad unit ID.

const nativeAd = new admob.NativeAd({
  adUnitId: 'ca-app-pub-3940256099942544/2247696110' // Test ad unit
})

Load the Ad

Load the native ad.

await nativeAd.load()

Show the Ad

Show the ad at specific coordinates or attach to an HTML element.

// Option 1: Show with coordinates
await nativeAd.show({
  x: 0,
  y: 50,
  width: window.screen.width,
  height: 300
})

// Option 2: Attach to HTML element
await nativeAd.showWith(document.getElementById('ad-container'))

API Reference

Constructor Options

adUnitId

string

required

Your AdMob ad unit ID for native ads.

string

Optional unique identifier for this ad instance. Defaults to adUnitId if not provided.

view

string

Optional view identifier if you have multiple custom native ad views registered. Defaults to "default".

new admob.NativeAd({
  adUnitId: 'ca-app-pub-xxx/yyy',
  view: 'myview'
})

contentUrl

string

URL string for content that is being displayed in your app.

keywords

string[]

Array of keyword strings for ad targeting.

npa

'1'

Set to '1' to enable non-personalized ads (for GDPR compliance).

Methods

`load()`

Loads a native ad from AdMob.

await nativeAd.load()

Returns: Promise<void>

`show(options)`

Displays the native ad at the specified position and size.

await nativeAd.show({
  x: 0,
  y: 50,
  width: window.screen.width,
  height: 300
})

Parameters:

number

default:0

X coordinate in pixels from the left edge.

number

default:0

Y coordinate in pixels from the top edge.

width

number

default:0

Width of the ad view in pixels.

height

number

default:0

Height of the ad view in pixels.

Returns: Promise<void>

You can call show() multiple times to reposition or resize the ad.

`showWith(element)`

Attaches the native ad to an HTML element, automatically updating size and position as the element changes.

const container = document.getElementById('native-ad-container')
await nativeAd.showWith(container)

Parameters:

element (HTMLElement): The DOM element to attach the ad to

Returns: Promise<void>

The ad view is a native overlay on top of the webview. Scrolling may show some delay due to synchronization between the native layer and webview.

`hide()`

Hides the native ad from view.

await nativeAd.hide()

Returns: Promise<void>

`isLoaded()`

Checks if an ad is loaded and ready to be shown.

const loaded = await nativeAd.isLoaded()
if (loaded) {
  await nativeAd.show({ x: 0, y: 0, width: 320, height: 200 })
}

Returns: Promise<boolean>

`on(eventName, callback)`

Registers an event listener for the ad.

const unsubscribe = nativeAd.on('load', (evt) => {
  console.log('Native ad loaded:', evt.ad)
})

// Later: remove listener
unsubscribe()

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

nativeAd.on('load', (evt) => {
  console.log('Native ad ready:', evt.ad.id)
})

// Or global listener
document.addEventListener('admob.ad.load', async (evt) => {
  if (evt.ad instanceof admob.NativeAd) {
    console.log('Native ad loaded')
  }
})

`loadfail`

Fired when the ad request fails.

nativeAd.on('loadfail', (evt) => {
  console.error('Load failed:', evt.error)
})

`show`

Fired when the ad is displayed.

nativeAd.on('show', (evt) => {
  console.log('Native ad displayed')
})

`showfail`

Fired when the ad fails to display.

nativeAd.on('showfail', (evt) => {
  console.error('Show failed:', evt.error)
})

`dismiss`

Fired when the user dismisses the ad (if applicable).

nativeAd.on('dismiss', (evt) => {
  console.log('Native ad dismissed')
})

`impression`

Fired when an impression is recorded.

nativeAd.on('impression', (evt) => {
  console.log('Impression recorded')
})

`click`

Fired when the user clicks on the ad.

nativeAd.on('click', (evt) => {
  console.log('Ad clicked')
})

Usage Examples

Basic Implementation

let nativeAd

document.addEventListener('deviceready', async () => {
  nativeAd = new admob.NativeAd({
    adUnitId: 'ca-app-pub-xxx/yyy'
  })
  
  nativeAd.on('load', async (evt) => {
    console.log('Ad loaded, showing...')
  })
  
  await nativeAd.load()
  await nativeAd.show({
    x: 0,
    y: 50,
    width: window.screen.width,
    height: 300
  })
}, false)

Attach to HTML Element

let nativeAd

document.addEventListener('deviceready', async () => {
  nativeAd = new admob.NativeAd({
    adUnitId: 'ca-app-pub-xxx/yyy'
  })
  
  await nativeAd.load()
  
  // Attach to element - ad will follow element position and size
  const container = document.getElementById('native-ad')
  await nativeAd.showWith(container)
}, false)

HTML:

<div id="native-ad" style="width: 100%; height: 300px;"></div>

Dynamic Repositioning

const nativeAd = new admob.NativeAd({
  adUnitId: 'ca-app-pub-xxx/yyy'
})

await nativeAd.load()

// Show at initial position
await nativeAd.show({
  x: 0,
  y: 50,
  width: window.screen.width,
  height: 300
})

// Change position after 5 seconds
setTimeout(() => {
  nativeAd.show({
    x: 0,
    y: 150,
    width: window.screen.width,
    height: 350
  })
}, 5000)

// Hide after 10 seconds
setTimeout(() => {
  nativeAd.hide()
}, 10000)

Multiple Native Ads

const topAd = new admob.NativeAd({
  adUnitId: 'ca-app-pub-xxx/yyy',
  id: 'top-native-ad'
})

const bottomAd = new admob.NativeAd({
  adUnitId: 'ca-app-pub-xxx/zzz',
  id: 'bottom-native-ad'
})

// Load both ads
await Promise.all([
  topAd.load(),
  bottomAd.load()
])

// Show at different positions
await topAd.show({ x: 0, y: 0, width: 360, height: 200 })
await bottomAd.show({ x: 0, y: 500, width: 360, height: 200 })

Feed Integration

let feedNativeAds = []

async function loadFeedWithAds() {
  const feedItems = await loadFeedItems()
  
  // Insert ads every 5 items
  for (let i = 0; i < feedItems.length; i += 5) {
    const adId = `feed-ad-${i}`
    
    const nativeAd = new admob.NativeAd({
      adUnitId: 'ca-app-pub-xxx/yyy',
      id: adId
    })
    
    await nativeAd.load()
    feedNativeAds.push(nativeAd)
    
    // Insert ad container in feed
    insertAdContainerInFeed(i, adId)
    
    // Attach ad to container
    const container = document.getElementById(`ad-container-${adId}`)
    await nativeAd.showWith(container)
  }
}

Customize Views

You can customize the look and feel of native ads by creating your own view implementations.

Setup

Fork the Plugin

Clone and link the native ad plugin:

git clone https://github.com/admob-plus/admob-plus.git
cordova plugin rm admob-plus-cordova-native
cordova plugin add ./admob-plus/packages/cordova-native --link --save
cd admob-plus/packages/cordova-native

Modify Native Views

Edit the platform-specific view files (see below).

Build and Test

Build your app and test the customized native ad views.

Default View Registration

Android
iOS

src/android/Plugin.java

package admob.plus.cordova.nativead;

public class Plugin extends CordovaPlugin {
    protected void pluginInitialize() {
        AdMob.registerNativeAdViewProviders(new HashMap<String, Native.ViewProvider>() {{
            put(AdMob.NATIVE_VIEW_DEFAULT, new AdViewProvider(cordova));
        }});
    }
}

Customize: Modify src/android/AdViewProvider.java for view logic and edit src/android/res/layout/ad_unified.xml for layout.

src/ios/AdMobNativePlugin.swift

class AdMobNativePlugin: CDVPlugin {
    override func pluginInitialize() {
        AMBPlugin.registerNativeAdViewProviders(["default": AMNAdViewProvider()])
    }
}

Customize: Modify src/ios/AMNAdViewProvider.swift for view logic and edit src/ios/AMNAdView.xib for interface.

Multiple Custom Views

You can register multiple view types for different use cases.

Android
iOS

src/android/Plugin.java

package admob.plus.cordova.nativead;

public class Plugin extends CordovaPlugin {
    protected void pluginInitialize() {
        AdMob.registerNativeAdViewProviders(new HashMap<String, Native.ViewProvider>() {{
            put(AdMob.NATIVE_VIEW_DEFAULT, new AdViewProvider(cordova));
            // Register custom views
            put("compact", new CompactAdViewProvider(cordova));
            put("featured", new FeaturedAdViewProvider(cordova));
        }});
    }
}

src/ios/AdMobNativePlugin.swift

class AdMobNativePlugin: CDVPlugin {
    override func pluginInitialize() {
        AMBPlugin.registerNativeAdViewProviders([
          "default": AMNAdViewProvider(),
          // Register custom views
          "compact": CompactAdViewProvider(),
          "featured": FeaturedAdViewProvider()
        ])
    }
}

Use custom view:

const nativeAd = new admob.NativeAd({
  adUnitId: 'ca-app-pub-xxx/yyy',
  view: 'compact' // or 'featured'
})

Update plugin.xml:

plugin.xml

<plugin id="admob-plus-cordova-native">
  <platform name="android">
    <source-file src="src/android/CompactAdViewProvider.java" target-dir="src/admob/plus/cordova/nativead" />
    <source-file src="src/android/FeaturedAdViewProvider.java" target-dir="src/admob/plus/cordova/nativead" />
  </platform>

  <platform name="ios">
    <source-file src="src/ios/CompactAdViewProvider.swift" />
    <source-file src="src/ios/FeaturedAdViewProvider.swift" />
  </platform>
</plugin>

Best Practices

Design Guidelines

AdMob Requirements:Follow Google’s Native ads policies and guidelines:

Clearly label ads as “Ad” or “Sponsored”
Don’t mimic your app’s UI too closely
Make ads easily distinguishable from content
Include all required ad components

Performance Considerations

Scrolling: Native ad views are overlays, so there may be slight delays during scrolling
Memory: Limit the number of simultaneously displayed native ads
Loading: Preload ads before displaying them
Cleanup: Hide or remove ads when no longer needed

Layout Tips

// Use relative positioning
const screenWidth = window.screen.width
const adHeight = 250

await nativeAd.show({
  x: 0,
  y: 100,
  width: screenWidth,
  height: adHeight
})

// Or attach to responsive HTML elements
const container = document.getElementById('ad-container')
await nativeAd.showWith(container)

Use Cases

Feed Ads: Insert ads between content items in lists/feeds
Content Ads: Display ads alongside articles or videos
Grid Ads: Show ads in grid layouts (e.g., app stores)
Card Ads: Display ads as cards in your UI

Limitations

Known Limitations:

Native ad view is an overlay on the webview, not integrated into the DOM
Scrolling performance may not be perfectly smooth
Element position updates have slight delays
This implementation differs from standard AdMob native ads
Risk of policy violations - review policies carefully

Documentation Index

​Installation

​Creating a Native Ad

​API Reference

​Constructor Options

​Methods

​load()

​show(options)

​showWith(element)

​hide()

​isLoaded()

​on(eventName, callback)

​Events

​load

​loadfail

​show

​showfail

​dismiss

​impression

​click

​Usage Examples

​Basic Implementation

​Attach to HTML Element

​Dynamic Repositioning

​Multiple Native Ads

​Feed Integration

​Customize Views

​Setup

​Default View Registration

​Multiple Custom Views

​Best Practices

​Design Guidelines

​Performance Considerations

​Layout Tips

​Use Cases

​Limitations

​References

Installation

Creating a Native Ad

API Reference

Constructor Options

Methods

`load()`

`show(options)`

`showWith(element)`

`hide()`

`isLoaded()`

`on(eventName, callback)`

Events

`load`

`loadfail`

`show`

`showfail`

`dismiss`

`impression`

`click`

Usage Examples

Basic Implementation

Attach to HTML Element

Dynamic Repositioning

Multiple Native Ads

Feed Integration

Customize Views

Setup

Default View Registration

Multiple Custom Views

Best Practices

Design Guidelines

Performance Considerations

Layout Tips

Use Cases

Limitations

References