Capacitor AdMob 💸

Capacitor AdMob is a native AdMob implementation for IOS & Android. Now you can use this package as a Ionic Capacitor Plugin in your App.

Release Note:

v0.1.0

• Implement AdMob iOS SDK.

v0.0.9

• Fixed Plugin throws error when trying to show reward video #2

• Fixed AD overlapping tabs #4

• Fixed Cause: startup failed #7

Supported Platform

• Android
• iOS

Other Plugins:

Plugins	Android	iOS	Electron	PWA
MoPub	✅	❌	❌	❌

AdMob Demo App

Download Demo App from Here

Screenshot

iOS

Basic Banner AD	Intertitial AD	Intertitial Video AD	Reward Video AD

Android

Basic Banner AD	Intertitial AD	Intertitial Video AD	Reward Video AD

cd admob-demo
 
npm install
 
ionic build
 
npx cap copy
 
npx cap sync
 
npx cap update
 
npx cap open android
 
============== Or just use this command ===========
 
npm install & ionic build & npx cap copy & npx cap sync & npx cap update & npx cap open android

Installation

Use AdMob plugins in your app.

 npm install --save capacitor-admob

iOS

Update Info.plist

Open your App/App/Info.plist file and add this plist value line at the right spot (and replace the value by the actual App ID of your app!):

<!-- this two line needs to be added -->
 
<key>GADIsAdManagerApp</key>
<true/>
 
<key>GADApplicationIdentifier</key>
<!-- replace this value with your App ID key-->
<string>ca-app-pub-6564742920318187~7217030993</string>
 

Android

Update Manifest

Open your android/app/src/Android/AndroidManifest.xml file and add this meta-data line at the right spot (and replace the value by the actual App ID of your app!):

<application>
  <!-- this line needs to be added (replace the value!) -->
  <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~3347511713" />
  <activity></activity>
</application>
 

Register AdMob to Capacitor Android

Open your Ionic Capacitor App in Android Studio, Now open MainActivity.java of your app and Register AdMob to Capacitor Plugins.

// Other imports... 
import app.xplatform.capacitor.plugins.AdMob;
 
public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
 
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
 
      add(AdMob.class);  // Add AdMob as a Capacitor Plugin 
 
    }});
  }
}

📌 Initialize AdMob

Open your Ionic app app.component.ts file and add this folloing code.

import { Plugins } from "@capacitor/core";
// import { initialize } from 'capacitor-admob'; No longar required
 
const { AdMob } = Plugins;
 
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.scss"]
})
export class AppComponent {
  constructor() {
    // Initialize AdMob for your Application
    AdMob.initialize("YOUR APPID");
  }
}

📌 BANNER

showBanner(options: AdOptions): Promise<{ value: boolean }>

import { Plugins } from "@capacitor/core";
import { AdOptions, AdSize, AdPosition } from "capacitor-admob";
 
const { AdMob } = Plugins;
 
@Component({
  selector: "admob",
  templateUrl: "admob.component.html",
  styleUrls: ["admob.component.scss"]
})
export class AdMobComponent {
  options: AdOptions = {
    adId: "YOUR ADID",
    adSize: AdSize.BANNER,
    position: AdPosition.BOTTOM_CENTER
  };
 
  constructor() {
    // Show Banner Ad
    AdMob.showBanner(this.options).then(
      value => {
        console.log(value); // true
      },
      error => {
        console.error(error); // show error
      }
    );
 
    // Subscibe Banner Event Listener
    AdMob.addListener("onAdLoaded", (info: boolean) => {
      console.log("Banner Ad Loaded");
    });
  }
}

hideBanner(): Promise<{ value: boolean }>

// Hide the banner, remove it from screen, but can show it later
 
AdMob.hideBanner().then(
  value => {
    console.log(value); // true
  },
  error => {
    console.err(error); // show error
  }
);

resumeBanner(): Promise<{ value: boolean }>

// Resume the banner, show it after hide
 
AdMob.resumeBanner().then(
  value => {
    console.log(value); // true
  },
  error => {
    console.error(error); // show error
  }
);

removeBanner(): Promise<{ value: boolean }>

// Destroy the banner, remove it from screen.
 
AdMob.removeBanner().then(
  value => {
    console.log(value); // true
  },
  error => {
    console.error(error); // show error
  }
);

Event Listener

This following Event Listener can be called in Banner AD.

addListener(eventName: 'onAdLoaded', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onAdFailedToLoad', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onAdOpened', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onAdClosed', listenerFunc: (info: any) => void): PluginListenerHandle;

📌 INTERSTITIAL

prepareInterstitial(options: AdOptions): Promise<{ value: boolean }>

import { Plugins } from "@capacitor/core";
import { AdOptions } from "capacitor-admob";
 
const { AdMob } = Plugins;
 
@Component({
  selector: "admob",
  templateUrl: "admob.component.html",
  styleUrls: ["admob.component.scss"]
})
export class AppComponent {
  options: AdOptions = {
    adId: "Your AD_Id",
    adSize: AdSize.SMART_BANNER,
    position: AdPosition.BOTTOM_CENTER,
    hasTabBar: false, // make it true if you have TabBar Layout.
    tabBarHeight: 56 // you can assign custom margin in pixel default is 56
  };
 
  constructor() {
    // Prepare interstitial banner
    AdMob.prepareInterstitial(this.options).then(
      value => {
        console.log(value); // true
      },
      error => {
        console.error(error); // show error
      }
    );
 
    // Subscibe Banner Event Listener
    AdMob.addListener("onAdLoaded", (info: boolean) => {
      // You can call showInterstitial() here or anytime you want.
 
      console.log("Interstitial Ad Loaded");
    });
  }
}

showInterstitial(): Promise<{ value: boolean }>

// Show interstitial ad when it’s ready
 
AdMob.showInterstitial().then(
  value => {
    console.log(value); // true
  },
  error => {
    console.error(error); // show error
  }
);

Event Listener

This following Event Listener can be called in Interstitial AD

addListener(eventName: 'onAdLoaded', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onAdFailedToLoad', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onAdOpened', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onAdClosed', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onAdLeftApplication', listenerFunc: (info: any) => void): PluginListenerHandle;

📌 RewardVideo

prepareRewardVideoAd(options: AdOptions): Promise<{ value: boolean }>

import { Plugins } from "@capacitor/core";
import { AdOptions } from "capacitor-admob";
 
const { AdMob } = Plugins;
 
@Component({
  selector: "admob",
  templateUrl: "admob.component.html",
  styleUrls: ["admob.component.scss"]
})
export class AAdMobComponent {
  options: AdOptions = {
    adId: "YOUR ADID"
  };
 
  constructor() {
    // Prepare ReWardVideo
    AdMob.prepareRewardVideoAd(this.options).then(
      value => {
        console.log(value); // true
      },
      error => {
        console.error(error); // show error
      }
    );
 
    // Subscibe ReWardVideo Event Listener
    AdMob.addListener("onRewardedVideoAdLoaded", (info: boolean) => {
      // You can call showRewardVideoAd() here or anytime you want.
      console.log("RewardedVideoAd Loaded");
    });
  }
}

showRewardVideoAd(): Promise<{ value: boolean }>

// Show a RewardVideo AD
 
AdMob.showRewardVideoAd().then(
  value => {
    console.log(value); // true
  },
  error => {
    console.error(error); // show error
  }
);

pauseRewardedVideo(): Promise<{ value: boolean }>

// Pause a RewardVideo AD
 
AdMob.pauseRewardedVideo().then(
  value => {
    console.log(value); // true
  },
  error => {
    console.error(error); // show error
  }
);

resumeRewardedVideo(): Promise<{ value: boolean }>

// Resume a RewardVideo AD
 
AdMob.resumeRewardedVideo().then(
  value => {
    console.log(value); // true
  },
  error => {
    console.error(error); // show error
  }
);

stopRewardedVideo(): Promise<{ value: boolean }>

// Stop a RewardVideo AD
 
AdMob.stopRewardedVideo().then(
  value => {
    console.log(value); // true
  },
  error => {
    console.error(error); // show error
  }
);

Event Listener

This following Event Listener can be called in RewardedVideo

addListener(eventName: 'onRewardedVideoAdLoaded', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onRewardedVideoAdOpened', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onRewardedVideoStarted', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onRewardedVideoAdClosed', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onRewarded', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onRewardedVideoAdLeftApplication', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onRewardedVideoAdFailedToLoad', listenerFunc: (info: any) => void): PluginListenerHandle;
 
addListener(eventName: 'onRewardedVideoCompleted', listenerFunc: (info: any) => void): PluginListenerHandle;

API

📌 AdOptions

interface AdOptions {
  adId: string;
  adSize?: AdSize;
  position?: AdPosition;
  hasTabBar?: boolean; // optional: default false
  tabBarHeight?: number; // set cutom height in pixal default is 56
  userId?: string; // RewardedVideo ONLY, Optional user ID useful when using SSV// Height in Pixal
}

📌 AdSize

enum AdSize {
  BANNER = "BANNER",
 
  FLUID = "FLUID",
 
  FULL_BANNER = "FULL_BANNER",
 
  LARGE_BANNER = "LARGE_BANNER",
 
  LEADERBOARD = "LEADERBOARD",
 
  MEDIUM_RECTANGLE = "MEDIUM_RECTANGLE",
 
  SMART_BANNER = "SMART_BANNER",
 
  CUSTOM = "CUSTOM"
}

📌 AdPosition

enum AdPosition {
  TOP_CENTER = "TOP_CENTER",
 
  CENTER = "CENTER",
 
  BOTTOM_CENTER = "BOTTOM_CENTER"
}

Contributing

• 🌟 Star this repository
• 📋 Open issue for feature requests

Roadmap

• Capacitor Plugins

• IOS

• Android

License

Capacitor AdMob is MIT licensed.