# [Capacitor AdMob](https://github.com/migtam628/capacitor-admob) πΈ
Capacitor AdMob is a native AdMob implementation for IOS & Android. Now you can use this package as a [Ionic Capacitor](https://capacitor.ionicframework.com) Plugin in your App.
## Release Note:
### [v0.1.0](https://github.com/rahadur/capacitor-admob/tree/v0.1.0)
- Implement AdMob iOS SDK.
### [v0.0.9](https://github.com/rahadur/capacitor-admob/tree/v0.0.9)
- Fixed Plugin throws error when trying to show reward video **[#2](https://github.com/rahadur/capacitor-admob/issues/2)**
- Fixed AD overlapping tabs **[#4](https://github.com/rahadur/capacitor-admob/issues/4)**
- Fixed Cause: startup failed **[#7](https://github.com/rahadur/capacitor-admob/issues/7)**
## Supported Platform
- [x] iOS
- [x] Android
## AdMob Demo App
Download Demo App from **[Here](https://github.com/rahadur/capacitor-admob/tree/master/admob-demo)**
## 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 |
| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|  |  |  |  |
```console
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.
```console
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!):
```xml
GADIsAdManagerApp
GADApplicationIdentifier
ca-app-pub-6564742920318187~7217030993
```
## 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!):
```xml
```
### 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.
```java
// 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>() {{
add(AdMob.class); // Add AdMob as a Capacitor Plugin
}});
}
}
```
## π Initialize AdMob
Open your Ionic app **app.component.ts** file and add this folloing code.
```typescript
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 }>
```typescript
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.SMART_BANNER,
position: AdPosition.BOTTOM_CENTER,
margin: 50,
hasTabBar: true
};
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 }>
```typescript
// 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 }>
```typescript
// 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 }>
```typescript
// 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**.
```typescript
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 }>
```typescript
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",
autoShow: true,
isTesting: true
};
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 }>
```typescript
// 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**
```typescript
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 }>
```typescript
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",
autoShow: true,
isTesting: true
};
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 }>
```typescript
// Show a RewardVideo AD
AdMob.showRewardVideoAd().then(
value => {
console.log(value); // true
},
error => {
console.error(error); // show error
}
);
```
### pauseRewardedVideo(): Promise<{ value: boolean }>
```typescript
// Pause a RewardVideo AD
AdMob.pauseRewardedVideo().then(
value => {
console.log(value); // true
},
error => {
console.error(error); // show error
}
);
```
### resumeRewardedVideo(): Promise<{ value: boolean }>
```typescript
// Resume a RewardVideo AD
AdMob.resumeRewardedVideo().then(
value => {
console.log(value); // true
},
error => {
console.error(error); // show error
}
);
```
### stopRewardedVideo(): Promise<{ value: boolean }>
```typescript
// 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**
```typescript
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
```typescript
interface AdOptions {
adId: string;
adSize?: AdSize;
position?: AdPosition;
margin?: string;
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
```typescript
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
```typescript
enum AdPosition {
TOP_CENTER = "TOP_CENTER",
CENTER = "CENTER",
BOTTOM_CENTER = "BOTTOM_CENTER"
}
```
## Contributing
- π Star this repository
- π Open issue for feature requests
## Roadmap
- [Capacitor Plugins](https://capacitor.ionicframework.com/docs/plugins/)
- [IOS](https://capacitor.ionicframework.com/docs/plugins/ios/)
- [Android](https://capacitor.ionicframework.com/docs/plugins/android/)
## License
Capacitor AdMob is [MIT licensed](../../Desktop/capacitor-admob/LICENSE).