Please check branch 'feat/v3', if you want use capacitor v3@beta
Capacitory community plugin for AdMob.
Maintainer | GitHub | Social | Sponsoring Company |
---|---|---|---|
Masahiko Sakakibara | rdlabo | @rdlabo | RELATION DESIGN LABO, GENERAL INC. ASSOCIATION |
Maintenance Status: Actively Maintained
Banner | Interstitial | Reward | |
---|---|---|---|
iOS | ![]() |
![]() |
![]() |
Android | ![]() |
![]() |
![]() |
Supporting iOS14 is be since @1.1.0.
% npm install --save @capacitor-community/admob
% npx cap update
% npm install --save @rdlabo/[email protected]
% npx cap update
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(com.getcapacitor.community.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 AdMob application Id.
Add the following in the ios/App/App/info.plist
file inside of the outermost <dict>
:
<key>GADIsAdManagerApp</key>
<true/>
<key>GADApplicationIdentifier</key>
<string>[APP_ID]</string>
<key>SKAdNetworkItems</key>
<array>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>cstr6suwn9.skadnetwork</string>
</dict>
</array>
<key>NSUserTrackingUsageDescription</key>
<string>[Why you use NSUserTracking. ex: This identifier will be used to deliver personalized ads to you.]</string>
Don't forget to replace [APP_ID]
by your AdMob application Id.
initialize(options: { requestTrackingAuthorization?: boolean , testingDevices?: string[]}): Promise<{ value: boolean }>
You can use option requestTrackingAuthorization
. This change permission to require AppTrackingTransparency
in iOS >= 14:
https://developers.google.com/admob/ios/ios14
Default value is true
. If you don't want to track, set requestTrackingAuthorization false
.
Send and array of device Ids in `testingDevices? to use production like ads on your specified devices -> https://developers.google.com/admob/android/test-ads#enable_test_devices
Open our Ionic app app.component.ts file and add this following 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();
}
}
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 '@capacitor-community/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
// npa: true
};
AdMob.showBanner(options);
// Subscribe 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;
import { Plugins } from '@capacitor/core';
import { AdOptions, AdSize, AdPosition } from '@capacitor-community/admob';
const { AdMob } = Plugins;
@Component({
selector: 'admob',
templateUrl: 'admob.component.html',
styleUrls: ['admob.component.scss'],
})
export class AdMobComponent {
private options: AdOptions = {
adId: 'YOUR ADID',
adSize: AdSize.BANNER,
position: AdPosition.BOTTOM_CENTER,
margin: 0,
// isTesting: true
// npa: true
};
constructor() {
// Show Banner Ad
AdMob.showBanner(this.options);
// Subscribe Banner Event Listener
AdMob.addListener('onAdLoaded', (info: boolean) => {
console.log('Banner Ad Loaded');
});
// Get Banner Size
AdMob.addListener('onAdSize', (info: boolean) => {
console.log(info);
});
}
}
// Hide the banner, remove it from screen, but can show it later
AdMob.hideBanner();
// Resume the banner, show it after hide
AdMob.resumeBanner();
// Destroy the banner, remove it from screen.
AdMob.removeBanner();
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;
import { Plugins } from '@capacitor/core';
import { AdOptions } from '@capacitor-community/admob';
const { AdMob } = Plugins;
@Component({
selector: 'admob',
templateUrl: 'admob.component.html',
styleUrls: ['admob.component.scss'],
})
export class AppComponent {
options: AdOptions = {
adId: 'YOUR ADID',
};
constructor() {
// Prepare interstitial banner
AdMob.prepareInterstitial(this.options);
// Subscribe Banner Event Listener
AdMob.addListener('onInterstitialAdLoaded', (info: boolean) => {
// You can call showInterstitial() here or anytime you want.
console.log('Interstitial Ad Loaded');
});
}
}
// Show interstitial ad when it’s ready
AdMob.showInterstitial();
This following Event Listener can be called in Interstitial AD
addListener(eventName: 'onInterstitialAdLoaded', listenerFunc: (info: any) => void): PluginListenerHandle;
addListener(eventName: 'onInterstitialAdFailedToLoad', listenerFunc: (info: any) => void): PluginListenerHandle;
addListener(eventName: 'onInterstitialAdOpened', listenerFunc: (info: any) => void): PluginListenerHandle;
addListener(eventName: 'onInterstitialAdClosed', listenerFunc: (info: any) => void): PluginListenerHandle;
addListener(eventName: 'onInterstitialAdLeftApplication', listenerFunc: (info: any) => void): PluginListenerHandle;
import { Plugins } from '@capacitor/core';
import { AdOptions } from '@capacitor-community/admob';
const { AdMob } = Plugins;
@Component({
selector: 'admob',
templateUrl: 'admob.component.html',
styleUrls: ['admob.component.scss'],
})
export class AdMobComponent {
options: AdOptions = {
adId: 'YOUR ADID',
};
constructor() {
// Prepare ReWardVideo
AdMob.prepareRewardVideoAd(this.options);
// Subscribe ReWardVideo Event Listener
AdMob.addListener('onRewardedVideoAdLoaded', (info: boolean) => {
// You can call showRewardVideoAd() here or anytime you want.
console.log('RewardedVideoAd Loaded');
});
}
}
// Show a RewardVideo AD
AdMob.showRewardVideoAd();
// Pause a RewardVideo AD
AdMob.pauseRewardedVideo();
// Resume a RewardVideo AD
AdMob.resumeRewardedVideo();
// Stop a RewardVideo AD
AdMob.stopRewardedVideo();
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: { type: string, coin: number }) => 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;
interface AdOptions {
adId: string;
adSize?: AdSize;
position?: AdPosition;
}
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',
}
enum AdPosition {
TOP_CENTER = 'TOP_CENTER',
CENTER = 'CENTER',
BOTTOM_CENTER = 'BOTTOM_CENTER',
}
[error] Error running update: Analyzing dependencies [!] CocoaPods could not find compatible versions for pod "Google-Mobile-Ads-SDK":
You should run pod repo update
;
Capacitor AdMob is MIT licensed.
Thanks goes to these wonderful people (emoji key):
Jean-Baptiste Malatrasi 💻 |
gant02 💻 |
Saninn Salas Diaz 💻 |
Nico Lueg 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!