AdMob
@capacitor-community/admob
Capacitor community plugin for native AdMob.
Maintainers
Maintenance Status: Actively Maintained
Demo
Demo code is here.
Screenshots
| Banner | Interstitial | Reward |
---|
iOS | | | |
Android | | | |
Installation
% npm install --save @capacitor-community/admob
% npx cap update
Android configuration
In file android/app/src/main/java/**/**/MainActivity.java
, add the plugin to the initialization list:
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
registerPlugin(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.
iOS configuration
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.
Example
Initialize AdMob
import { AdMob } from '@capacitor-community/admob';
export async function initialize(): Promise<void> {
AdMob.initialize({
requestTrackingAuthorization: true,
testingDevices: ['2077ef9a63d2b398840261c8221a0c9b'],
initializeForTesting: true,
});
}
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
Show Banner
import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition, BannerAdPluginEvents, AdMobBannerSize } from '@capacitor-community/admob';
export async function banner(): Promise<void> {
AdMob.addListener(BannerAdPluginEvents.Loaded, () => {
});
AdMob.addListener(BannerAdPluginEvents.SizeChanged, (size: AdMobBannerSize) => {
});
const options: BannerAdOptions = {
adId: 'YOUR ADID',
adSize: BannerAdSize.BANNER,
position: BannerAdPosition.BOTTOM_CENTER,
margin: 0,
};
AdMob.showBanner(options);
}
Show Interstitial
import { AdMob, AdOptions, AdLoadInfo, InterstitialAdPluginEvents } from '@capacitor-community/admob';
export async function interstitial(): Promise<void> {
AdMob.addListener(InterstitialAdPluginEvents.Loaded, (info: AdLoadInfo) => {
});
const options: AdOptions = {
adId: 'YOUR ADID',
};
await AdMob.prepareInterstitial(options);
await AdMob.showInterstitial();
}
Show RewardVideo
import { AdMob, AdOptions, AdLoadInfo, RewardAdPluginEvents, AdMobRewardItem } from '@capacitor-community/admob';
export async function rewardVideo(): Promise<void> {
AdMob.addListener(RewardAdPluginEvents.Loaded, (info: AdLoadInfo) => {
});
AdMob.addListener(RewardAdPluginEvents.Rewarded, (rewardItem: AdMobRewardItem) => {
console.log(rewardItem);
});
const options: AdOptions = {
adId: 'YOUR ADID',
};
await AdMob.prepareRewardVideoAd(options);
const rewardItem = await AdMob.showRewardVideoAd();
}
Index
initialize(...)
showBanner(...)
hideBanner()
resumeBanner()
removeBanner()
addListener(BannerAdPluginEvents.SizeChanged, ...)
addListener(BannerAdPluginEvents.Loaded, ...)
addListener(BannerAdPluginEvents.FailedToLoad, ...)
addListener(BannerAdPluginEvents.Opened, ...)
addListener(BannerAdPluginEvents.Closed, ...)
addListener(BannerAdPluginEvents.AdImpression, ...)
prepareInterstitial(...)
showInterstitial()
addListener(InterstitialAdPluginEvents.FailedToLoad, ...)
addListener(InterstitialAdPluginEvents.Loaded, ...)
addListener(InterstitialAdPluginEvents.Dismissed, ...)
addListener(InterstitialAdPluginEvents.FailedToShow, ...)
addListener(InterstitialAdPluginEvents.Showed, ...)
prepareRewardVideoAd(...)
showRewardVideoAd()
addListener(RewardAdPluginEvents.FailedToLoad, ...)
addListener(RewardAdPluginEvents.Loaded, ...)
addListener(RewardAdPluginEvents.Rewarded, ...)
addListener(RewardAdPluginEvents.Dismissed, ...)
addListener(RewardAdPluginEvents.FailedToShow, ...)
addListener(RewardAdPluginEvents.Showed, ...)
- Interfaces
- Enums
API
initialize(...)
initialize(options: AdMobInitializationOptions) => Promise<void>
Initialize AdMob with AdMobInitializationOptions
Since: 1.1.2
showBanner(...)
showBanner(options: BannerAdOptions) => Promise<void>
Show a banner Ad
Since: 1.1.2
hideBanner()
hideBanner() => Promise<void>
Hide the banner, remove it from screen, but can show it later
Since: 1.1.2
resumeBanner()
resumeBanner() => Promise<void>
Resume the banner, show it after hide
Since: 1.1.2
removeBanner()
removeBanner() => Promise<void>
Destroy the banner, remove it from screen.
Since: 1.1.2
addListener(BannerAdPluginEvents.SizeChanged, ...)
addListener(eventName: BannerAdPluginEvents.SizeChanged, listenerFunc: (info: AdMobBannerSize) => void) => PluginListenerHandle
Returns: PluginListenerHandle
Since: 3.0.0
addListener(BannerAdPluginEvents.Loaded, ...)
addListener(eventName: BannerAdPluginEvents.Loaded, listenerFunc: () => void) => PluginListenerHandle
Notice: request loaded Banner ad
Returns: PluginListenerHandle
Since: 3.0.0
addListener(BannerAdPluginEvents.FailedToLoad, ...)
addListener(eventName: BannerAdPluginEvents.FailedToLoad, listenerFunc: (info: AdMobError) => void) => PluginListenerHandle
Notice: request failed Banner ad
Returns: PluginListenerHandle
Since: 3.0.0
addListener(BannerAdPluginEvents.Opened, ...)
addListener(eventName: BannerAdPluginEvents.Opened, listenerFunc: () => void) => PluginListenerHandle
Notice: full-screen banner view will be presented in response to the user clicking on an ad.
Returns: PluginListenerHandle
Since: 3.0.0
addListener(BannerAdPluginEvents.Closed, ...)
addListener(eventName: BannerAdPluginEvents.Closed, listenerFunc: () => void) => PluginListenerHandle
Notice: The full-screen banner view will been dismissed.
Returns: PluginListenerHandle
Since: 3.0.0
addListener(BannerAdPluginEvents.AdImpression, ...)
addListener(eventName: BannerAdPluginEvents.AdImpression, listenerFunc: () => void) => PluginListenerHandle
Unimplemented
Returns: PluginListenerHandle
Since: 3.0.0
prepareInterstitial(...)
prepareInterstitial(options: AdOptions) => Promise<AdLoadInfo>
Prepare interstitial banner
Returns: Promise<AdLoadInfo>
Since: 1.1.2
showInterstitial()
showInterstitial() => Promise<void>
Show interstitial ad when it’s ready
Since: 1.1.2
addListener(InterstitialAdPluginEvents.FailedToLoad, ...)
addListener(eventName: InterstitialAdPluginEvents.FailedToLoad, listenerFunc: (error: AdMobError) => void) => PluginListenerHandle
Returns: PluginListenerHandle
addListener(InterstitialAdPluginEvents.Loaded, ...)
addListener(eventName: InterstitialAdPluginEvents.Loaded, listenerFunc: (info: AdLoadInfo) => void) => PluginListenerHandle
Returns: PluginListenerHandle
addListener(InterstitialAdPluginEvents.Dismissed, ...)
addListener(eventName: InterstitialAdPluginEvents.Dismissed, listenerFunc: () => void) => PluginListenerHandle
Returns: PluginListenerHandle
addListener(InterstitialAdPluginEvents.FailedToShow, ...)
addListener(eventName: InterstitialAdPluginEvents.FailedToShow, listenerFunc: (error: AdMobError) => void) => PluginListenerHandle
Returns: PluginListenerHandle
addListener(InterstitialAdPluginEvents.Showed, ...)
addListener(eventName: InterstitialAdPluginEvents.Showed, listenerFunc: () => void) => PluginListenerHandle
Returns: PluginListenerHandle
prepareRewardVideoAd(...)
prepareRewardVideoAd(options: AdOptions) => Promise<AdLoadInfo>
Prepare a reward video ad
Returns: Promise<AdLoadInfo>
Since: 1.1.2
showRewardVideoAd()
showRewardVideoAd() => Promise<AdMobRewardItem>
Show a reward video ad
Returns: Promise<AdMobRewardItem>
Since: 1.1.2
addListener(RewardAdPluginEvents.FailedToLoad, ...)
addListener(eventName: RewardAdPluginEvents.FailedToLoad, listenerFunc: (error: AdMobError) => void) => PluginListenerHandle
Returns: PluginListenerHandle
addListener(RewardAdPluginEvents.Loaded, ...)
addListener(eventName: RewardAdPluginEvents.Loaded, listenerFunc: (info: AdLoadInfo) => void) => PluginListenerHandle
Returns: PluginListenerHandle
addListener(RewardAdPluginEvents.Rewarded, ...)
addListener(eventName: RewardAdPluginEvents.Rewarded, listenerFunc: (reward: AdMobRewardItem) => void) => PluginListenerHandle
Returns: PluginListenerHandle
addListener(RewardAdPluginEvents.Dismissed, ...)
addListener(eventName: RewardAdPluginEvents.Dismissed, listenerFunc: () => void) => PluginListenerHandle
Returns: PluginListenerHandle
addListener(RewardAdPluginEvents.FailedToShow, ...)
addListener(eventName: RewardAdPluginEvents.FailedToShow, listenerFunc: (error: AdMobError) => void) => PluginListenerHandle
Returns: PluginListenerHandle
addListener(RewardAdPluginEvents.Showed, ...)
addListener(eventName: RewardAdPluginEvents.Showed, listenerFunc: () => void) => PluginListenerHandle
Returns: PluginListenerHandle
Interfaces
AdMobInitializationOptions
Prop | Type | Description | Default | Since |
---|
requestTrackingAuthorization | boolean | Use or not requestTrackingAuthorization in iOS(>14) | | 1.1.2 |
testingDevices | string[] | An Array of devices IDs that will be marked as tested devices if {@link AdMobInitializationOptions.initializeForTesting} is true (Real Ads will be served to Testing devices but they will not count as 'real'). | | 1.2.0 |
initializeForTesting | boolean | If set to true, the devices on {@link AdMobInitializationOptions.testingDevices} will be registered to receive test production ads. | false | 1.2.0 |
BannerAdOptions
This interface extends AdOptions
Prop | Type | Description | Default | Since |
---|
adSize | BannerAdSize | Banner Ad Size, defaults to ADAPTIVE_BANNER. IT can be: ADAPTIVE_BANNER, SMART_BANNER, BANNER, MEDIUM_RECTANGLE, FULL_BANNER, LEADERBOARD | ADAPTIVE_BANNER | 3.0.0 |
position | BannerAdPosition | Set Banner Ad position. TOP_CENTER or CENTER or BOTTOM_CENTER | TOP_CENTER | 1.1.2 |
PluginListenerHandle
Prop | Type |
---|
remove | () => Promise<void> |
AdMobBannerSize
When notice listener of OnAdLoaded, you can get banner size.
Prop | Type |
---|
width | number |
height | number |
AdMobError
For more information
https://developers.google.com/android/reference/com/google/android/gms/ads/AdError
Prop | Type | Description |
---|
code | number | Gets the error's code. |
message | string | Gets the message describing the error. |
AdLoadInfo
AdOptions
Prop | Type | Description | Default | Since |
---|
adId | string | The ad unit ID that you want to request | | 1.1.2 |
isTesting | boolean | You can use test mode of ad. | false | 1.1.2 |
margin | number | Margin Banner. Default is 0px; If position is BOTTOM_CENTER, margin is be margin-bottom. If position is TOP_CENTER, margin is be margin-top. | 0 | 1.1.2 |
npa | boolean | The default behavior of the Google Mobile Ads SDK is to serve personalized ads. Set this to true to request Non-Personalized Ads | false | 1.2.0 |
AdMobRewardItem
For more information
https://developers.google.com/admob/android/rewarded-video-adapters?hl=en
Prop | Type | Description |
---|
type | string | Rewarded type user got |
amount | number | Rewarded amount user got |
Enums
BannerAdSize
Members | Value | Description |
---|
BANNER | 'BANNER' | Mobile Marketing Association (MMA) banner ad size (320x50 density-independent pixels). |
FULL_BANNER | 'FULL_BANNER' | Interactive Advertising Bureau (IAB) full banner ad size (468x60 density-independent pixels). |
LARGE_BANNER | 'LARGE_BANNER' | Large banner ad size (320x100 density-independent pixels). |
LEADERBOARD | 'LEADERBOARD' | Interactive Advertising Bureau (IAB) leaderboard ad size (728x90 density-independent pixels). |
MEDIUM_RECTANGLE | 'MEDIUM_RECTANGLE' | Interactive Advertising Bureau (IAB) medium rectangle ad size (300x250 density-independent pixels). |
ADAPTIVE_BANNER | 'ADAPTIVE_BANNER' | A dynamically sized banner that is full-width and auto-height. |
SMART_BANNER | 'SMART_BANNER' | Screen width x 32|50|90 |
BannerAdPosition
Members | Value | Description |
---|
TOP_CENTER | 'TOP_CENTER' | Banner position be top-center |
CENTER | 'CENTER' | Banner position be center |
BOTTOM_CENTER | 'BOTTOM_CENTER' | Banner position be bottom-center(default) |
BannerAdPluginEvents
Members | Value | Description |
---|
SizeChanged | "bannerAdSizeChanged" | |
Loaded | "bannerAdLoaded" | |
FailedToLoad | "bannerAdFailedToLoad" | |
Opened | "bannerAdOpened" | Open "Adsense" Event after user click banner |
Closed | "bannerAdClosed" | Close "Adsense" Event after user click banner |
AdImpression | "bannerAdImpression" | Similarly, this method should be called when an impression is recorded for the ad by the mediated SDK. |
InterstitialAdPluginEvents
Members | Value | Description |
---|
Loaded | 'interstitialAdLoaded' | Emits after trying to prepare and Interstitial, when it is loaded and ready to be show |
FailedToLoad | 'interstitialAdFailedToLoad' | Emits after trying to prepare and Interstitial, when it could not be loaded |
Showed | 'interstitialAdShowed' | Emits when the Interstitial ad is visible to the user |
FailedToShow | 'interstitialAdFailedToShow' | Emits when the Interstitial ad is failed to show |
Dismissed | 'interstitialAdDismissed' | Emits when the Interstitial ad is not visible to the user anymore. |
RewardAdPluginEvents
Members | Value | Description |
---|
Loaded | 'onRewardedVideoAdLoaded' | Emits after trying to prepare a RewardAd and the Video is loaded and ready to be show |
FailedToLoad | 'onRewardedVideoAdFailedToLoad' | Emits after trying to prepare a RewardAd when it could not be loaded |
Showed | 'onRewardedVideoAdShowed' | Emits when the AdReward video is visible to the user |
FailedToShow | 'onRewardedVideoAdFailedToShow' | Emits when the AdReward video is failed to show |
Dismissed | 'onRewardedVideoAdDismissed' | Emits when the AdReward video is not visible to the user anymore. Important: This has nothing to do with the reward it self. This event will emits in this two cases: 1. The user starts the video ad but close it before the reward emit. 2. The user start the video and see it until end, then gets the reward and after that the ad is closed. |
Rewarded | 'onRewardedVideoAdReward' | Emits when user get rewarded from AdReward |
TROUBLE SHOOTING
If you have error:
[error] Error running update: Analyzing dependencies
[!] CocoaPods could not find compatible versions for pod "Google-Mobile-Ads-SDK":
You should run pod repo update
;
License
Capacitor AdMob is MIT licensed.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!