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 |
| Saninn Salas Diaz | Saninn Salas Diaz | @SaninnSalas |
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/capacitor-admob@0.3.0 % 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 💻 |  Ghonche Yqr 📖 |  vanessag 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!