Add AdMob Banner Ads To NativeScript Apps on Load

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial I will show you how you can add banner ads to NativeScript apps on app load i.e, we will show banner ads as soon as the app loads. Showing Banner ads as soon as the app load is a great way to monetize your app. We will be working with the default app that NativeScript CLI gives us. We will be using Google AdMob as our Ad platform.

Learn More About NativeScript in my NativeScript Jumpstart For Beginners Course on Udemy.com Click here for a great discount.

Step 1) Creating a Nativescript App

We will start off by creating a new app in NativeScript. We we also make sure to navigate inside the app folder once the app is created, we will do it by running the following commands from the command prompt

 

Step 2) Add Platform to NativeScript App

Now that we have our app created we will need to add platforms to it namely Android and iOS. A thing to note here is that you will need to have Max (OS X) in order to add and build for iOS, you won’t be able to build for iOS otherwise.

We can add Android and iOS platforms by running the following commands

 

Step 3) Add AdMob Plugin For NativeScript With NPM

Like other frameworks NativeScript also supports the use of plugins. For showing ads in our app we will use the NativeScrpit AdMob plugin. Do visits the plugin Docs and read more about the plugin there. We will add the plugin using the following command

 

Step 4) Creating View In NativeScript

The default app that is created by NativeScript CLI is the tap counter app. We will be removing most of the code for that app as we want to focus on implementing AdMob. In this Step we will create our view which will have nothing but a label in it. So open up main-page.xml and put the following code in it.

If you want to learn more about creating pages in NativeScript i have already covered that in another tutorial here.

 

Step 5) Create A AdMob Module

We can add all the AdMob code inside of our main-page.js file. But here we will do one better instead we will put most of out code in main-view-model.js. By doing so we will create a separate module that if you want can be copied and reused in other projects. So open up main-view-model.js and put the following code in it.

Most of the code that you see above is taken for the documentation of the plugin but has been modified in parts for this tutorial.

Let’s understate the code line by line, on line-1 we are requiring the nativescript-admob module and storing it’s instance in an variable admob. This module is available to us as we have added the AdMob plugin.

On line-5 we are using the using the createBanner method of the admob object. The success and failure callback of this function are chained using .then() on line-20.

The createBanner method takes an object as its argument with various properties.  Notice that we are setting the testing property of the object to true so it will serve dummy ads which is recommended while development to prevent false impressions, the default value is false. Before publishing you should either remove the testing property completely or set it to false.

Android will take any device connected as a test device and serve up dummy ads if testing property is set to true but for iOS you will need to add the device UDIDs. We can do that on line-9. Notice the iosTesingDeviceIds property accepts an array for UDIDs which means you can add more that one device for testing.

On line-8 we are setting the banner ad size using the size property. We have given is a value of admob.AD_SIZE.SMART_BANNER. The size SMART_BANNER will adjust the size of the banner ad depending upon the screen size which is helpful when your app loads on a tablet.

If we take a look at the plugin file here we can see the following list of available Ad sizes

  1. SMART_BANNER
  2. LARGE_BANNER
  3. FLUID
  4. BANNER
  5. LEADERBOARD
  6. SKYSCRAPER
  7. MEDIUM_RECTANGLE
  8. FULL_BANNER

 

Now on line 9 and 10 we are setting the iosBannerid and androidBannerID respevtively. You should put your Ids that you get form Google AdMob.

The margins property allows you to position our banner ads exactly where we want here we have given a value of bottom:50 this means that the banner ad will show 50 DIPs form the bottom. If you donot wnat any marding you can set it to 0. Also you can make Banner ads apperat at the top of an app by setting the value top:0. The unit of measurement here is DIP (Device Independent Pixel), read more about it on Wikipedia here.

Finally we are exporting the createAds function on line-31.

 

Step 6) Showing AdMob Ads

Until now we have provided all the setting for our Ad in main-view-model.js file but we are not actually calling the createAds function that will create the banner Ad for us, we will do that in main-page.js file. So open up main-page.js file and put the following code in it

Here we on line 1 we are requiring the main-view-model that we created above. The function onNavigatingTo will be executed as soon as the page starts to load, this function is called from the main-page.xml file.

Note that we are also requiring the timer module one line-2 which is a built-in NativeScript module. We will put the call to createAdsModle() inside the timer .setTimeout() function. The reason for this is that the page has not loaded when theonNavigatingTo function is called hence we wrap our call to the createAdsModel() to execute 1 Millisecond late.

This way of wrapping the creatAdsModel() function inside the onNavigatingTo() function is a bit of a hack. If you find an easier way do let me know in the comments.

 

Step 7) Running NativeScript App

Finally we are done with out tutorial. Now all that there is left to do is to build and run our app. We will use the run command that will build and run our app in any running emulator or connected device.

Note:Please make sure you have enabled internet access on your device or emulator otherwise the Ads will not show up.

 

Conclusion

Using Ads in your app is one of the best ways to make money for your efforts. Banner Ads do not generate much revenue as per the revenue model by Google AdMob but they do not get in the way of the user. Hence they are great way to generate steady revenue for Apps.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Have you tried to use a custom view, with Placeholder, so we could put it on the place we want.

    • I have not tried it. Will try it out for sure.

      But a thing to keep in mind is that if you use placeholder, there is a chance that you will be mixing app content with ads.
      According to google that is Discouraged, as it might get accidental clicks.

      Read More on it Here: https://support.google.com/admob/answer/6275345?hl=en

  • Ahmed

    how can add admob using nativescript with angular2 and typescript ?