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.
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
Step 3: Create New Interstitial Ad
Fill in the unit name and no of times the pop-up to be shown per minute
It will now list the banner unit-id and interstitial unit-id, as in the screenshot below.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var admobid={} | |
| if( /(android)/i.test(navigator.userAgent) ) { | |
| admobid = { // for Android | |
| banner: 'ca-app-pub-xxxxx/xxxxx', | |
| interstitial: 'ca-app-pub-xxxxxx/xxxxxx' | |
| } | |
| } | |
| else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { | |
| admobid = { // for iOS | |
| banner: 'ca-app-pub-xxxxxxx/xxxxxxx', | |
| interstitial: 'ca-app-pub-xxxxxxx/xxxxxxxx' | |
| }; | |
| } | |
| else { | |
| admobid = { // for Windows Phone | |
| banner: 'ca-app-pub-xxxxxxx/xxxxxxx', | |
| interstitial: 'ca-app-pub-xxxxxxx/xxxxxxxx' | |
| }; | |
| } | |
| //code for pop-up-ads | |
| if(AdMob) AdMob createBanner({ | |
| adId:admobid.banner, | |
| position:AdMob.AD_POSITION.BOTTOM_CENTER, | |
| autoShow:true | |
| }); |
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.
Thanks for reading my blog, Share if you find this useful.
Can you post a article on how to integrate Facebook Ads in a Cordova App?
Can you post an article on how to integrate http://www.globalhop.net in a Cordova App?
Any experience in implementing Google Ad Manager on a hybrid app? HTML5 and Native….