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

• [x] iOS
• [x] Android

Other Plugins:

💰 For a Few Dollars More

Thanks for considering donate.

If this plugin help you to earn few dollars, please don't forget to share your profit, because "Sharing is Caring". Your donation will inspire me a lot to give more time on open-source project & help you by creating more useful plugins.

AdMob Demo App

Download Demo App from Here

Screenshot

iOS

Basic Banner AD	Interstitial AD	Interstitial Video AD	Reward Video AD

Android

Basic Banner AD	Interstitial AD	Interstitial 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.