Home

Awesome

NativeScript AdMob plugin

NPM version Downloads Twitter Follow

Installation

From the command prompt go to your app's root folder and execute:

tns plugin add nativescript-admob

iOS

⚠️ ⚠️ ⚠️ 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.

Android

⚠️ ⚠️ ⚠️ 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>

BANNER

If you want a quickstart, clone our demo app.

Here are the supported functions:

createBanner

TypeScript

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
)

JavaScript

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.

hideBanner

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);
      }
)

INTERSTITIAL

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:

If you want to get notified when an interstitial is closed, provide an onAdClosed callback as shown below.

createInterstitial

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);
      }
)

preloadInterstitial

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);
      }
)

showInterstitial

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);
      }
)

preloadRewardedVideoAd

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);
      }
)

showRewardedVideoAd

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);
      }
)

Tutorials

Need a little more help getting started? Check out these tutorials for using Admob in a NativeScript Android and iOS application.