canwhite / admob

Community plugin for using Google AdMob

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


AdMob

@capacitor-community/admob

Capacitor community plugin for native AdMob.


Maintainers

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

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, () => {
      // Subscribe Banner Event Listener
    });

    AdMob.addListener(BannerAdPluginEvents.SizeChanged, (size: AdMobBannerSize) => {
      // Subscribe Change Banner Size
    });

    const options: BannerAdOptions = {
      adId: 'YOUR ADID',
      adSize: BannerAdSize.BANNER,
      position: BannerAdPosition.BOTTOM_CENTER,
      margin: 0,
      // isTesting: true
      // npa: true
    };
    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) => {
    // Subscribe prepared interstitial
  });

  const options: AdOptions = {
    adId: 'YOUR ADID',
    // isTesting: true
    // npa: true
  };
  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) => {
    // Subscribe prepared rewardVideo
  });

  AdMob.addListener(RewardAdPluginEvents.Rewarded, (rewardItem: AdMobRewardItem) => {
    // Subscribe user rewarded
    console.log(rewardItem);
  });

  const options: AdOptions = {
    adId: 'YOUR ADID',
    // isTesting: true
    // npa: true
  };
  await AdMob.prepareRewardVideoAd(options);
  const rewardItem = await AdMob.showRewardVideoAd();
}

Index

API

initialize(...)

initialize(options: AdMobInitializationOptions) => Promise<void>

Initialize AdMob with AdMobInitializationOptions

Param Type Description
options AdMobInitializationOptions AdMobInitializationOptions

Since: 1.1.2


showBanner(...)

showBanner(options: BannerAdOptions) => Promise<void>

Show a banner Ad

Param Type Description
options BannerAdOptions AdOptions

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
Param Type Description
eventName BannerAdPluginEvents.SizeChanged bannerAdSizeChanged
listenerFunc (info: AdMobBannerSize) => void

Returns: PluginListenerHandle

Since: 3.0.0


addListener(BannerAdPluginEvents.Loaded, ...)

addListener(eventName: BannerAdPluginEvents.Loaded, listenerFunc: () => void) => PluginListenerHandle

Notice: request loaded Banner ad

Param Type Description
eventName BannerAdPluginEvents.Loaded bannerAdLoaded
listenerFunc () => void

Returns: PluginListenerHandle

Since: 3.0.0


addListener(BannerAdPluginEvents.FailedToLoad, ...)

addListener(eventName: BannerAdPluginEvents.FailedToLoad, listenerFunc: (info: AdMobError) => void) => PluginListenerHandle

Notice: request failed Banner ad

Param Type Description
eventName BannerAdPluginEvents.FailedToLoad bannerAdFailedToLoad
listenerFunc (info: AdMobError) => void

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.

Param Type Description
eventName BannerAdPluginEvents.Opened bannerAdOpened
listenerFunc () => void

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.

Param Type Description
eventName BannerAdPluginEvents.Closed bannerAdClosed
listenerFunc () => void

Returns: PluginListenerHandle

Since: 3.0.0


addListener(BannerAdPluginEvents.AdImpression, ...)

addListener(eventName: BannerAdPluginEvents.AdImpression, listenerFunc: () => void) => PluginListenerHandle

Unimplemented

Param Type Description
eventName BannerAdPluginEvents.AdImpression AdImpression
listenerFunc () => void

Returns: PluginListenerHandle

Since: 3.0.0


prepareInterstitial(...)

prepareInterstitial(options: AdOptions) => Promise<AdLoadInfo>

Prepare interstitial banner

Param Type Description
options AdOptions AdOptions

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
Param Type
eventName InterstitialAdPluginEvents.FailedToLoad
listenerFunc (error: AdMobError) => void

Returns: PluginListenerHandle


addListener(InterstitialAdPluginEvents.Loaded, ...)

addListener(eventName: InterstitialAdPluginEvents.Loaded, listenerFunc: (info: AdLoadInfo) => void) => PluginListenerHandle
Param Type
eventName InterstitialAdPluginEvents.Loaded
listenerFunc (info: AdLoadInfo) => void

Returns: PluginListenerHandle


addListener(InterstitialAdPluginEvents.Dismissed, ...)

addListener(eventName: InterstitialAdPluginEvents.Dismissed, listenerFunc: () => void) => PluginListenerHandle
Param Type
eventName InterstitialAdPluginEvents.Dismissed
listenerFunc () => void

Returns: PluginListenerHandle


addListener(InterstitialAdPluginEvents.FailedToShow, ...)

addListener(eventName: InterstitialAdPluginEvents.FailedToShow, listenerFunc: (error: AdMobError) => void) => PluginListenerHandle
Param Type
eventName InterstitialAdPluginEvents.FailedToShow
listenerFunc (error: AdMobError) => void

Returns: PluginListenerHandle


addListener(InterstitialAdPluginEvents.Showed, ...)

addListener(eventName: InterstitialAdPluginEvents.Showed, listenerFunc: () => void) => PluginListenerHandle
Param Type
eventName InterstitialAdPluginEvents.Showed
listenerFunc () => void

Returns: PluginListenerHandle


prepareRewardVideoAd(...)

prepareRewardVideoAd(options: AdOptions) => Promise<AdLoadInfo>

Prepare a reward video ad

Param Type Description
options AdOptions AdOptions

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
Param Type
eventName RewardAdPluginEvents.FailedToLoad
listenerFunc (error: AdMobError) => void

Returns: PluginListenerHandle


addListener(RewardAdPluginEvents.Loaded, ...)

addListener(eventName: RewardAdPluginEvents.Loaded, listenerFunc: (info: AdLoadInfo) => void) => PluginListenerHandle
Param Type
eventName RewardAdPluginEvents.Loaded
listenerFunc (info: AdLoadInfo) => void

Returns: PluginListenerHandle


addListener(RewardAdPluginEvents.Rewarded, ...)

addListener(eventName: RewardAdPluginEvents.Rewarded, listenerFunc: (reward: AdMobRewardItem) => void) => PluginListenerHandle
Param Type
eventName RewardAdPluginEvents.Rewarded
listenerFunc (reward: AdMobRewardItem) => void

Returns: PluginListenerHandle


addListener(RewardAdPluginEvents.Dismissed, ...)

addListener(eventName: RewardAdPluginEvents.Dismissed, listenerFunc: () => void) => PluginListenerHandle
Param Type
eventName RewardAdPluginEvents.Dismissed
listenerFunc () => void

Returns: PluginListenerHandle


addListener(RewardAdPluginEvents.FailedToShow, ...)

addListener(eventName: RewardAdPluginEvents.FailedToShow, listenerFunc: (error: AdMobError) => void) => PluginListenerHandle
Param Type
eventName RewardAdPluginEvents.FailedToShow
listenerFunc (error: AdMobError) => void

Returns: PluginListenerHandle


addListener(RewardAdPluginEvents.Showed, ...)

addListener(eventName: RewardAdPluginEvents.Showed, listenerFunc: () => void) => PluginListenerHandle
Param Type
eventName RewardAdPluginEvents.Showed
listenerFunc () => void

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

Prop Type
adUnitId string

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):


Jean-Baptiste Malatrasi

πŸ’»

gant02

πŸ’»

Saninn Salas Diaz

πŸ’»

Nico Lueg

πŸ’»

Ghonche Yqr

πŸ“–

vanessag

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

About

Community plugin for using Google AdMob

License:MIT License


Languages

Language:Java 51.2%Language:Kotlin 18.7%Language:Swift 14.9%Language:TypeScript 13.1%Language:Objective-C 0.9%Language:Ruby 0.8%Language:JavaScript 0.5%