@capacitor-community/admob

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

Contributors ✨

Made with contributors-img.

Demo

Demo code is here.

$3

Installation

If you use capacitor 6:

``% npm install --save @capacitor-community/admob@6 % npx cap update`

`$3`

In file android/app/src/main/AndroidManifest.xml, add the following XML elements under :

`xml 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 :

`xml [APP_ID]`

Don't forget to replace [APP_ID] by your AdMob application Id.

#### Variables

This plugin will use the following project variables (defined in your app's variables.gradle file):

- playServicesAdsVersion version of com.google.android.gms:play-services-ads (default: 23.0.0) -androidxCoreKTXVersion: version of androidx.core:core-ktx (default: 1.13.0)

`$3`

Add the following in the ios/App/App/info.plist file inside of the outermost :

`xml GADIsAdManagerApp GADApplicationIdentifier [APP_ID] SKAdNetworkItems SKAdNetworkIdentifier cstr6suwn9.skadnetwork NSUserTrackingUsageDescription [Why you use NSUserTracking. ex: This identifier will be used to deliver personalized ads to you.]`

Don't forget to replace [APP_ID] by your AdMob application Id.

`Example`

`$3`

`ts import { AdMob } from '@capacitor-community/admob';

export async function initialize(): Promise { await AdMob.initialize();

const [trackingInfo, consentInfo] = await Promise.all([ AdMob.trackingAuthorizationStatus(), AdMob.requestConsentInfo(), ]);

if (trackingInfo.status === 'notDetermined') { /** * If you want to explain TrackingAuthorization before showing the iOS dialog, * you can show the modal here. * ex) * const modal = await this.modalCtrl.create({ * component: RequestTrackingPage, * }); * await modal.present(); * await modal.onDidDismiss(); // Wait for close modal **/

await AdMob.requestTrackingAuthorization(); }

const authorizationStatus = await AdMob.trackingAuthorizationStatus(); if ( authorizationStatus.status === 'authorized' && consentInfo.isConsentFormAvailable && consentInfo.status === AdmobConsentStatus.REQUIRED ) { await AdMob.showConsentForm(); } }`

Send an 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

`$3`

To use UMP, you must create your GDPR messages.

You may need to setup IDFA messages, it will work along with GDPR messages and will show when users are not in EEA and UK.

Example of how to use UMP.

`ts import { AdMob } from '@capacitor-community/admob';

private canShowAds: boolean | null = null;

async showConsent() { let consentInfo = await AdMob.requestConsentInfo(); if (!consentInfo.canRequestAds) { consentInfo = await AdMob.showConsentForm(); this.canShowAds = consentInfo.canRequestAds; } }`

To let users manage their privacy options at any time, show the privacy options form.`ts import { AdMob } from '@capacitor-community/admob';

showPrivacyOptionsForm() { AdMob.showPrivacyOptionsForm(); }`

If you testing on real device, you have to set debugGeography and add your device ID to testDeviceIdentifiers. You can find your device ID with logcat (Android) or XCode (iOS).

`ts const consentInfo = await AdMob.requestConsentInfo({ debugGeography: AdmobConsentDebugGeography.EEA, testDeviceIdentifiers: ['YOUR_DEVICE_ID'], });`

Note: When testing, if you choose not consent (Manage -> Confirm Choices). The ads may not load/show. Even on testing enviroment. This is normal. It will work on Production so don't worry.

Note: The order in which they are combined with other methods is as follows.

1. AdMob.initialize 2. AdMob.requestConsentInfo 3. AdMob.showConsentForm (If consent form required ) 3/ AdMob.showBanner

`$3`

`ts import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition, BannerAdPluginEvents, AdMobBannerSize, } from '@capacitor-community/admob';

export async function banner(): Promise { 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); }`

`$3`

`ts import { AdMob, AdOptions, AdLoadInfo, InterstitialAdPluginEvents, } from '@capacitor-community/admob';

export async function interstitial(): Promise { AdMob.addListener(InterstitialAdPluginEvents.Loaded, (info: AdLoadInfo) => { // Subscribe prepared interstitial });

const options: AdOptions = { adId: 'YOUR ADID', // isTesting: true // npa: true // immersiveMode: true }; await AdMob.prepareInterstitial(options); await AdMob.showInterstitial(); }`

`$3`

`ts import { AdMob, RewardAdOptions, AdLoadInfo, RewardAdPluginEvents, AdMobRewardItem, } from '@capacitor-community/admob';

export async function rewardVideo(): Promise { AdMob.addListener(RewardAdPluginEvents.Loaded, (info: AdLoadInfo) => { // Subscribe prepared rewardVideo });

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

const options: RewardAdOptions = { adId: 'YOUR ADID', // isTesting: true // npa: true // immersiveMode: true // ssv: { // userId: "A user ID to send to your SSV" // customData: JSON.stringify({ ...MyCustomData }) //} }; await AdMob.prepareRewardVideoAd(options); const rewardItem = await AdMob.showRewardVideoAd(); }`

`Server-side Verification Notice`

SSV callbacks are only fired on Production Adverts, therefore test Ads will not fire off your SSV callback.

For E2E tests or just for validating the data in your RewardAdOptionswork as expected, you can add a custom GET request to your mock endpoint after theRewardAdPluginEvents.Rewarded similar to this:

`ts AdMob.addListener(RewardAdPluginEvents.Rewarded, async () => { // ... if (ENVIRONMENT_IS_DEVELOPMENT) { try { const url =https://your-staging-ssv-endpoint+ new URLSearchParams({ ad_network: 'TEST', ad_unit: 'TEST', custom_data: customData, // <-- passed CustomData reward_amount: 'TEST', reward_item: 'TEST', timestamp: 'TEST', transaction_id: 'TEST', user_id: userId, // <-- Passed UserID signature: 'TEST', key_id: 'TEST', }); await fetch(url); } catch (err) { console.error(err); } } // ... });`

`Index`

`$3`

`typescript hideBanner() => Promise`

Hide the banner, remove it from screen, but can show it later

Since: 1.1.2

--------------------

`$3`

`typescript resumeBanner() => Promise`

Resume the banner, show it after hide

Since: 1.1.2

--------------------

`$3`

`typescript removeBanner() => Promise`

Destroy the banner, remove it from screen.

Since: 1.1.2

--------------------

`$3`

`typescript addListener(eventName: BannerAdPluginEvents.SizeChanged, listenerFunc: (info: AdMobBannerSize) => void) => Promise`

| Param | Type | Description | | ------------------ | --------------------------------------------------------------------------------- | ------------------- | |eventName| BannerAdPluginEvents.SizeChanged | bannerAdSizeChanged | |listenerFunc | (info: AdMobBannerSize) => void | |