native-advanced-ad

Capacitor plugin native-advanced-ad — a skeleton plugin that displays AdMob Native Advanced Ads on Android and iOS, with a React wrapper component for Ionic apps.

Status: ready-to-publish skeleton. You must add Google Mobile Ads SDK and finish native configuration (permissions, Pod install, AdMob app id, ATT/GDPR consent) before production.

What is included

• android/ - Kotlin plugin code + layout XML sample.
• ios/ - Swift plugin code sample.
• src/ - TypeScript plugin wrapper and web fallback.
• dist/ - prebuilt JS + type definitions so this package is publishable immediately.
• example-react/NativeAd.tsx - React wrapper component that calls the plugin.

Installation

During development you can copy this plugin into your monorepo or publish to npm.

Local install (recommended for testing)

1. From your capacitor project root:

# copy plugin folder to your app (or use npm pack)
# e.g., from plugin folder:
npm pack /path/to/native-advanced-ad
# then in your app:
npm install /path/to/native-advanced-ad-0.1.0.tgz
npx cap sync

Publish to npm

1. Make sure package.json has a unique name and updated version.
2. Login npm login.
3. npm publish --access public (if scoped package use --access public).

Usage (Ionic React)

import React from 'react';
import { NativeAd } from './components/NativeAd'; // or from 'native-advanced-ad' if published

export function Home() {
  return (
    <>
      <h1>Home</h1>
      <NativeAd adUnitId="ca-app-pub-3940256099942544/2247696110" />
    </>
  );
}

The <NativeAd/> component simply calls the native plugin; the native view is rendered as an overlay by the plugin (not inside the WebView).

Native setup (required)

Android

1. Add Google Mobile Ads dependency to your app android/app/build.gradle:

implementation 'com.google.android.gms:play-services-ads:22.6.0' // use the latest stable version

2. Add AdMob App ID in AndroidManifest.xml:

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="ca-app-pub-xxxxxxxx~yyyyyyyy" />

3. Ensure INTERNET permission:

<uses-permission android:name="android.permission.INTERNET"/>

4. npx cap sync android then open Android Studio and build.

iOS

1. In ios/Podfile add:

pod 'Google-Mobile-Ads-SDK'

2. cd ios && pod install
3. Configure App Tracking Transparency (ATT) if targeting iOS 14+ and using IDFA.
4. npx cap sync ios and open Xcode to build.

Notes & next steps

• This package includes a prebuilt dist/ so you can npm install and use immediately.
• The plugin code is a starting point — you should:
  • Improve error handling and logging for onAdFailedToLoad.
  • Implement ad caching/preloading if desired.
  • Provide configuration options (styling, height, margins).
  • Securely handle user consent (GDPR/CCPA/ATT).
• The plugin shows a single overlay ad. If you need multiple ad instances or a recyclable pool, extend the native code to manage multiple views.

API

show(options)

• adUnitId (string) — required — AdMob native ad unit id.
• position ('top'|'bottom'|'floating') — optional — where to put overlay.
• top (number) — optional — top offset in px (for floating).

hide()

• Hides and destroys the active native ad view.

License

MIT