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] Android
• [x] 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.