Skip to content

Commit fd0e73e

Browse files
rigor789rigor789
authored
chore: update readme
1 parent 0ffc313 commit fd0e73e

File tree

1 file changed

+117
-110
lines changed

1 file changed

+117
-110
lines changed

‎packages/firebase-admob/README.md‎

Lines changed: 117 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
12
# @nativescript/firebase-admob
23

3-
```javascript
4+
```cli
45
ns plugin add @nativescript/firebase-admob
56
```
67

@@ -20,7 +21,7 @@ Update your Info.plist
2021

2122
- A GADApplicationIdentifier key with a string value of your AdMob app ID ([identified in the AdMob UI](https://support.google.com/admob/answer/7356431)).
2223

23-
```cli
24+
```xml
2425
<key>GADApplicationIdentifier</key>
2526
<string>ca-app-pub-3940256099942544~1458002511</string>
2627
```
@@ -33,14 +34,15 @@ Update AndroidManifest.xml
3334

3435
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.
3536

36-
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.
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.
3738

3839
```xml
39-
<application>
40-
<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
41-
<meta-data
42-
android:name="com.google.android.gms.ads.APPLICATION_ID"
43-
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
40+
<application>
41+
<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
42+
<meta-data
43+
android:name="com.google.android.gms.ads.APPLICATION_ID"
44+
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"
45+
/>
4446
</application>
4547
```
4648

@@ -53,9 +55,9 @@ See [here](https://developers.google.com/admob/android/quick-start#update_your_a
5355
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.
5456

5557
```ts
56-
import { Admob } from '@nativescript/firebase-admob';
58+
import { Admob } from '@nativescript/firebase-admob'
5759

58-
Admob.init();
60+
Admob.init()
5961
```
6062

6163
### Select an Ad Format
@@ -97,7 +99,12 @@ A `BannerAd` requires an `unitId`, an `BannerAdSize`, an `AdRequest`, and a `Ban
9799
Ensure you've included xmlns:ui="@nativescript/firebase-admob" on the Page element
98100

99101
```xml
100-
<ui:BannerAd height="100" width="100" unitId="{{bannerAdUnit}}" layoutChanged="{{bannerLoaded}}"/>
102+
<ui:BannerAd
103+
height="100"
104+
width="100"
105+
unitId="{{bannerAdUnit}}"
106+
layoutChanged="{{bannerLoaded}}"
107+
/>
101108
```
102109

103110
#### Angular
@@ -119,30 +126,30 @@ import { AdmobModule } from '@nativescript/firebase-admob/angular';
119126
#### Vue
120127

121128
```ts
122-
import Vue from 'nativescript-vue';
123-
import Admob from '@nativescript/firebase-admob/vue';
129+
import Vue from 'nativescript-vue'
130+
import Admob from '@nativescript/firebase-admob/vue'
124131

125-
Vue.use(Admob);
132+
Vue.use(Admob)
126133
```
127134

128135
#### Banner Sizes
129136

130137
The table below lists the standard banner sizes.
131138

132-
| Size in dp (WxH) | Description | AdSize Constant |
133-
| :------------------------------: | :--------------: | :--------------------------------------------: |
134-
| 320x50 | Standard Banner | BANNER |
135-
| 320x100 | Large Banner | LARGE_BANNER |
136-
| 320x250 | Medium Rectangle | MEDIUM_RECTANGLE |
137-
| 468x60 | Full-Size Banner | FULL_BANNER |
138-
| 728x90 | Leaderboard | LEADERBOARD |
139+
| Size in dp (WxH) | Description | AdSize Constant |
140+
| :------------------------------: | :--------------: | :--------------------------------------------------: |
141+
| 320x50 | Standard Banner | BANNER |
142+
| 320x100 | Large Banner | LARGE_BANNER |
143+
| 320x250 | Medium Rectangle | MEDIUM_RECTANGLE |
144+
| 468x60 | Full-Size Banner | FULL_BANNER |
145+
| 728x90 | Leaderboard | LEADERBOARD |
139146
| Provided width x Adaptive height | Adaptive Banner | Use createAnchoredAdaptiveBanner(width, orientation) |
140-
| Provided width x Adaptive height | Adaptive Banner | Use createInLineAdaptiveBanner(width, orientation) |
147+
| Provided width x Adaptive height | Adaptive Banner | Use createInLineAdaptiveBanner(width, orientation) |
141148

142149
To define a custom banner size, set your desired AdSize, as shown here:
143150

144151
```ts
145-
const adSize = new BannerAdSize(300, 50);
152+
const adSize = new BannerAdSize(300, 50)
146153
```
147154

148155
#### Banner Ad Events
@@ -185,7 +192,7 @@ bannerView.on('adClicked', (args) =>{
185192
After a BannerAd is instantiated, load() must be called before it can be shown on the screen.
186193

187194
```ts
188-
bannerView.load();
195+
bannerView.load()
189196
```
190197

191198
### Interstitial Ad
@@ -208,8 +215,8 @@ It's been specially configured to return test ads for every request, and you're
208215
Loading an InterstitialAd requires an adUnitId and a optional RequestOptions. An example is shown below as well as more information on each parameter following.
209216

210217
```ts
211-
import { InterstitialAd } from '@nativescript/firebase-admob';
212-
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910');
218+
import { InterstitialAd } from '@nativescript/firebase-admob'
219+
const ad = InterstitialAd.createForAdRequest('ca-app-pub-3940256099942544/4411468910')
213220
```
214221

215222
### Interstitial Ad Events
@@ -218,20 +225,20 @@ Through the use of the emitted events, you can listen for lifecycle events, such
218225

219226
```ts
220227
ad.onAdEvent((event, error, data) => {
221-
switch (event) {
222-
case AdEventType.LOADED:
223-
break;
224-
case AdEventType.CLOSED:
225-
break;
226-
case AdEventType.OPENED:
227-
break;
228-
case AdEventType.IMPRESSION:
229-
break;
230-
case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
231-
break;
232-
}
233-
});
234-
ad.load();
228+
switch (event) {
229+
case AdEventType.LOADED:
230+
break
231+
case AdEventType.CLOSED:
232+
break
233+
case AdEventType.OPENED:
234+
break
235+
case AdEventType.IMPRESSION:
236+
break
237+
case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
238+
break
239+
}
240+
})
241+
ad.load()
235242
```
236243

237244
### Display an Interstitial Ad
@@ -240,14 +247,14 @@ An InterstitialAd is displayed as an Overlay on top of all app content and is st
240247

241248
```ts
242249
ad.onAdEvent((event, error, data) => {
243-
if (event === AdEventType.LOADED) {
244-
console.log('loaded');
245-
ad.show();
246-
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
247-
console.error('InterstitialAd failed to load:', error);
248-
}
249-
});
250-
ad.load();
250+
if (event === AdEventType.LOADED) {
251+
console.log('loaded')
252+
ad.show()
253+
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
254+
console.error('InterstitialAd failed to load:', error)
255+
}
256+
})
257+
ad.load()
251258
```
252259

253260
### Next steps
@@ -269,7 +276,7 @@ Broadly speaking, there are two parts to successfully implementing Native Ads: l
269276
Ensure you've included xmlns:ui="@nativescript/firebase-admob" on the Page element
270277

271278
```xml
272-
<ui:NativeAdView height="400" loaded="{{nativeAdLoaded}}" />
279+
<ui:NativeAdView height="400" loaded="{{nativeAdLoaded}}" />
273280
```
274281

275282
### Always test with test ads
@@ -288,24 +295,24 @@ A NativeAdLoader requires an adUnitId, an optional RequestOptions, an AdRequest,
288295

289296
```ts
290297
const loader = new NativeAdLoader('ca-app-pub-3940256099942544/3986624511', null, {
291-
nativeAdOptions: {
292-
adChoicesPlacement: AdChoicesPlacement.TOP_RIGHT,
293-
},
294-
});
298+
nativeAdOptions: {
299+
adChoicesPlacement: AdChoicesPlacement.TOP_RIGHT
300+
}
301+
})
295302
```
296303

297304
#### Native Ad Events
298305

299306
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:
300307

301308
```xml
302-
<ui:NativeAdView height="400" loaded="{{nativeAdLoaded}}">
303-
<GridLayout height="300" width="300">
304-
<Label id="headLineView"/>
305-
<ui:MediaView id="mediaView"/>
306-
<Label id="bodyView"/>
307-
</GridLayout>
308-
</ui:NativeAdView>
309+
<ui:NativeAdView height="400" loaded="{{nativeAdLoaded}}">
310+
<GridLayout height="300" width="300">
311+
<Label id="headLineView" />
312+
<ui:MediaView id="mediaView" />
313+
<Label id="bodyView" />
314+
</GridLayout>
315+
</ui:NativeAdView>
309316
```
310317

311318
```ts
@@ -370,7 +377,7 @@ If not set, ads with any aspect ratio will be returned.
370377
### Load Native Ad
371378

372379
```ts
373-
loader.load();
380+
loader.load()
374381
```
375382

376383
That's it! Your app is now ready to display native ads.
@@ -399,17 +406,17 @@ It's been specially configured to return test ads for every request, and you're
399406
### Load a Rewarded Ad
400407

401408
```ts
402-
import { RewardedAd } from '@nativescript/firebase-admob';
403-
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313');
409+
import { RewardedAd } from '@nativescript/firebase-admob'
410+
const ad = RewardedAd.createForAdRequest('ca-app-pub-3940256099942544/1712485313')
404411
ad.onAdEvent((event, error, data) => {
405-
if (event === AdEventType.LOADED) {
406-
console.log('rewarded', 'loaded');
407-
ad.show();
408-
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
409-
console.error('loading error', error);
410-
}
411-
});
412-
ad.load();
412+
if (event === AdEventType.LOADED) {
413+
console.log('rewarded', 'loaded')
414+
ad.show()
415+
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
416+
console.error('loading error', error)
417+
}
418+
})
419+
ad.load()
413420
```
414421

415422
#### Rewarded Ad Events
@@ -418,20 +425,20 @@ Through the use of the emitted events, you can listen for lifecycle events, such
418425

419426
```ts
420427
ad.onAdEvent((event, error, data) => {
421-
switch (event) {
422-
case AdEventType.LOADED:
423-
break;
424-
case AdEventType.CLOSED:
425-
break;
426-
case AdEventType.OPENED:
427-
break;
428-
case AdEventType.IMPRESSION:
429-
break;
430-
case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
431-
break;
432-
}
433-
});
434-
ad.load();
428+
switch (event) {
429+
case AdEventType.LOADED:
430+
break
431+
case AdEventType.CLOSED:
432+
break
433+
case AdEventType.OPENED:
434+
break
435+
case AdEventType.IMPRESSION:
436+
break
437+
case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
438+
break
439+
}
440+
})
441+
ad.load()
435442
```
436443

437444
#### Display a RewardedAd
@@ -440,16 +447,16 @@ A RewardedAd is displayed as an Overlay is displayed on top of all app content a
440447

441448
```ts
442449
ad.onAdEvent((event, error, data) => {
443-
if (event === AdEventType.LOADED) {
444-
console.log('rewarded', 'loaded');
445-
ad.show();
446-
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
447-
console.error('loading error', error);
448-
} else if (event === RewardedAdEventType.EARNED_REWARD) {
449-
const rewardItem = data;
450-
}
451-
});
452-
ad.load();
450+
if (event === AdEventType.LOADED) {
451+
console.log('rewarded', 'loaded')
452+
ad.show()
453+
} else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
454+
console.error('loading error', error)
455+
} else if (event === RewardedAdEventType.EARNED_REWARD) {
456+
const rewardItem = data
457+
}
458+
})
459+
ad.load()
453460
```
454461

455462
### Targeting
@@ -468,12 +475,12 @@ Use the argument `tagForChildDirectedTreatment: undefined` or do not set this ta
468475
The following example indicates that you want your content treated as child-directed for purposes of COPPA:
469476

470477
```ts
471-
import { firebase } from '@nativescript/firebase-core';
472-
import '@nativescript/firebase-admob';
478+
import { firebase } from '@nativescript/firebase-core'
479+
import '@nativescript/firebase-admob'
473480
const requestConfiguration: RequestConfiguration = {
474-
tagForChildDirectedTreatment: true,
475-
};
476-
firebase().admob().setRequestConfiguration(requestConfiguration);
481+
tagForChildDirectedTreatment: true
482+
}
483+
firebase().admob().setRequestConfiguration(requestConfiguration)
477484
```
478485

479486
### Users under the age of consent
@@ -489,12 +496,12 @@ Use the argument `tagForUnderAgeOfConsent: false` to indicates that you don't wa
489496
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:
490497

491498
```ts
492-
import { firebase } from '@nativescript/firebase-core';
493-
import '@nativescript/firebase-admob';
499+
import { firebase } from '@nativescript/firebase-core'
500+
import '@nativescript/firebase-admob'
494501
const requestConfiguration: RequestConfiguration = {
495-
tagForUnderAgeOfConsent: true,
496-
};
497-
firebase().admob().setRequestConfiguration(requestConfiguration);
502+
tagForUnderAgeOfConsent: true
503+
}
504+
firebase().admob().setRequestConfiguration(requestConfiguration)
498505
```
499506

500507
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.
@@ -513,12 +520,12 @@ AdMob ads returned for these requests have a content rating at or below that lev
513520
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:
514521

515522
```ts
516-
import { firebase } from '@nativescript/firebase-core';
517-
import { MaxAdContentRating } from '@nativescript/firebase-admob';
523+
import { firebase } from '@nativescript/firebase-core'
524+
import { MaxAdContentRating } from '@nativescript/firebase-admob'
518525
const requestConfiguration: RequestConfiguration = {
519-
maxAdContentRating: MaxAdContentRating.G,
520-
};
521-
firebase().admob().setRequestConfiguration(requestConfiguration);
526+
maxAdContentRating: MaxAdContentRating.G
527+
}
528+
firebase().admob().setRequestConfiguration(requestConfiguration)
522529
```
523530

524531
## License

0 commit comments

Comments
 (0)