Add Admob ads to Intel XDK mobile app tutorial

I have created few mobile apps using Intel XDK.During the process one task was to add Admob ads to the apps.Admob allows you to make money from your free apps by displaying ads in them.Implementing Admob ads in Intel XDK is not tough job.But it may be bit confusing for new developers due to number of options available.So I decided to write this step by step tutorial based on my own experience.

Step 1

I have used Cordova plugin to display Admob ads in apps created by Intel XDK.There are many Admob plugins available in Cordova repository.I have tried couple of them but decided to go with the one developed by floatinghotpot.The plugin is available in official Cordova plugin repository (link of repository). The reasons I chose this plugin over the other ones are

  • It supports Android,iOS and Windows phone.There are couple of Cordova Admob plugins which does not support Windows phone.Since I was planning to make my app available on Windows phone store I decided to use plugin supporting it as well.
  • It supports Banner ads,Interstitial ads and Video ads.
  • It is simple to use and author has really provided readme guides with code snippet.So it is very easy to follow to tutorial and get it working inside your app.

Step 2

We have decided the plugin to use.Now it is time to add the plugin to Intel XDK.The author has written a brief tutorial with screen shot.So I am not writing the step here again.You can read the step here.The link shows some code initially.So do not get intimated with it.Scroll down the page and you will see couple of images.It shows steps to add Admob plugin within Intel XDK.

Step 3

Now it is time to add some code in your app to display the ads.You can copy and paste below code in intex.html page on your app.You can place the code between <script> and </script>.

            //********************
            // Start of Admob code
            //********************
                       var admobid = {};
                        if( /(android)/i.test(navigator.userAgent) ) {
                            admobid = { // for Android
                                banner: 'your android admob ad unit id'
                            };
                            } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
                                admobid = { // for iOS
                                banner: 'your iOS admob ad unit id'
                            };
                            } else {
                                admobid = { // for Windows Phone
                                banner: 'your windows phone admob ad unit id'
                            };
                        }
                        //
                        function initApp() {
                            if (AdMob) {
                                AdMob.createBanner({
                                adId : admobid.banner,
                                position : AdMob.AD_POSITION.BOTTOM_CENTER,
                                autoShow : true
                                });
                            }
                        }

The above code fragment allows you to show Admob banner ad units on your app.Now the function initApp should be called from place where you want to display the ads.In my case I wanted to display banner ads on bottom part of all App pages.You can modify the position parameter of initApp function to control placement of your ad.For example you can use AdMob.AD_POSITION.TOP_CENTER to display the ad unit on top of the App page.

Now you have completed your Intel XDK setup.It is time to create Admob ad units.

Step 4

Now it is time to create Admob ad unit.Creating a new Admob ad unit may be confusing for new users.I also had some confusion initially.It is bit different than Google Adsense.While creating Admob Ads keep below points in mind

  • You need to create multiple ad unit for an application.For example separate ad unit needs to be created for Android,iOS and Windows version of App
  • At first you need to select option Add your app manually.You can later link your app to the Admob ad unit.This is applicable if you are creating new app.If the app is already existing then you can link your app to ad unit while creating.

Step 5

After creating the Ad unit you will see code like ca-app-pub-some-large-number.You need to copy this code.You will need to paste this piece of code in place of your android admob ad unit id.Note you need to paste the ad unit code in proper place.If the ad unit is created for Android then you need to paste in at Android place if created for windows then paste it on windows place.

Step 6

now our set up is ready.We need to call the function initApp from proper place.In case you want to display the ad unit on all pages of your app you can follow below step.Note this is the approach I used to display ad units in my apps.

 document.addEventListener("deviceready", onDeviceReady, false);

For example let’s say you have function onDeviceReady to handle device ready event.Now within the function you can call initApp function as shown below

function onDeviceReady() {
   initApp();
   Your other code
}

Step 7

Current release of Intel XDK (version 1610) does not allow you to test third party Admob plugins in Emulator.So to test Admob ads working you need real device.You can build the app and download or mail the download link.Now you can install your app from the build and test Admob ads on real device.

Since your app is not live in Google Play you will have to enable the option install untrusted app in your mobile device.It depends on device to device where the option is present.This is the only difficult part if you are not aware of doing it.

If you have followed the steps correctly then you must be able to see the ads in action.If not then you need to check whether you have made initApp function call from right place or have pasted the Admob ad unit properly.

Conclusion

I have used above approach to display Admob ad unit on my apps.Hope you have found the tutorial helpful.In case you have any questions feel free to share your thoughts.

8 thoughts on “Add Admob ads to Intel XDK mobile app tutorial

  1. Hi Esha

    Great advice, thank you. I have searched so many websites over the past few days, including Intel’s XDK, and never understood their explanations, and I’ve been doing html5 for several years.

    So glad I stumbled upon your website, and I’ve managed to put ads on an app, with more to follow. I’ve avoided doing ads because it seemed so confusing. Not anymore!

    Have a wonderful weekend.

    Ray 🙂

    • Good to know you found it useful Ray.Thanks for sharing kind words

  2. Thank You so much for sharing such a wonderful information. I was looking for that and finally find it here in your blog. It is working.
    Thanks. Keep writing such a informative articles

    • Good to know you found it useful

  3. hello, i’m new here. would you like to create video tutorial about this post? i really need your help.

    • Yes I will whenever I find some free time

      • Plz made video …and share with Me

  4. this is quite good, i love it, tho im having a problem at step 6, i didnt know where i would put those codes to show my ads.

Leave a Comment