Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit f207f72

Browse files
authoredMar 23, 2023
wip(firebase-admob): README update (#185)
* chore(firebase-admob): README update * chore: update * chore: update * chore: Banner ad content update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update
1 parent 90934cc commit f207f72

File tree

1 file changed

+352
-219
lines changed

1 file changed

+352
-219
lines changed
 

‎packages/firebase-admob/README.md

Lines changed: 352 additions & 219 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,76 @@
11

22
# @nativescript/firebase-admob
33

4+
A plugin that allows you to monetize your NativeScript app by integrating the [Google Mobile Ads SDK](https://developers.google.com/admob/android/sdk) into the app.
5+
6+
> **Note:** Before you use this plugin, if you haven't already, setup your app for Firebase by following the instructions at [@nativescript/firebase-core](../firebase-core/).
7+
8+
The `@nativescript/firebase-admob` plugin currently supports loading and displaying the following ad types:
9+
10+
- [Banner](#banner-ads)
11+
- [Interstitial (full-screen)](#interstitial-ad)
12+
- [Native](#native-ads)
13+
- [Rewarded](#rewarded-ads)
14+
15+
## Contents
16+
* [Installation](#installation)
17+
* [Setup Admob for iOS](#setup-admob-for-ios)
18+
* [Setup Admob for Android](#setup-admob-for-android)
19+
* [Use @nativescript/firebase-admob](#use-nativescriptfirebase-admob)
20+
* [Initialize the Mobile Ads SDK](#1-initialize-the-mobile-ads-sdk)
21+
* [Add your preferred ad format to the app](#2-add-your-preferred-ad-format-to-the-app)
22+
* [Banner ads](#banner-ads)
23+
* [Testing Banner ads in development mode](#testing-banner-ads-in-development-mode)
24+
* [Instantiate a Banner ad](#instantiate-a-banner-ad)
25+
* [Add Banner ad in NativeScript Core](#add-banner-ad-in-nativescript-core)
26+
* [Add Banner ad in NativeScript Angular](#add-banner-ad-in-nativescript-angular)
27+
* [Add Banner ad in NativeScript Vue](#add-banner-ad-in-nativescript-vue)
28+
* [Customize the banner ad size](#customize-the-banner-ad-size)
29+
* [Listen to a banner ad lifecycle events](#listen-to-a-banner-ad-lifecycle-events)
30+
* [Display a banner ad to the user](#display-a-banner-ad-to-the-user)
31+
* [Add an Interstitial ad](#add-an-interstitial-ad)
32+
* [Testing Interstitial ads in development](#testing-an-interstitial-ads-in-development)
33+
* [Display an Interstitial ad to the user](#display-an-interstitial-ad-to-the-user)
34+
* [Next steps](#next-steps)
35+
* [Native ads](#native-ads)
36+
* [Add a Native ad to your app](#add-a-native-ad-to-your-app)
37+
* [Adding a Native ad in NativeScript Core](#adding-a-native-ad-in-nativescript-core)
38+
* [Testing Native ads in development mode](#testing-native-ads-in-development-mode)
39+
* [NativeAdOptions interface](#nativeadoptions-interface)
40+
* [Next steps](#next-steps-1)
41+
* [Rewarded Ads](#rewarded-ads)
42+
* [Testing Rewarded ads in development mode](#testing-rewarded-ads-in-development-mode)
43+
* [Display a Rewarded ad](#display-a-rewarded-ad)
44+
* [Rewarded ad Events](#rewarded-ad-events)
45+
* [Targeting](#targeting)
46+
* [Child-directed setting](#child-directed-setting)
47+
* [For users under the age of consent](#for-users-under-the-age-of-consent)
48+
* [Ad content filtering](#ad-content-filtering)
49+
<!-- Note: This plugin also supports Google Ad Manager.
50+
If you are interested in creating and loading an ad with Ad Manager, follow the same prerequisites, platform setup, mobile ads SDK initialization steps outlined in this documentation. , and then see creating and loading an ad with Ad Manager for further instructions. -->
51+
<!-- WHERE are the instructions for Ad Manager? -->
52+
## Installation
53+
54+
To install `@nativescript/firebase-admob`, run the following command in the root directory of the project:
55+
456
```cli
557
npm install @nativescript/firebase-admob
658
```
759

8-
This guide is intended for publishers who want to monetize a NativeScript app.
9-
10-
Integrating Google Mobile Ads SDK into a NativeScript app, which you will do here, is the first step towards displaying AdMob ads and earning revenue. Once the integration is complete, you can choose an ad format to get detailed implementation steps.
11-
12-
The Google Mobile Ads SDK for NativeScript currently supports loading and displaying banner, interstitial (full-screen), native ads, and rewarded ads.
13-
14-
Note: This plugin also contains support for Google Ad Manager. If you are interested in creating and loading an Ad with Ad Manager, you may follow the same prerequisites, platform setup, mobile ads SDK initialization steps outlined in this doc, and then see creating and loading an ad with Ad Manager for further instructions.
15-
16-
## Setup
60+
## Setup Admob for iOS
1761

18-
### iOS
19-
20-
Update your Info.plist
21-
22-
- A GADApplicationIdentifier key with a string value of your AdMob app ID ([identified in the AdMob UI](https://support.google.com/admob/answer/7356431)).
62+
Update your `Info.plist` file at `App_Resources/iOS` with a `GADApplicationIdentifier` key with a string value of your AdMob app ID ([identified in the AdMob UI](https://support.google.com/admob/answer/7356431)).
2363

2464
```xml
2565
<key>GADApplicationIdentifier</key>
2666
<string>ca-app-pub-3940256099942544~1458002511</string>
2767
```
2868

29-
See https://developers.google.com/admob/ios/quick-start#update\_your\_infoplist for more information about configuring Info.plist and setting up your App ID.
30-
31-
### Android
69+
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).
3270

33-
Update AndroidManifest.xml
71+
## Setup Admob for Android
3472

35-
The AdMob App ID must be included in the AndroidManifest.xml. Failure to do so will result in a crash on launch of an app.
36-
37-
Add the AdMob App ID (identified in the AdMob UI) to the app's AndroidManifest.xml file by adding a `<meta-data>` tag with name com.google.android.gms.ads.APPLICATION_ID, as shown below. You can find your App ID in the AdMob UI. For android:value insert your own AdMob App ID in quotes, as shown below.
73+
Add AdMob App ID ([identified in the AdMob UI](https://support.google.com/admob/answer/7356431)) to the app's `AndroidManifest.xml` file, found at `App_Resources/Android/src/main`. Failure to do so will result in a crash on app launch. Add the ID by adding a `<meta-data>` tag with name `com.google.android.gms.ads.APPLICATION_ID`, as shown below. For `android:value` insert your own AdMob App ID in quotes.
3874

3975
```xml
4076
<application>
@@ -46,66 +82,76 @@ Add the AdMob App ID (identified in the AdMob UI) to the app's AndroidManifest.x
4682
</application>
4783
```
4884

49-
See [here](https://developers.google.com/admob/android/quick-start#update_your_androidmanifestxml) for more information about configuring AndroidManifest.xml and setting up the App ID.
85+
See step 3. of [Configure your app](https://developers.google.com/admob/android/quick-start#import_the_mobile_ads_sdk) for more information about configuring AndroidManifest.xml and setting up the App ID.
86+
87+
## Use @nativescript/firebase-admob
5088

51-
## Usage
89+
To use the `@nativescript/firebase-admob` plugin, follow the steps below:
5290

53-
### Initialize the Mobile Ads SDK
91+
### 1. Initialize the Mobile Ads SDK
5492

55-
Before loading ads, have your app initialize the Mobile Ads SDK by calling MobileAds.instance.initialize() which initializes the SDK and returns a Future that finishes once initialization is complete (or after a 30-second timeout). This needs to be done only once, ideally right before running the app.
93+
Before loading ads, initialize the Mobile Ads SDK by calling the static [init](#init) method on the Admob class. Call this method once, ideally right before the app boots, in the `main.ts` file.
5694

5795
```ts
5896
import { Admob } from '@nativescript/firebase-admob'
5997

6098
Admob.init()
6199
```
62100

63-
### Select an Ad Format
101+
### 2. Add your preferred ad format to the app
64102

65-
The Mobile Ads SDK is now imported and you're ready to implement an ad. AdMob offers a number of different ad formats, so you can choose the one that best fits your app's user experience.
103+
The Mobile Ads SDK is now imported and you're ready to implement an ad. Click any of the links below to get detailed implementation steps for your desired ad format.
66104

67-
- Banner
68-
- Rectangular ads that appear at the top or bottom of the device screen. Banner ads stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time. If you're new to mobile advertising, they're a great place to start.
69-
- Interstitial
70-
- Full-screen ads that cover the interface of an app until closed by the user. They're best used at natural pauses in the flow of an app's execution, such as between levels of a game or just after a task is completed.
71-
- Native Ads
72-
- Customizable ads that match the look and feel of your app. You decide how and where they're placed, so the layout is more consistent with your app's design.
73-
- Rewarded
74-
- Ads that reward users for watching short videos and interacting with playable ads and surveys. Good for monetizing free-to-play users.
105+
- [Banner](#add-a-banner-ad)
106+
- [Interstitial (full-screen)](#interstitial-ad)
107+
- [Native](#native-ads)
108+
- [Rewarded](#rewarded-ads)
75109

76-
### Banner Ads
110+
### Banner ads
77111

78-
Banner ads occupy a spot within an app's layout, either at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time.
112+
Banner ads are rectangular ads that appear at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period. If you're new to mobile advertising, they're a great place to start.
79113

80-
#### Always test with test ads
114+
#### Testing Banner ads in development mode
81115

82-
When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.
116+
>**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.
83117
84-
The easiest way to load test ads is to use our dedicated test ad unit ID for banners:
118+
To enable dedicated test ad unit ID for banners, visit the links below:
85119

86-
- **Android**: https://developers.google.com/admob/android/test-ads#sample\_ad\_units
87-
- **iOS**: https://developers.google.com/admob/ios/test-ads#demo\_ad\_units
120+
- [Android demo units](https://developers.google.com/admob/android/test-ads#demo_ad_units)
121+
- [iOS demo units](https://developers.google.com/admob/ios/test-ads#demo_ad_units)
88122

89-
It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.
90123

91-
#### Instantiate a Banner Ad
124+
Below are examples of adding a Banner ad in several NativeScript flavors.
92125

93-
A `BannerAd` requires an `unitId`, an `BannerAdSize`, an `AdRequest`, and a `BannerAdListener`. An example is shown below as well as more information on each parameter following.
126+
#### Add Banner ad in NativeScript Core
94127

95-
#### Core
128+
Register the plugin namespace in the Page element under a prefix(`ui` for example), access the `BannerAd` view from the namespace via the prefix and add it to your XML.
96129

97-
> **Important:** Ensure you've included xmlns:ui="@nativescript/firebase-admob" on the Page element
130+
The `BannerAd` requires the following attributes to be set:
131+
- `unitId`
132+
- `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)
133+
- `height` and `width`
134+
135+
<!-- - `AdRequest`
136+
- `BannerAdListener` -->
98137

99138
```xml
100-
<ui:BannerAd
101-
height="100"
102-
width="100"
103-
unitId="{{bannerAdUnit}}"
104-
layoutChanged="{{bannerLoaded}}"
139+
<Page xmlns:ui="@nativescript/firebase-admob" >
140+
141+
<StackLayout>
142+
<ui:BannerAd
143+
height="100"
144+
width="100"
145+
unitId="{{bannerAdUnit}}"
146+
layoutChanged="{{bannerLoaded}}"
105147
/>
148+
</StackLayout>
149+
106150
```
107151

108-
#### Angular
152+
#### Add Banner ad in NativeScript Angular
153+
154+
Register the `BannerAd` view by adding its `AdmobModule` to the `imports` array of the `@NgModule` decorator of the component where you want to use the view.
109155

110156
```ts
111157
import { AdmobModule } from '@nativescript/firebase-admob/angular';
@@ -120,6 +166,10 @@ import { AdmobModule } from '@nativescript/firebase-admob/angular';
120166
bootstrap: [AppComponent]
121167
})
122168
```
169+
Next, add the `BannerAd` view to HTML. The `BannerAd` requires the following attributes to be set:
170+
- `unitId`
171+
- `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)
172+
- `height` and `width`
123173

124174
```html
125175
<BannerAd
@@ -129,15 +179,23 @@ import { AdmobModule } from '@nativescript/firebase-admob/angular';
129179
(layoutChanged)="bannerLoaded($event)">
130180
</BannerAd>
131181
```
132-
#### Vue
182+
#### Add Banner ad in NativeScript Vue
183+
184+
Register the `BannerAd` view in the `app.ts` file as follows:
133185

134186
```ts
135-
import Vue from 'nativescript-vue'
187+
import { createApp } from 'nativescript-vue';
136188
import Admob from '@nativescript/firebase-admob/vue'
189+
import Home from './components/Home.vue';
137190

138-
Vue.use(Admob)
191+
const app = createApp(Home)
192+
app.use(Admob)
139193

140194
```
195+
And then add it to markup as follows. The `BannerAd` requires the following attributes to be set:
196+
- `unitId`
197+
- `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)
198+
- `height` and `width`
141199

142200
```html
143201
<BannerAd
@@ -147,32 +205,39 @@ Vue.use(Admob)
147205
@layoutChanged="bannerLoaded"/>
148206
```
149207

150-
#### Banner Sizes
151-
152-
The table below lists the standard banner sizes.
153-
154-
| Size in dp (WxH) | Description | AdSize Constant |
155-
| :------------------------------: | :--------------: | :--------------------------------------------------: |
156-
| 320x50 | Standard Banner | BANNER |
157-
| 320x100 | Large Banner | LARGE_BANNER |
158-
| 320x250 | Medium Rectangle | MEDIUM_RECTANGLE |
159-
| 468x60 | Full-Size Banner | FULL_BANNER |
160-
| 728x90 | Leaderboard | LEADERBOARD |
161-
| Provided width x Adaptive height | Adaptive Banner | Use createAnchoredAdaptiveBanner(width, orientation) |
162-
| Provided width x Adaptive height | Adaptive Banner | Use createInLineAdaptiveBanner(width, orientation) |
208+
#### Customize the banner ad size
163209

164-
To define a custom banner size, set your desired AdSize, as shown here:
210+
To define a custom banner size, you have 2 options:
165211

212+
- Instantiate the `BannerAdSize` class with the desired width and height and set it to the `size` attribute of `BannerAd`.
166213
```ts
214+
import { BannerAdSize } from "@nativescript/firebase-admob"
215+
167216
const adSize = new BannerAdSize(300, 50)
217+
218+
banner.size = adSize
168219
```
220+
- Set the `size` to any of the constants of the `BannerAdSize` class.
169221

170-
#### Banner Ad Events
222+
The table below lists the available constants and the sizes they represent.
171223

172-
Through the use of the emitted events, you can listen for lifecycle events, such as when an ad is loaded. This example implements each method and logs a message to the console:
173224

174-
```ts
225+
| AdSize Constant | Size in dp (WxH) | Description
226+
|:---------------|:--------------|:---------------
227+
| `BANNER` | `320x50` | Standard Banner
228+
| `LARGE_BANNER` | `320x100` | Large Banner
229+
| `MEDIUM_RECTANGLE` | `320x250` | Medium Rectangle
230+
| `FULL_BANNER` | `468x60` | Full-Size Banner
231+
| `LEADERBOARD` | `728x90` | Leaderboard
232+
| `createAnchoredAdaptiveBanner(width, orientation)`| Provided width x Adaptive height | Adaptive Banner
233+
| `createInLineAdaptiveBanner(width, orientation)` | Provided width x Adaptive height | Adaptive Banner
234+
235+
236+
#### Listen to a banner ad lifecycle events
175237

238+
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.
239+
240+
```ts
176241
const bannerView = event.object;
177242

178243
// Called when an ad is successfully received.
@@ -185,7 +250,7 @@ bannerView.on('adFailedToLoad', (args) =>{
185250
console.log('Ad failed to load: ', args.error);
186251
});
187252

188-
// Called when an ad removes an overlay that covers the screen.
253+
// Called when the user removes an overlay that covers the screen.
189254
bannerView.on('adClosed', (args) =>{
190255
console.log('Ad closed.');
191256
});
@@ -202,43 +267,73 @@ bannerView.on('adClicked', (args) =>{
202267

203268
```
204269

205-
### Load Banner Ad
270+
### Display a banner ad to the user
206271

207-
After a BannerAd is instantiated, load() must be called before it can be shown on the screen.
272+
To display a banner ad to the user, get the reference to the `BannerAd` view and call the `load` method on it.
208273

209274
```ts
210275
bannerView.load()
211276
```
212277

213-
### Interstitial Ad
278+
### Add an Interstitial ad
214279

215-
Interstitial ads are full-screen ads that cover the interface of their host app. They're typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game. When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue to its destination or close it and return to the app.
280+
Interstitial ads are full-screen ads that cover the interface of an app until closed by the user. They're best used at natural pauses in the flow of an app's execution, such as between levels of a game or just after a task is completed.
216281

217-
#### Always test with test ads
282+
#### Testing Interstitial ads in development
218283

219-
When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.
284+
>**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.
285+
To enable dedicated test ad unit ID, visit the links below:
220286

221-
The easiest way to load test ads is to use our dedicated test ad unit ID for interstitials:
287+
- [Android demo units](https://developers.google.com/admob/android/test-ads#demo_ad_units)
288+
- [iOS demo units](https://developers.google.com/admob/ios/test-ads#demo_ad_units)
222289

223-
- **Android**: https://developers.google.com/admob/android/test-ads#sample\_ad\_units
224-
- **iOS**: https://developers.google.com/admob/ios/test-ads#demo\_ad\_units
225290

226-
It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.
291+
### Display an Interstitial ad to the user
227292

228-
### Load an Interstitial Ad
293+
To display an Interstitial ad to the user, follow the steps below:
229294

230-
Loading an InterstitialAd requires an adUnitId and a optional RequestOptions. An example is shown below as well as more information on each parameter following.
295+
1. Import the `InterstitialAd` class from `@nativescript/firebase-admob`.
296+
```ts
297+
import { InterstitialAd } from '@nativescript/firebase-admob'
298+
```
299+
2. Create an Interstitial ad instance.
300+
301+
Create an Interstitial ad instance by calling the static `createForAdRequest` on the class. The `createForAdRequest` method requires an adUnitId and you can optionally pass a [RequestOptions]() object.
231302

232303
```ts
233304
import { InterstitialAd } from '@nativescript/firebase-admob'
234305
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
235306
```
307+
3. Listen to the ad lifecycle events
236308

237-
### Interstitial Ad Events
309+
To listen for the ad lifecycle events, such as when the ad is display or dismissed, call the `onAdEvent` method on the ad instance, before displaying the ad, passing it a callback function to handle the events.
238310

239-
Through the use of the emitted events, you can listen for lifecycle events, such as when the ad is shown or dismissed. Set InterstitialAd.onAdEvent before showing the ad to receive notifications for these events. This example implements each method and logs a message to the console:
311+
```ts
312+
import { InterstitialAd } from '@nativescript/firebase-admob'
313+
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
314+
315+
ad.onAdEvent((event, error, data) => {
316+
switch (event) {
317+
case AdEventType.LOADED:
318+
break
319+
case AdEventType.CLOSED:
320+
break
321+
case AdEventType.OPENED:
322+
break
323+
case AdEventType.IMPRESSION:
324+
break
325+
case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
326+
break
327+
}
328+
})
329+
```
330+
4. Load the ad
331+
You load the ad by calling the `load` method on the ad instance.
240332

241333
```ts
334+
import { InterstitialAd } from '@nativescript/firebase-admob'
335+
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
336+
242337
ad.onAdEvent((event, error, data) => {
243338
switch (event) {
244339
case AdEventType.LOADED:
@@ -253,26 +348,38 @@ ad.onAdEvent((event, error, data) => {
253348
break
254349
}
255350
})
351+
256352
ad.load()
257353
```
258354

259-
### Display an Interstitial Ad
355+
5. Display the the ad
260356

261-
An InterstitialAd is displayed as an Overlay on top of all app content and is statically placed. Which means it can not be added to the view. You can choose when to show the ad by calling show().
357+
To display the ad, call the `show` method on the ad instance. This method is called after the `load` method.
262358

263359
```ts
360+
import { InterstitialAd } from '@nativescript/firebase-admob'
361+
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
362+
264363
ad.onAdEvent((event, error, data) => {
265-
if (event === AdEventType.LOADED) {
266-
console.log('loaded')
267-
ad.show()
268-
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
269-
console.error('InterstitialAd failed to load:', error)
364+
switch (event) {
365+
case AdEventType.LOADED:
366+
break
367+
case AdEventType.CLOSED:
368+
ad.show()
369+
break
370+
case AdEventType.OPENED:
371+
break
372+
case AdEventType.IMPRESSION:
373+
break
374+
case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
375+
break
270376
}
271377
})
378+
272379
ad.load()
273380
```
274381

275-
### Next steps
382+
#### Next steps
276383

277384
- See [Interstitial best practices](https://www.youtube.com/watch?v=r2RgFD3Apyo&index=5&list=PLOU2XLYxmsIKX0pUJV3uqp6N3NeHwHh0c) and [interstitial ad guidance](https://support.google.com/admob/answer/6066980).
278385
- Check out an [Interstitial ads case study](https://admob.google.com/home/resources/freaking-math-powers-revenue-increase-with-google-admob-support/).
@@ -282,29 +389,48 @@ ad.load()
282389

283390
Native ads are ad assets that are presented to users via UI components that are native to the platform. They're shown using the same types of views with which you're already building your layouts, and can be formatted to match the visual design of the user experience in which they live. In coding terms, this means that when a native ad loads, your app receives a NativeAd object that contains its assets, and the app (rather than the Google Mobile Ads SDK) is then responsible for displaying them.
284391

285-
Broadly speaking, there are two parts to successfully implementing Native Ads: loading an ad via the SDK and displaying the ad content in your app. This guide is concerned with using the SDK to load native ads.
286392

287-
#### Core
393+
### Adding a Native ad in NativeScript Core
394+
To add a Native ad to your {N} Core app, follow these steps:
288395

289-
> **Important:** Ensure you've included `xmlns:ui="@nativescript/firebase-admob"` on the Page element
396+
1. Register the plugin namespace under a prefix, `ui` (this can be any name), with the Page element.
290397

291398
```xml
292-
<ui:NativeAdView height="400" loaded="{{nativeAdLoaded}}" />
399+
<Page xmlns:ui="@nativescript/firebase-admob" >
400+
401+
</Page>
293402
```
403+
2. Use the prefix to access the `NativeAdView` and add it to markup.
404+
405+
```xml
406+
<Page xmlns:ui="@nativescript/firebase-admob" >
407+
<ActionBar title="Admob" />
408+
<StackLayout>
294409

295-
### Always test with test ads
410+
<ui:NativeAdView height="400" loaded="{{nativeAdLoaded}}" />
411+
412+
</StackLayout>
413+
</Page>
414+
```
296415

297-
When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.
416+
### Testing Native ads in development mode
298417

299-
The easiest way to load test ads is to use our dedicated test ad unit ID for native ads:
418+
>**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.
300419
301-
- **Android**: https://developers.google.com/admob/android/test-ads#sample\_ad\_units
302-
- **iOS**: https://developers.google.com/admob/ios/test-ads#demo\_ad\_units
303-
It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.
420+
To enable dedicated test ad unit ID, visit the links below:
304421

305-
### Instantiate a Native Ad
422+
- [Android demo units](https://developers.google.com/admob/android/test-ads#demo_ad_units)
423+
- [iOS demo units](https://developers.google.com/admob/ios/test-ads#demo_ad_units)
424+
425+
3. Import the `NativeAdLoader` class from `@nativescript/firebase-admob` in the view model file.
426+
427+
```ts
428+
import { NativeAdLoader } from '@nativescript/firebase-admob'
429+
```
430+
The `NativeAdLoader` class is an interface for managing the the Native ad.
306431

307-
A NativeAdLoader requires an adUnitId, an optional RequestOptions, an AdRequest, and an optional NativeAdOptions. An example is shown below as well as more information on each parameter following.
432+
4. Instantiate `NativeAdLoader`.
433+
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.
308434

309435
```ts
310436
const loader = new NativeAdLoader('ca-app-pub-3940256099942544/3986624511', null, {
@@ -314,12 +440,12 @@ const loader = new NativeAdLoader('ca-app-pub-3940256099942544/3986624511', null
314440
})
315441
```
316442

317-
#### Native Ad Events
443+
5. Listen to the Native ad lifecycle events
318444

319-
Through the use of NativeAdListener, you can listen for lifecycle events, such as when an ad is closed or the user leaves the app. This example implements each method and logs a message to the console:
445+
To listen to the Native ad [lifecycle events](), call the `onAdEvent` method on the `NativeAdLoader` instance when the `NativeAdView` has loaded.
320446

321447
```xml
322-
<ui:NativeAdView height="400" loaded="{{nativeAdLoaded}}">
448+
<ui:NativeAdView height="400" loaded="{{ nativeAdLoaded }}">
323449
<GridLayout height="300" width="300">
324450
<Label id="headLineView" />
325451
<ui:MediaView id="mediaView" height="100%"/>
@@ -335,16 +461,17 @@ const view = event.object;
335461
loader.onAdEvent((event, error, data) => {
336462
if (event === NativeAdEventType.LOADED) {
337463
const ad = data as NativeAd;
338-
const hlv = view.getViewById('headLineView');
339-
hlv.text = ad.headline;
340-
const mv = view.getViewById('mediaView');
341-
view.mediaView = mv;
342-
mv.mediaContent = ad.mediaContent;
343-
const but = view.getViewById('callToActionView');
344-
view.callToActionView = but;
345-
but.text = ad.callToAction;
346-
const bv = view.getViewById('bodyView');
347-
bv.text = ad.body;
464+
465+
const headLineView = view.getViewById('headLineView');
466+
headLineView.text = ad.headline;
467+
const mediaView = view.getViewById('mediaView');
468+
view.mediaView = mediaView;
469+
mediaView.mediaContent = ad.mediaContent;
470+
const callToActionButton = view.getViewById('callToActionView');
471+
view.callToActionView = callToActionButton;
472+
callToActionButton.text = ad.callToAction;
473+
const bodyView = view.getViewById('bodyView');
474+
bodyView.text = ad.body;
348475
view.nativeAd = ad;
349476
console.log('nativead loaded');
350477
} else if (event === 'adFailedToLoad') {
@@ -353,62 +480,51 @@ loader.onAdEvent((event, error, data) => {
353480
});
354481
}
355482
```
356-
357-
### NativeAdOptions
358-
359-
NativeAdLoader have an optional argument, nativeAdOptions, which can be used to set specific options on the native ad.
360-
361-
returnUrlsForImageAssets
362-
363-
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.
364-
365-
multipleImages
366-
367-
Some image assets will contain a series of images rather than just one. By setting this value to true, your app indicates that it's prepared to display all the images for any assets that have more than one. By setting it to false (the default) your app instructs the SDK to provide just the first image for any assets that contain a series.
368-
369-
If no NativeadOptions are passed in when initializing a NativeAd, the default value for each property will be used.
370-
371-
`adChoicesPlacement`
372-
373-
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:
374-
375-
- AdChoicesPlacement.TOP_RIGHT
376-
- AdChoicesPlacement.TOP_LEFT
377-
- AdChoicesPlacement.BOTTOM_RIGHT
378-
- AdChoicesPlacement.BOTTOM_LEFT
379-
380-
`videoOptions`
381-
382-
Can be used to set video options for video assets returned as part of a native ad.
383-
```ts
384-
videoOptions?: {
385-
startMuted?: boolean;
386-
clickToExpandRequested?: boolean;
387-
customControlsRequested?: boolean;
388-
};
389-
```
390-
391-
Remember that if an ad contains a video, this video _must_ be shown.
483+
6. Display the Native ad
484+
To display the Native ad, call the `load` method on a NativeAdLoader instance.
392485

393486
```ts
394-
ad.mediaContent.hasVideoContent = true | false
487+
loader.load()
395488
```
396489

397-
`mediaAspectRatio`
490+
### NativeAdOptions interface
398491

399-
This sets the aspect ratio for image or video to be returned for the native ad. Setting mediaAspectRatio to one of the following constants will cause only ads with media of the specified aspect ratio to be returned:
492+
A NativeAdOptions object is used to set the following options on the native ad.
493+
| Property | Type | Description
494+
|:---------|:-----|:-----------
495+
| `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`.
496+
| `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.
497+
| `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:
498+
| `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.
499+
| `mediaAspectRatio` | [MediaAspectRatio](#mediaaspectratio) | _Optional_: This sets the aspect ratio for image or video to be returned for the native ad.
400500

401-
- MediaAspectRatio.LANDSCAPE
402-
- MediaAspectRatio.PORTRAIT
403-
- MediaAspectRatio.SQUARE
404-
- MediaAspectRatio.ANY
501+
#### AdChoicesPlacement
405502

406-
If not set, ads with any aspect ratio will be returned.
503+
```ts
504+
enum AdChoicesPlacement {
505+
TOP_LEFT = 'topLeft',
506+
TOP_RIGHT = 'topRight',
507+
BOTTOM_RIGHT = 'bottomRight',
508+
BOTTOM_LEFT = 'bottomLeft',
509+
}
510+
```
511+
#### videoOptions
407512

408-
### Load Native Ad
513+
The `videoOptions` property is an object with the following properties:
514+
| Property | Type | Optional
515+
|:---------|:----|:-------
516+
| `startMuted` | `boolean` | _Yes_
517+
| `clickToExpandRequested` | `boolean` | _Yes_
518+
| `customControlsRequested` | `boolean` | _Yes_
409519

520+
#### MediaAspectRatio
410521
```ts
411-
loader.load()
522+
enum MediaAspectRatio {
523+
LANDSCAPE = 'landscape',
524+
PORTRAIT = 'portrait',
525+
SQUARE = 'square',
526+
ANY = 'any',
527+
}
412528
```
413529

414530
That's it! Your app is now ready to display native ads.
@@ -423,36 +539,84 @@ That's it! Your app is now ready to display native ads.
423539

424540
Rewarded ads are ads that users have the option of interacting with [in exchange for in-app rewards](https://support.google.com/admob/answer/7313578).
425541

426-
### Always test with test ads
542+
### Testing Rewarded ads in development mode
543+
544+
>**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.
545+
546+
547+
To enable dedicated test ad unit ID, visit the links below:
427548

428-
When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.
549+
- [Android demo units](https://developers.google.com/admob/android/test-ads#demo_ad_units)
550+
- [iOS demo units](https://developers.google.com/admob/ios/test-ads#demo_ad_units)
429551

430-
The easiest way to load test ads is to use our dedicated test ad unit ID for rewarded:
552+
### Display a Rewarded ad
431553

432-
- **Android**: https://developers.google.com/admob/android/test-ads#sample\_ad\_units
433-
- **iOS**: https://developers.google.com/admob/ios/test-ads#demo\_ad\_units
554+
Follow these steps to display a Rewarded ad:
434555

435-
It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.
556+
1. Import the `RewardedAd` class from `@nativescript/firebase-admob`.
557+
```ts
558+
import { RewardedAd } from '@nativescript/firebase-admob'
559+
```
560+
2. Create a `RewardedAd` instance
436561

437-
### Load a Rewarded Ad
562+
Create a Rewarded ad instance by calling the `createForAdRequest` static method on the `RewardedAd` class and passing it the ad unit id.
563+
564+
```ts
565+
import { RewardedAd } from '@nativescript/firebase-admob'
566+
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
567+
```
568+
3. Listen to the ad lifecycle events
569+
Before you call the `load` method to load the ad, call the `onAdEvent` method passing it a callback function to handle the ad events.
438570

439571
```ts
440572
import { RewardedAd } from '@nativescript/firebase-admob'
441573
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
574+
575+
ad.onAdEvent((event, error, data) => {
576+
if (event === AdEventType.LOADED) {
577+
console.log('rewarded', 'loaded')
578+
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
579+
console.error('loading error', error)
580+
}
581+
})
582+
```
583+
4. Load the ad
584+
To load the ad, call the `load` method on the `RewardAd` instance.
585+
586+
```ts
587+
import { RewardedAd } from '@nativescript/firebase-admob'
588+
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
589+
442590
ad.onAdEvent((event, error, data) => {
443591
if (event === AdEventType.LOADED) {
444592
console.log('rewarded', 'loaded')
445-
ad.show()
446593
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
447594
console.error('loading error', error)
448595
}
449596
})
450597
ad.load()
451598
```
599+
6. Display the ad
600+
601+
To show the ad on the screen, call the `show()` method on the ad instance.
602+
603+
```ts
604+
import { RewardedAd } from '@nativescript/firebase-admob'
605+
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
452606

453-
#### Rewarded Ad Events
607+
ad.onAdEvent((event, error, data) => {
608+
if (event === AdEventType.LOADED) {
609+
console.log('rewarded', 'loaded')
610+
ad.show()
611+
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
612+
console.error('loading error', error)
613+
}
614+
})
615+
ad.load()
616+
```
617+
#### Rewarded ad Events
454618

455-
Through the use of the emitted events, you can listen for lifecycle events, such as when the ad is shown or dismissed. Set RewardedAd.onAdEvent before showing the ad to receive notifications for these events. This example implements each method and logs a message to the console:
619+
RewardAd emits the following lifecycle events that you can listen to:
456620

457621
```ts
458622
ad.onAdEvent((event, error, data) => {
@@ -469,40 +633,16 @@ ad.onAdEvent((event, error, data) => {
469633
break
470634
}
471635
})
472-
ad.load()
473-
```
474-
475-
#### Display a RewardedAd
476-
477-
A RewardedAd is displayed as an Overlay is displayed on top of all app content and is statically placed. Which means it can not be displayed this way can't be added to the view. You can choose when to show the ad by calling show(). onAdEvent with the event ('rewarded_earned_reward') is invoked when the user earns a reward. Be sure to implement this and reward the user for watching an ad.
478-
479-
```ts
480-
ad.onAdEvent((event, error, data) => {
481-
if (event === AdEventType.LOADED) {
482-
console.log('rewarded', 'loaded')
483-
ad.show()
484-
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
485-
console.error('loading error', error)
486-
} else if (event === RewardedAdEventType.EARNED_REWARD) {
487-
const rewardItem = data
488-
}
489-
})
490-
ad.load()
491636
```
637+
`onAdEvent` with the event `rewarded_earned_reward`'is invoked when the user earns a reward. Be sure to implement this and reward the user for watching an ad.
492638

493639
### Targeting
494640

495-
The RequestConfiguration object collects the global configuration for every ad request and is applied by firebase().admob().setRequestConfiguration().
496-
497-
### Child-directed setting
641+
The RequestConfiguration object collects the global configuration for every ad request and is applied by `firebase().admob().setRequestConfiguration()`.
498642

499-
For purposes of the [Children's Online Privacy Protection Act (COPPA)](https://www.ftc.gov/tips-advice/business-center/privacy-and-security/children%27s-privacy), there is a setting called "tag for child-directed treatment."
643+
### Child-directed ads setting
644+
For child-directed ads setting, read [Child-directed setting](https://developers.google.com/admob/android/targeting#child-directed_setting).
500645

501-
As an app developer, you can indicate whether you want Google to treat your content as child-directed when you make an ad request. If you indicate that you want Google to treat your content as child-directed, we take steps to disable IBA and remarketing ads on that ad request. The setting can be used with all versions of the Google Play services SDK via RequestConfiguration.tagForChildDirectedTreatment:
502-
503-
Use the argument `tagForChildDirectedTreatment: true` to indicate that you want your content treated as child-directed for the purposes of COPPA.
504-
Use the argument `tagForChildDirectedTreatment: false` to indicate that you don't want your content treated as child-directed for the purposes of COPPA.
505-
Use the argument `tagForChildDirectedTreatment: undefined` or do not set this tag if you do not wish to indicate how you would like your content treated with respect to COPPA in ad requests.
506646
The following example indicates that you want your content treated as child-directed for purposes of COPPA:
507647

508648
```ts
@@ -513,18 +653,11 @@ const requestConfiguration: RequestConfiguration = {
513653
Admob.getInstance().requestConfiguration = requestConfiguration;
514654
```
515655

516-
### Users under the age of consent
517-
518-
You can mark your ad requests to receive treatment for users in the European Economic Area (EEA) under the age of consent. This feature is designed to help facilitate compliance with the [General Data Protection Regulation (GDPR)](https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32016R0679). Note that you may have other legal obligations under GDPR. Please review the European Union’s guidance and consult with your own legal counsel. Please remember that Google's tools are designed to facilitate compliance and do not relieve any particular publisher of its obligations under the law. [Learn more about how the GDPR affects publishers](https://support.google.com/admob/answer/7666366).
519-
520-
When using this feature, a Tag For Users under the Age of Consent in Europe (TFUA) parameter will be included in the ad request. This parameter disables personalized advertising, including remarketing, for that specific ad request. It also disables requests to third-party ad vendors, such as ad measurement pixels and third-party ad servers.
521-
522-
The setting can be used via RequestConfiguration.tagForUnderAgeOfConsent
656+
### Handle ads requests for users under the age of consent
523657

524-
Use the argument `tagForUnderAgeOfConsent: true` to indicate that you want the request configuration to be handled in a manner suitable for users under the age of consent.
525-
Use the argument `tagForUnderAgeOfConsent: false` to indicates that you don't want the request configuration to be handled in a manner suitable for users under the age of consent.
526-
Use the argument `tagForUnderAgeOfConsent: undefined` or do not set this tag to indicate that you have not specified whether the ad request should receive treatment for users in the European Economic Area (EEA) under the age of consent. The following example indicates that you want TFUA included in your ad request:
658+
To handle ads requests for users under the age of consent, read [Users under the age of consent](https://developers.google.com/admob/android/targeting#users_under_the_age_of_consent).
527659

660+
The following example indicates that you want TFUA included in your ad request.
528661
```ts
529662
import { Admob, RequestConfiguration } from '@nativescript/firebase-admob';
530663
const requestConfiguration: RequestConfiguration = {
@@ -533,11 +666,11 @@ const requestConfiguration: RequestConfiguration = {
533666
Admob.getInstance().requestConfiguration = requestConfiguration;
534667
```
535668

536-
The tags to enable the Child-directed setting and `tagForUnderAgeOfConsent` should not both simultaneously be set to true. If they are, the child-directed setting takes precedence.
669+
If the tags to enable the Child-directed setting and `tagForUnderAgeOfConsent`are both set to `true`, the child-directed setting takes precedence.
537670

538-
### Ad Content Filtering
671+
### Ad content filtering
539672

540-
The setting can be set via RequestConfiguration.maxAdContentRating:
673+
This setting can be set via `RequestConfiguration.maxAdContentRating`:
541674

542675
AdMob ads returned for these requests have a content rating at or below that level. The possible values for this network extra are based on [digital content label classifications](https://support.google.com/admob/answer/7562142), and should be one of the following MaxAdContentRating objects:
543676

@@ -546,7 +679,7 @@ AdMob ads returned for these requests have a content rating at or below that lev
546679
- MaxAdContentRating.T
547680
- MaxAdContentRating.MA
548681

549-
The following code configures a `RequestConfiguration` object to specify that ad content returned should correspond to a digital content label designation no higher than G:
682+
The following code configures a `RequestConfiguration` object to specify that an ad content returned should correspond to a digital content label designation no higher than G:
550683

551684
```ts
552685
import { Admob, MaxAdContentRating, RequestConfiguration } from '@nativescript/firebase-admob';

0 commit comments

Comments
 (0)
Please sign in to comment.