@rdlabo/capacitor-admib

Capacitor AdMob is a native AdMob implementation for iOS & Android. This repository fork from @rahadur/capacitor-admob .

	iOS	Android
Banner	Released	Released
Interstitial	Developing	No Tested
Reward	Released	Released

DONATE THIS PROJECT

Thanks for considering donate.

If this plugin help you, please share admob income. This help developing this plugin.This also help me easily determine how much time I would spend on the projects each month.

	TYPE	AMOUNT	LINK
PayPal.me	Once	Any	Donate
Paypal	Subscription	$15/month	Donate
Paypal	Subscription	$30/month	Donate
Paypal	Subscription	$50/month	Donate

Installation

$ npm install --save @rdlabo/capacitor-admob

If you use Capacitor 1.x

$ npm install --save @rdlabo/capacitor-admob@0.3.0

Android configuration

In file android/app/src/main/java/**/**/MainActivity.java, add the plugin to the initialization list:

this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
  [...]
  add(jp.rdlabo.capacitor.plugin.admob.AdMob.class);
  [...]
}});

In file android/app/src/main/AndroidManifest.xml, add the following XML elements under <manifest><application> :

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="@string/admob_app_id"/>

In file android/app/src/main/res/values/strings.xml add the following lines :

<string name="admob_app_id">[APP_ID]</string>

Don't forget to replace [APP_ID] by your AddMob application Id.

iOS configuration

In file ios/App/App/AppDelegate.swift add or replace the following:

import GoogleMobileAds

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    GADMobileAds.sharedInstance().start(completionHandler: nil)

Add the following in the ios/App/App/info.plist file:

<key>GADIsAdManagerApp</key>
<true/>

<key>GADApplicationIdentifier</key>
<string>[APP_ID]</string>

Don't forget to replace [APP_ID] by your AddMob application Id.

Initialize for @ionic/angular

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

import { Plugins } from '@capacitor/core';

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

Initialize for @ionic/react

This is implements simple sample from https://github.com/DavidFrahm . Thanks!

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet, isPlatform } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

import { Plugins } from '@capacitor/core';
import { AdOptions, AdSize, AdPosition } from '@rdlabo/capacitor-admob';

const { AdMob } = Plugins;

const App: React.FC = () => {

  AdMob.initialize();

  const adId = {
    ios: 'ios-value-here',
    android: 'android-value-here'
  }

  const platformAdId = isPlatform('android') ? adId.android : adId.ios;

  const options: AdOptions = {
    adId: platformAdId,
    adSize: AdSize.BANNER,
    position: AdPosition.BOTTOM_CENTER,
    margin: 0,
    // isTesting: true
  }

  AdMob.showBanner(options)
    .then(
      (value) => {
        console.log("Show banner", value);  // Boolean true
      },
      (error) => {
        console.error("Show banner ERROR", error);
      }
    );

  // Subscibe Banner Event Listener
  AdMob.addListener('onAdLoaded', (info: boolean) => {
    console.log("Banner ad loaded");
  });

  // Get Banner Size
  AdMob.addListener('onAdSize', (info: boolean) => {
    console.log(info);
  });

  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/home" component={Home} exact={true} />
          <Route exact path="/" render={() => <Redirect to="/home" />} />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );

};

export default App;

APIs

BANNER

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

import { Plugins } from '@capacitor/core';
import { AdOptions, AdSize, AdPosition } from '@rdlabo/capacitor-admob';

const { AdMob } = Plugins;

@Component({
  selector: 'admob',
  templateUrl: 'admob.component.html',
  styleUrls: ['admob.component.scss']
})
export class AdMobComponent {

    const options: AdOptions = {
        adId: 'YOUR ADID',
        adSize: AdSize.BANNER,
        position: AdPosition.BOTTOM_CENTER,
        margin: 0,
    }

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

        // Get Banner Size
        AdMob.addListener('onAdSize', (info: boolean) => {
             console.log(info);
        });
    }
}

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.err(error); // show error
    }
);

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

// Destroy the banner, remove it from screen.

AdMob.removeBanner().then(
    (value) => {
        console.log(value);  // true
    },
    (error) => {
        console.err(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;
addListener(eventName: 'onAdSize', listenerFunc: (info: any) => void): PluginListenerHandle;

INTERSTITIAL

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

import { Plugins } from '@capacitor/core';
import { AdOptions } from '@rdlabo/capacitor-admob';

const { AdMob } = Plugins;

@Component({
  selector: 'admob',
  templateUrl: 'admob.component.html',
  styleUrls: ['admob.component.scss']
})
export class AppComponent {

    const options: AdOptions = {
        adId: 'YOUR ADID',
        autoShow: false
    }

    constructor(){

        // Prepare interstitial banner
        AdMob.prepareInterstitial(this.options)
        .then(
            (value) => {
                console.log(value);  // true
            },
            (error) => {
                console.err(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.err(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 '@rdlabo/capacitor-admob';

const { AdMob } = Plugins;

@Component({
  selector: 'admob',
  templateUrl: 'admob.component.html',
  styleUrls: ['admob.component.scss']
})
export class AAdMobComponent {

    const options: AdOptions = {
        adId: 'YOUR ADID'
    }

    constructor(){

        // Prepare ReWardVideo
        AdMob.prepareRewardVideoAd(this.options)
        .then(
            (value) => {
                console.log(value);  // true
            },
            (error) => {
                console.err(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.err(error); // show error
    }
);

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

// Pause a RewardVideo AD

AdMob.pauseRewardedVideo().then(
    (value) => {
        console.log(value);  // true
    },
    (error) => {
        console.err(error); // show error
    }
);

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

// Resume a RewardVideo AD

AdMob.resumeRewardedVideo().then(
    (value) => {
        console.log(value);  // true
    },
    (error) => {
        console.err(error); // show error
    }
);

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

// Stop a RewardVideo AD

AdMob.stopRewardedVideo().then(
    (value) => {
        console.log(value);  // true
    },
    (error) => {
        console.err(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;

Options

AdOptions

interface AdOptions {
  adId: string;
  adSize?: AdSize;
  position?: AdPosition;
}

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',
}

License

Capacitor AdMob is MIT licensed.