Skip to content

Commit eba5488

Browse files
nativescript-ossnativescript-oss
committed
chore(update-plugins): Sun Nov 3 08:06:07 UTC 2024
1 parent f62e2c8 commit eba5488

File tree

1 file changed

+119
-80
lines changed

1 file changed

+119
-80
lines changed

‎plugins/firebase-admob.md

Lines changed: 119 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ Update your `Info.plist` file at `App_Resources/iOS` with a `GADApplicationIdent
7878

7979
```xml
8080
<key>GADApplicationIdentifier</key>
81-
<string>ca-app-pub-3940256099942544~1458002511</string>
81+
<string>ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy</string>
8282
```
8383

8484
For more information about configuring the `Info.plist` and setting up your App ID, see [Update your Info.plist](https://developers.google.com/admob/ios/quick-start#update%5C_your%5C_infoplist).
@@ -89,7 +89,7 @@ Add AdMob App ID ([identified in the AdMob UI](https://support.google.com/admob/
8989

9090
```xml
9191
<application>
92-
<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
92+
<!-- Sample AdMob App ID: ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy -->
9393
<meta-data
9494
android:name="com.google.android.gms.ads.APPLICATION_ID"
9595
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"
@@ -128,7 +128,11 @@ Banner ads are rectangular ads that appear at the top or bottom of the device sc
128128

129129
#### Testing Banner ads in development mode
130130

131-
> **Note:** When developing your app, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.
131+
:::tip Note
132+
133+
When developing your app, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.
134+
135+
:::
132136

133137
To enable dedicated test ad unit ID for banners, visit the links below:
134138

@@ -151,17 +155,27 @@ The `BannerAd` requires the following attributes to be set:
151155
- `BannerAdListener` -->
152156

153157
```xml
154-
<Page xmlns:ui="@nativescript/firebase-admob" >
155-
158+
<Page xmlns:ui="@nativescript/firebase-admob">
156159
<StackLayout>
157160
<ui:BannerAd
158161
height="100"
159162
width="100"
160163
unitId="{{bannerAdUnit}}"
161-
layoutChanged="{{bannerLoaded}}"
162-
/>
164+
layoutChanged="{{loadBanner}}"
165+
/>
163166
</StackLayout>
167+
<!-- ... -->
168+
</Page>
169+
```
170+
171+
```js
172+
import { BannerAdSize } from '@nativescript/firebase-admob'
164173

174+
export function loadBanner(args) {
175+
const banner = args.object
176+
banner.size = new BannerAdSize(100, 100)
177+
banner.load()
178+
}
165179
```
166180

167181
#### Add Banner ad in NativeScript Angular
@@ -217,8 +231,13 @@ And then add it to markup as follows. The `BannerAd` requires the following attr
217231
- `BannerAdSize`: You can set this value in the callback function of the `layoutChanged` event. For more information, see [Customize the banner ad size](#customize-the-banner-ad-size)
218232
- `height` and `width`
219233

220-
```html
221-
<BannerAd height="100" width="100" :unitId="bannerAdUnit" @layoutChanged="bannerLoaded" />
234+
```xml
235+
<BannerAd
236+
height="100"
237+
width="100"
238+
:unitId="bannerAdUnit"
239+
@layoutChanged="bannerLoaded"
240+
/>
222241
```
223242

224243
#### Customize the banner ad size
@@ -230,9 +249,7 @@ To define a custom banner size, you have 2 options:
230249
```ts
231250
import { BannerAdSize } from '@nativescript/firebase-admob'
232251

233-
const adSize = new BannerAdSize(300, 50)
234-
235-
banner.size = adSize
252+
banner.size = new BannerAdSize(300, 50)
236253
```
237254

238255
- Set the `size` to any of the constants of the `BannerAdSize` class.
@@ -254,33 +271,32 @@ The table below lists the available constants and the sizes they represent.
254271
The plugin enables you to listen to different lifecycle events of an ad, such as when an ad is loaded. Register the events handlers before calling the `load` method.
255272

256273
```ts
257-
const bannerView = event.object;
274+
const bannerView = event.object
258275

259276
// Called when an ad is successfully received.
260-
bannerView.on('adLoaded', (args) =>{
261-
console.log('Ad loaded.'),
262-
});
263-
264-
// Called when an ad request failed.
265-
bannerView.on('adFailedToLoad', (args) =>{
266-
console.log('Ad failed to load: ', args.error);
267-
});
277+
bannerView.on('adLoaded', args => {
278+
console.log('Ad loaded.')
279+
})
268280

269-
// Called when the user removes an overlay that covers the screen.
270-
bannerView.on('adClosed', (args) =>{
271-
console.log('Ad closed.');
272-
});
281+
// Called when an ad request failed.
282+
bannerView.on('adFailedToLoad', args => {
283+
console.log('Ad failed to load: ', args.error)
284+
})
273285

274-
// Called when an impression occurs on the ad.
275-
bannerView.on('adImpression', (args) =>{
276-
console.log('Ad impression.');
277-
});
286+
// Called when the user removes an overlay that covers the screen.
287+
bannerView.on('adClosed', args => {
288+
console.log('Ad closed.')
289+
})
278290

279-
// Called when an tap/touch/click occurs on the ad.
280-
bannerView.on('adClicked', (args) =>{
281-
console.log('Ad tapped');
282-
});
291+
// Called when an impression occurs on the ad.
292+
bannerView.on('adImpression', args => {
293+
console.log('Ad impression.')
294+
})
283295

296+
// Called when an tap/touch/click occurs on the ad.
297+
bannerView.on('adClicked', args => {
298+
console.log('Ad tapped')
299+
})
284300
```
285301

286302
### Display a banner ad to the user
@@ -297,8 +313,12 @@ Interstitial ads are full-screen ads that cover the interface of an app until cl
297313

298314
#### Testing Interstitial ads in development
299315

300-
> **Note:** When your app is in development mode, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.
301-
> To enable dedicated test ad unit ID, visit the links below:
316+
:::tip Note
317+
318+
When your app is in development mode, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.
319+
To enable dedicated test ad unit ID, visit the links below:
320+
321+
:::
302322

303323
- [Android demo units](https://developers.google.com/admob/android/test-ads#demo_ad_units)
304324
- [iOS demo units](https://developers.google.com/admob/ios/test-ads#demo_ad_units)
@@ -319,7 +339,7 @@ Create an Interstitial ad instance by calling the static `createForAdRequest` on
319339

320340
```ts
321341
import { InterstitialAd } from '@nativescript/firebase-admob'
322-
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
342+
const ad = InterstitialAd.createForAdRequest('ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy')
323343
```
324344

325345
3. Listen to the ad lifecycle events
@@ -328,7 +348,8 @@ To listen for the ad lifecycle events, such as when the ad is display or dismiss
328348

329349
```ts
330350
import { InterstitialAd } from '@nativescript/firebase-admob'
331-
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
351+
352+
const ad = InterstitialAd.createForAdRequest('ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy')
332353

333354
ad.onAdEvent((event, error, data) => {
334355
switch (event) {
@@ -351,7 +372,8 @@ ad.onAdEvent((event, error, data) => {
351372

352373
```ts
353374
import { InterstitialAd } from '@nativescript/firebase-admob'
354-
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
375+
376+
const ad = InterstitialAd.createForAdRequest('ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy')
355377

356378
ad.onAdEvent((event, error, data) => {
357379
switch (event) {
@@ -377,7 +399,8 @@ To display the ad, call the `show` method on the ad instance. This method is cal
377399

378400
```ts
379401
import { InterstitialAd } from '@nativescript/firebase-admob'
380-
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
402+
403+
const ad = InterstitialAd.createForAdRequest('ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy')
381404

382405
ad.onAdEvent((event, error, data) => {
383406
switch (event) {
@@ -415,7 +438,7 @@ To add a Native ad to your {N} Core app, follow these steps:
415438
1. Register the plugin namespace under a prefix, `ui` (this can be any name), with the Page element.
416439

417440
```xml
418-
<Page xmlns:ui="@nativescript/firebase-admob" />
441+
<Page xmlns:ui="@nativescript/firebase-admob">
419442
```
420443

421444
2. Use the prefix to access the `NativeAdView` and add it to markup.
@@ -431,7 +454,11 @@ To add a Native ad to your {N} Core app, follow these steps:
431454

432455
### Testing Native ads in development mode
433456

434-
> **Note:** When developing your app, make sure you use test ad unit IDs rather than live, production ads. Failure to do so can lead to suspension of your account. Just make sure you replace the test ad unit ID with your own ad unit ID before publishing your app.
457+
:::tip Note
458+
459+
When developing your app, make sure you use test ad unit IDs rather than live, production ads. Failure to do so can lead to suspension of your account. Just make sure you replace the test ad unit ID with your own ad unit ID before publishing your app.
460+
461+
:::
435462

436463
To enable dedicated test ad unit ID, visit the links below:
437464

@@ -450,7 +477,7 @@ The `NativeAdLoader` class is an interface for managing the the Native ad.
450477
Create an instance of `NativeAdLoader` by calling its constructor function. The constructor function accepts 3 parameters. The required adUnitId as the first parameter, optional RequestOptions and NativeAdOptions objects as the second and third parameter, respectively.
451478

452479
```ts
453-
const loader = new NativeAdLoader('ca-app-pub-3940256099942544/3986624511', null, {
480+
const loader = new NativeAdLoader('ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy', null, {
454481
nativeAdOptions: {
455482
adChoicesPlacement: AdChoicesPlacement.TOP_RIGHT
456483
}
@@ -473,28 +500,29 @@ To listen to the Native ad [lifecycle events](), call the `onAdEvent` method on
473500
```
474501

475502
```ts
476-
nativeAdLoaded(event){
477-
const view = event.object;
478-
loader.onAdEvent((event, error, data) => {
479-
if (event === NativeAdEventType.LOADED) {
480-
const ad = data as NativeAd;
481-
482-
const headLineView = view.getViewById('headLineView');
483-
headLineView.text = ad.headline;
484-
const mediaView = view.getViewById('mediaView');
485-
view.mediaView = mediaView;
486-
mediaView.mediaContent = ad.mediaContent;
487-
const callToActionButton = view.getViewById('callToActionView');
488-
view.callToActionView = callToActionButton;
489-
callToActionButton.text = ad.callToAction;
490-
const bodyView = view.getViewById('bodyView');
491-
bodyView.text = ad.body;
492-
view.nativeAd = ad;
493-
console.log('nativead loaded');
494-
} else if (event === 'adFailedToLoad') {
495-
console.log('nativead failed to load', error);
496-
}
497-
});
503+
function nativeAdLoaded(event) {
504+
const view = event.object
505+
506+
loader.onAdEvent((event, error, data) => {
507+
if (event === NativeAdEventType.LOADED) {
508+
const ad = data as NativeAd
509+
510+
const headLineView = view.getViewById('headLineView')
511+
headLineView.text = ad.headline
512+
const mediaView = view.getViewById('mediaView')
513+
view.mediaView = mediaView
514+
mediaView.mediaContent = ad.mediaContent
515+
const callToActionButton = view.getViewById('callToActionView')
516+
view.callToActionView = callToActionButton
517+
callToActionButton.text = ad.callToAction
518+
const bodyView = view.getViewById('bodyView')
519+
bodyView.text = ad.body
520+
view.nativeAd = ad
521+
console.log('nativead loaded')
522+
} else if (event === 'adFailedToLoad') {
523+
console.log('nativead failed to load', error)
524+
}
525+
})
498526
}
499527
```
500528

@@ -508,12 +536,12 @@ loader.load()
508536
### NativeAdOptions interface
509537

510538
A NativeAdOptions object is used to set the following options on the native ad.
511-
| Property | Type | Description
512-
|:---------|:-----|:-----------
513-
| `returnUrlsForImageAssets` | `boolean` | _Optional_: If set to `true`, the SDK will not load image asset content and native ad image URLs can be used to fetch content. Defaults to `false`.
514-
| `multipleImages` | `boolean`| _Optional_: Some image assets contain a series of images. Setting this property to `true` tells the app to display all the images of an asset. The `false`(the default) value informs the app to display the first image from the series of images in an image asset.
515-
| `adChoicesPlacement` | [AdChoicesPlacement](#adchoicesplacement) |_Optional_: The [AdChoices overlay](https://developers.google.com/admob/android/native/advanced#adchoices_overlay) is set to the top right corner by default. Apps can change which corner this overlay is rendered in by setting this property to one of the following:
516-
| `videoOptions` | [videoOptions](#videooptions)| _Optional_: Used to set video options for video assets returned as part of a native ad. If an ad contains a video(if `ad.mediaContent.hasVideoContent = true`), display the video.
539+
| Property | Type | Description |
540+
|:---------|:-----|:----------- |
541+
| `returnUrlsForImageAssets` | `boolean` | _Optional_: If set to `true`, the SDK will not load image asset content and native ad image URLs can be used to fetch content. Defaults to `false`. |
542+
| `multipleImages` | `boolean`| _Optional_: Some image assets contain a series of images. Setting this property to `true` tells the app to display all the images of an asset. The `false`(the default) value informs the app to display the first image from the series of images in an image asset. |
543+
| `adChoicesPlacement` | [AdChoicesPlacement](#adchoicesplacement) |_Optional_: The [AdChoices overlay](https://developers.google.com/admob/android/native/advanced#adchoices_overlay) is set to the top right corner by default. Apps can change which corner this overlay is rendered in by setting this property to one of the following: |
544+
| `videoOptions` | [videoOptions](#videooptions)| _Optional_: Used to set video options for video assets returned as part of a native ad. If an ad contains a video(if `ad.mediaContent.hasVideoContent = true`), display the video. |
517545
| `mediaAspectRatio` | [MediaAspectRatio](#mediaaspectratio) | _Optional_: This sets the aspect ratio for image or video to be returned for the native ad.
518546

519547
#### AdChoicesPlacement
@@ -530,11 +558,11 @@ enum AdChoicesPlacement {
530558
#### videoOptions
531559

532560
The `videoOptions` property is an object with the following properties:
533-
| Property | Type | Optional
534-
|:---------|:----|:-------
535-
| `startMuted` | `boolean` | _Yes_
536-
| `clickToExpandRequested` | `boolean` | _Yes_
537-
| `customControlsRequested` | `boolean` | _Yes_
561+
| Property | Type | Optional |
562+
|:---------|:----|:------- |
563+
| `startMuted` | `boolean` | _Yes_ |
564+
| `clickToExpandRequested` | `boolean` | _Yes_ |
565+
| `customControlsRequested` | `boolean` | _Yes_ |
538566

539567
#### MediaAspectRatio
540568

@@ -561,7 +589,11 @@ Rewarded ads are ads that users have the option of interacting with [in exchange
561589

562590
### Testing Rewarded ads in development mode
563591

564-
> **Note:** When developing your app, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.
592+
:::tip Note
593+
594+
When developing your app, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account. Make sure you replace the test unit ID with your ad unit ID before publishing your app.
595+
596+
:::
565597

566598
To enable dedicated test ad unit ID, visit the links below:
567599

@@ -584,15 +616,17 @@ Create a Rewarded ad instance by calling the `createForAdRequest` static method
584616

585617
```ts
586618
import { RewardedAd } from '@nativescript/firebase-admob'
587-
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
619+
620+
const ad = RewardedAd.createForAdRequest('ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy')
588621
```
589622

590623
3. Listen to the ad lifecycle events
591624
Before you call the `load` method to load the ad, call the `onAdEvent` method passing it a callback function to handle the ad events.
592625

593626
```ts
594627
import { RewardedAd } from '@nativescript/firebase-admob'
595-
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
628+
629+
const ad = RewardedAd.createForAdRequest('ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy')
596630

597631
ad.onAdEvent((event, error, data) => {
598632
if (event === AdEventType.LOADED) {
@@ -608,7 +642,8 @@ ad.onAdEvent((event, error, data) => {
608642

609643
```ts
610644
import { RewardedAd } from '@nativescript/firebase-admob'
611-
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
645+
646+
const ad = RewardedAd.createForAdRequest('ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy')
612647

613648
ad.onAdEvent((event, error, data) => {
614649
if (event === AdEventType.LOADED) {
@@ -626,7 +661,8 @@ To show the ad on the screen, call the `show()` method on the ad instance.
626661

627662
```ts
628663
import { RewardedAd } from '@nativescript/firebase-admob'
629-
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
664+
665+
const ad = RewardedAd.createForAdRequest('ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy')
630666

631667
ad.onAdEvent((event, error, data) => {
632668
if (event === AdEventType.LOADED) {
@@ -674,6 +710,7 @@ The following example indicates that you want your content treated as child-dire
674710

675711
```ts
676712
import { Admob, RequestConfiguration } from '@nativescript/firebase-admob'
713+
677714
const requestConfiguration: RequestConfiguration = {
678715
tagForChildDirectedTreatment: true
679716
}
@@ -688,6 +725,7 @@ The following example indicates that you want TFUA included in your ad request.
688725

689726
```ts
690727
import { Admob, RequestConfiguration } from '@nativescript/firebase-admob'
728+
691729
const requestConfiguration: RequestConfiguration = {
692730
tagForUnderAgeOfConsent: true
693731
}
@@ -715,6 +753,7 @@ import {
715753
MaxAdContentRating,
716754
RequestConfiguration
717755
} from '@nativescript/firebase-admob'
756+
718757
const requestConfiguration: RequestConfiguration = {
719758
maxAdContentRating: MaxAdContentRating.G
720759
}

0 commit comments

Comments
 (0)