Skip to main content
Version: Next

Native Ad

warning

This feature is implemented differently from the original AdMob Native Ad designed for, as there is no official way to using it with webview.

You are warned to the potential policy violations for using this feature.

Native ads are ad assets that are presented to users via UI components that are native to the platform.

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

Installation​

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

Or use a local version with customized views,

Usage​

document.addEventListener('deviceready', async () => {
  const ad = new admob.NativeAd({
    adUnitId: 'ca-app-pub-xxx/yyy',
  })

  ad.on('load', (evt) => {
    // evt.ad
  })

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

  setTimeout(() => {
    // change ad size and poistion
    ad.show({
      x: 0,
      y: 150,
      width: window.screen.width,
      height: 350,
    })
  }, 5000)

  setTimeout(() => {
    ad.hide()
  }, 10000)
})

document.addEventListener('admob.ad.load', async (evt) => {
  if (evt.ad instanceof admob.NativeAd) {
    // handle event here
  }
})

Attach to HTML element​

ad.showWith(document.getElementById('native-ad'))

native-ad is the HTML element for the ad view should attach to, which will update the size and position of ad view as the DOM element.

Note that this is an native ad view overlay on top of the webview, so scrolling will see some delay. It is the limitation for mixing native view and webview for hybrid app.

Customize Views​

You will need to create a plugin to provide the native ad view implementation.

It is recommended to fork admob-plus-cordova-native and starting there.

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
note

Review the Native ads policies and guidelines for guidance on how to render your native ads.

The default view is registered in

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));
        }});
    }
}

By changing src/android/AdViewProvider.java and src/android/res/layout/ad_unified.xml, you could customize the look and feel of the native ad view.

Multiple Views​

If your native ads need more than one views, you could register them using registerNativeAdViewProviders().

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 extra views
            put("myview", new MyAdViewProvider(cordova));
        }});
    }
}

Then specify it when createing the ad,

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

Remeber to update plugin.xml for the newly added files,

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

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

Events​

admob.ad.load​

admob.ad.loadfail​

admob.ad.show​

admob.ad.showfail​

admob.ad.dismiss​

admob.ad.impression​

References​