Integrate Google Ads in Apache Cordova Mobile Apps

1 min read

I have recently implemented Google Ads for Mobile Application using AdMob by Google in cordova. Google gives nice doc about Google Ads implementations. I will explain you how to integrate google-ads using AdMobPro plugin.

Admob portal setup Instructions:

Step 1: Singup and Create App

Go to Admob login page and create an account. Click on Monetize new app button, Under Monitize a new app click Add Your App Manually. Refer the below screenshot.
image1
Note: There are two types of Ad format available – Banner and interstitial (Pop-up ad). Select banner, name it and submit the information, If you prefer Pop-up Ads, click new ad unit button on the same page.

Step 2: Create New Ad Unit

newadunit

Step 3: Create New Interstitial Ad

Fill in the unit name and no of times the pop-up to be shown per minute
pop-up
It will now list the banner unit-id and interstitial unit-id, as in the screenshot below.
view1
We are now done with the AdMob set-up instructions.
Note: Suppose we need to block some Ads or allow particular ads, click the Allow & block ads tab it will show the option for us.

Cordova plugin Implementation

Next, we will be implementing the google ads for Cordova application.
I am using Cordova-plugin-admobpro.This Cordova plugin enables displaying mobile Ads with a single line of javascript code. They also provide API’s to create, remove, show, hide, positioning for the ads.

Steps to integrate:

1. Go to Application root folder.
2. Execute command : Cordova plugin add cordova-plugin-admobpro
3. Create the js file called admob.js and add the ad Unit id for our banner id and interstitial id given in the AdMob portal.
4. Refer below javascript code to initialize the Ad unit for each platform.

The above code will display a banner ad in the bottom of the mobile screen, It also provides a different method for the banner ads and api’s.
There are apis to display pop-up ads in full screen, Refer above code, also refer this link API methods for other api methods.
Include admob.js in the application.
To remove or hide the ads from other pages use: Admob.removeBanner or Admob.hideBanner .
After implementing this, It will show the Banner Ads at the bottom of the screen and Pop-up ads . Refer below screenshot.
Screenshot_2016-07-06-11-30-35 Screenshot_2016-07-06-11-29-43
Thanks for reading my blog, Share if you find this useful.

Related posts:

Leave a Reply

Your email address will not be published. Required fields are marked *