From the command prompt go to your app's root folder and execute:
tns plugin add nativescript-admob
⚠️ ⚠️ ⚠️ Important! Since version 4.0.0 it's required you to do this - or your app will crash on start-up!⚠️
Open your App_Resources/iOS/Info.plist file and add this (replace the value by the actual App ID of your app!):
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-9517346003011652~2508636525</string>Also, run pod repo update from a Terminal, otherwise the required Pod version may not be available on your system.
⚠️ ⚠️ ⚠️ Important! Plugin version 3.0.0+ requires you to do this - or your app will crash on start-up!⚠️
Open your App_Resources/Android/AndroidManifest.xml file and add this meta-data line at the right spot (and replace the value by the actual App ID of your app!):
<application>
<!-- this line needs to be added (replace the value!) -->
<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~3347511713" />
<activity></activity>
</application>If you want a quickstart, clone our demo app.
Here are the supported functions:
import { AD_SIZE, createBanner, hideBanner } from "nativescript-admob";
import { isIOS } from "tns-core-modules/platform";
const testing = true;
createBanner({
// if this 'view' property is not set, the banner is overlayed on the current top most view
// view: ..,
size: AD_SIZE.SMART_BANNER,
iosBannerId: "ca-app-pub-9517346003011652/3985369721",
androidBannerId: testing
? "ca-app-pub-3940256099942544/6300978111" // global test banner id
: "ca-app-pub-9517346003011652/7749101329", // our registered banner id
// Android automatically adds the connected device as test device with testing:true, iOS does not
// iosTestDeviceIds: ["yourTestDeviceUDIDs", "canBeAddedHere"],
margins: {
// if both are set, top wins
// top: 10
bottom: isIOS ? 50 : 0
},
keywords: ["foo", "bar"]
}).then(
() => this.message = "Banner created",
error => this.message = "Error creating banner: " + error
)var admob = require("nativescript-admob");
admob.createBanner({
// if this 'view' property is not set, the banner is overlayed on the current top most view
// view: ..,
testing: true, // set to false to get real banners
size: size, // anything in admob.AD_SIZE, like admob.AD_SIZE.SMART_BANNER
iosBannerId: "ca-app-pub-XXXXXX/YYYYYY", // add your own
androidBannerId: "ca-app-pub-AAAAAAAA/BBBBBBB", // add your own
// Android automatically adds the connected device as test device with testing:true, iOS does not
iosTestDeviceIds: ["yourTestDeviceUDIDs", "canBeAddedHere"],
margins: {
// if both are set, top wins
//top: 10
bottom: 50
},
keywords: ["keyword1", "keyword2"] // add keywords for ad targeting
}).then(
function() {
console.log("admob createBanner done");
},
function(error) {
console.log("admob createBanner error: " + error);
}
)Note that you can trigger the function above at any moment, and since version 1.1.4
of this plugin you can even call it from the Page.loaded event.
NOTE: If you want to show a different banner than the one showing you don't need to call hideBanner
since createBanner will do that for you to prevent your app from crashing.
// the .then(.. bit is optional btw
admob.hideBanner().then(
function() {
console.log("admob hideBanner done");
},
function(error) {
console.log("admob hideBanner error: " + error);
}
)To show a fullscreen ad, you can use this function. Note that Interstitial banners need to be loaded before they can be shown, and there are two ways to do that:
- Use
createInterstitialand have the plugin automatically preload the ad and show it when loaded. This is not recommended because there's a delay the user may notice. - (Since plugin version 2.0.0) Use
preloadInterstitial, and (at any time after its Promise resolves)showInterstitial. This will hide the preloading delay for your users. Note that the parameters ofcreateInterstitialandpreloadInterstitialare exactly the same so migration should be easy.
If you want to get notified when an interstitial is closed, provide an onAdClosed callback as shown below.
Again, not recommended.
admob.createInterstitial({
testing: true,
iosInterstitialId: "ca-app-pub-XXXXXX/YYYYY2", // add your own
androidInterstitialId: "ca-app-pub-AAAAAAAA/BBBBBB2", // add your own
// Android automatically adds the connected device as test device with testing:true, iOS does not
iosTestDeviceIds: ["ce97330130c9047ce0d4430d37d713b2"],
keywords: ["keyword1", "keyword2"], // add keywords for ad targeting
onAdClosed: function () { console.log("interstitial closed") }
}).then(
function() {
console.log("admob createInterstitial done");
},
function(error) {
console.log("admob createInterstitial error: " + error);
}
)Use this for instance while loading your view, so it's ready for the moment you want to actually show it (by calling showInterstitial).
Note that the parameters are identical to createInterstitial.
admob.preloadInterstitial({
testing: true,
iosInterstitialId: "ca-app-pub-XXXXXX/YYYYY2", // add your own
androidInterstitialId: "ca-app-pub-AAAAAAAA/BBBBBB2", // add your own
// Android automatically adds the connected device as test device with testing:true, iOS does not
iosTestDeviceIds: ["ce97330130c9047ce0d4430d37d713b2"],
keywords: ["keyword1", "keyword2"], // add keywords for ad targeting
onAdClosed: function () { console.log("interstitial closed") }
}).then(
function() {
console.log("interstitial preloaded - you can now call 'showInterstitial' whenever you're ready to do so");
},
function(error) {
console.log("admob preloadInterstitial error: " + error);
}
)At any moment after preloadInterstitial successfully resolves, you can call showInterstitial.
Note that when you want to use showInterstitial again, you also have to use preloadInterstitial again because those ads can't be reused.
admob.showInterstitial().then(
function() {
// this will resolve almost immediately, and the interstitial is shown without a delay because it was already loaded
console.log("interstitial showing");
},
function(error) {
console.log("admob showInterstitial error: " + error);
}
)Use this for instance while loading your view, so it's ready for the moment you want to actually show it (by calling showRewardedVideoAd).
admob.preloadRewardedVideoAd({
testing: true,
iosAdPlacementId: "ca-app-pub-XXXXXX/YYYYY2", // add your own
androidAdPlacementId: "ca-app-pub-AAAAAAAA/BBBBBB2", // add your own
keywords: ["keyword1", "keyword2"], // add keywords for ad targeting
}).then(
function() {
console.log("RewardedVideoAd preloaded - you can now call 'showRewardedVideoAd' whenever you're ready to do so");
},
function(error) {
console.log("admob preloadRewardedVideoAd error: " + error);
}
)At any moment after preloadRewardedVideoAd successfully resolves, you can call showRewardedVideoAd.
Note that when you want to use showRewardedVideoAd again, you also have to use preloadRewardedVideoAd again because those ads can't be reused.
onRewarded is probably the only callback you need to worry about.
admob.showRewardedVideoAd({
onRewarded: (reward) => {
console.log("onRewarded");
this.message = "watched rewarded video";
},
onRewardedVideoAdLeftApplication: () => console.log("onRewardedVideoAdLeftApplication"),
onRewardedVideoAdClosed: () => console.log("onRewardedVideoAdClosed"),
onRewardedVideoAdOpened: () => console.log("onRewardedVideoAdOpened"),
onRewardedVideoStarted: () => console.log("onRewardedVideoStarted"),
onRewardedVideoCompleted: () => console.log("onRewardedVideoCompleted"),
}).then(
function() {
console.log("RewardedVideoAd showing");
},
function(error) {
console.log("admob showRewardedVideoAd error: " + error);
}
)Need a little more help getting started? Check out these tutorials for using Admob in a NativeScript Android and iOS application.