# Integration
Capacitor Full App uses [Admob Pro](https://ionicframework.com/docs/native/admob-pro) plugin for AdMob integration. This plugin can be used for Google Ads, including AdMob / DFP (DoubleClick for publisher) and mediations to other Ad networks.
{% hint style="info" %}
This plugin takes a percentage out of your earnings if your app profits more than $1,000. Read more about this on the plugin's repo. For a completely free alternative, see [AdMobPro Free](https://ionicframework.com/docs/admob-free).
{% endhint %}
In Capacitor Full App, AdMob functionality is present in `src/app/pages/pro/admob`
#### Install the plugin
```
$ ionic cordova plugin add cordova-plugin-admobpro
$ npm install @ionic-native/admob-pro
```
Import the plugin methods in your page/component with
```
import { AdMobPro } from '@ionic-native/admob-pro/ngx';
constructor(private admob: AdMobPro) {...}
```
## Showing Ads in page
You can create 4 types of Ads using AdMob in Ionic
* **Banner**: Rectangular ads that can be anchored to the top or bottom of the screen.
* **Interstitial**: Static ads that can appear at natural breaks or transition points, creating engaging brand experiences without disrupting the app experience.
* **Interstitial Video -** Interstitial ads, but with video
* **Rewarded**: Ads that users can choose to engage with in exchange for in-app rewards, like bonus points or an extra “life” in a game.
### **Ad IDs**
You should use development Ad Ids during development. You can find development ad ids here. All development IDs are saved in `src/app/services/util/util.service.ts` in Full App
{% hint style="danger" %}
When you are developing your app, make sure you are using the development ad IDs ONLY. Otherwise you end up clicking your own ads for testing, and Google may ban you for that.
{% endhint %}
### Banner Ad
To create a banner ad, you need a banner id from your AdMob account. This Id is different for both Android and iOS.
Normally, apps display banner ads by default on page load. For demo purpose, we have employed banner ads on click.
```
banner() {
let adId;
if (this.platform.is('android')) {
adId = this.util.adMobId.android.banner;
} else if (this.platform.is('ios')) {
adId = this.util.adMobId.ios.banner;
}
this.admob.createBanner({
adId: adId,
isTesting: true // remove in production
})
.then(() => {
this.admob.showBanner(this.admob.AD_POSITION.BOTTOM_CENTER);
})
.catch((err) => {
console.log(err);
});
}
```
`isTesting : true` is important. You cannot use development IDs in production. To hide the banner ad, simple call `this.admob.hideBanner();`
### Interstitial Ad
To create an interstitial ad, you need an interstitial id from your AdMob account. This Id is different for both Android and iOS. Interstitial ads are fullscreen ads and are more effective.
Normally, apps display interstitial ads on transition e.g. a game level crossed, or a video seen etc. For demo purpose, we have employed interstitial ads on click.
```
interstitial() {
let adId;
if (this.platform.is('android')) {
adId = this.util.adMobId.android.interstitial;
} else if (this.platform.is('ios')) {
adId = this.util.adMobId.ios.interstitial;
}
this.admob.prepareInterstitial({
adId: adId,
isTesting: true // remove in production
})
.then(() => {
this.admob.showInterstitial();
})
.catch((err) => {
console.log(err)
});
}
```
`isTesting : true` is important. You cannot use development IDs in production. To hide the interstitial ad, you need to click the X button in the ad.
{% hint style="info" %}
Loading an interstitial ad can take time, hence you should call **`this.admob.prepareInterstitial`** way before calling **`this.admob.showInterstitial();`**
{% endhint %}
**Interstial Video Ads** are shown in the same way as Interstitial statis ones, only the Ad ID is different.
### Rewards Ad
To create a reward ad, you need a reward Ad id from your AdMob account. This Id is different for both Android and iOS. Reward ads are fullscreen ads and are shown when you want to reward the user if they see the complete video.
For demo purpose, we have employed reward ads on click.
```
reward() {
let adId;
if (this.platform.is('android')) {
adId = this.util.adMobId.android.reward;
} else if (this.platform.is('ios')) {
adId = this.util.adMobId.ios.reward;
}
this.admob.prepareRewardVideoAd({
adId: adId,
isTesting: true // remove in production
})
.then(() => {
this.admob.showRewardVideoAd();
})
.catch((err) => {
console.log(err)
});
}
```
`isTesting : true` is important. You cannot use development IDs in production. To hide the reward ad, you need to click the X button in the ad.
{% hint style="info" %}
Loading a reward ad can take time, hence you should call `this.admob.prepareRewardVideoAd` way before calling `this.admob.showRewardVideoAd();`
{% endhint %}
### Catch Ad events
You can catch following Ad events using AdMob plugin
* onAdLoaded
* onAdFailLoad
* onAdPresent
* onAdDismiss
* onAdLeaveApp
For demo purpose, Full App employs `onAdDismiss` when the Ad is closed. It fetches the data returned by the Ad
More information on this plugin and related issues can be found on its [Github repo](https://github.com/floatinghotpot/cordova-admob-pro)
## Capacitor Admob Nuance
By default, this Cordova AdMob plugin is mentioned as not compatible with Capacitor. But that can be resolved with a small modification before device build.
The problem is the dependency plugin `cordova-plugin-extension`, it has a gradle file at `src/android/rjfun-libs.gradle` which indicates Cordova to compile the `cordova-generic-ad.jar`, but doing that makes it search in a relative place instead of in the right place.
Capacitor already compiles the .jar files that are on the right place, so what that gradle file does is not really needed. What you can do is to delete the content of `node_modules/cordova-plugin-extension/src/android/rjfun-libs.gradle` as workaround. After that you can build the app with the plugin working correctly.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://enappd.gitbook.io/capacitor-full-app-ionic-angular/features/pro-features/pro-addons/admob/integration.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.