![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@capacitor-community/admob
Advanced tools
Readme
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 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
A native plugin for AdMob
The npm package @capacitor-community/admob receives a total of 733 weekly downloads. As such, @capacitor-community/admob popularity was classified as not popular.
We found that @capacitor-community/admob demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 43 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.