AdMob Plugin and pure-Javascript ads in PhoneGap Build application
It all started with this Stack Overflow question asked by me 2,5 year ago, when I was attempting to strike with ads in mobile applications for the first time. I’m still using PhoneGap Build only therefore in the past I was very limited to only these ad networks, that supported displaying their add through pure Javascript only. However, all the things had changed radically, with introduction of npm plugins to PhoneGap Build. You can now use in pure Javascript PhoneGap Build application all the ad networks, that require you to use their native SDKs…
Contents
AdMob Plugin Pro
…and you don’t even need to work hard to achieve this, as there is a powerful AdMob Plugin Pro. Don’t feel confused with pro name. I have received an confirmation from plugin’s author, that plugin itself is free for both open source and commercial usage and you’re only required to pay
Key advantages — out-of-the-box support for:
- PhoneGap Build (see notice below),
- many ad types, including full screen ads,
- many ad providers and ad networks (with plugins, see below),
- serving ads using pure Javascript, with just a few lines of code.
Plugin supports following ad networks / providers:
Where first two (in bold) has out-of-the-box support, while all other require use of additional plugins.
The begin of ad journey
First step is, of course, to setup an account, prepare everything and get unique ID, that is required withing AdMob Pro plugin. Since plugin has built-in support for AdMob and DFP. The latter requires you to have a Google Account, but not all Google Accounts are eligible for take a part in DFP program. My account wasn’t. After logging in with my Google Account I was bumped with information, that I’m not authorized to use DFP, so I decided to say pa-pa to this ad network. If your account is eligible for taking part in DFP and you would like to read more about this program, then “How to Setup Google DFP for Selling Ads” tutorial sounds like a good starting point.
For above reasons I’ll focus only AdMob in this article. Note, that both ad networks has been purchased by Google and now are part of this IT giant.
AdMob requires you to have a valid AdSense account and AdWords account. If you don’t have one or both of these accounts, you’ll have to create them during the sign-up process and connect them to your exiting Google Account. If you don’t have Google Account or don’t want to use your current one for ad purposes, you will have an opportunity to create a new one during sign up process.
What is the difference between AdSense and AdWords. Well, in quick, sharp words to say, Google AdWords program is mainly used to display your add only in Google network, that is on Google search results pages and Google network of partner sites. So, all the money, you pay for displaying your add, will go to Google. While Google AdSense program is used to deliver Google AdWords ads to individuals’ websites, completely outside Google and affiliates and therefore your money goes mainly to them, while Google only chops their commission. Read more here or here.
However, in the context of this article, none of above is important to you. You want to display ads for others and want to get some money on this. You, of course, are not going to pay anything, as Google ad services for publishers — like you — are completely free. However, due to Google internal regulations, you’re required to have both AdSense and AdWords accounts to display ads and get some revenue on this process.
Sign up for AdMob
To begin process, follow these steps:
1. Visit
2. If you have used AdSense and AdWords ever before, you’ll be presented with your unique identifiers in these networks and asked to confirm, that you want to continue with selected Google Account. If not, you’ll be guided to create new AdSense or AdWords accounts respectively.
3. Review AdSense and AdWords account information and agree to all AdMob program policies. After that, your new AdMob account will be permanently linked with your AdSense and AdWords accounts. If you remove yourself from any of these accounts, you will lose access to your AdMob account (learn more).
After that, you’ll be redirected to AdMob home. Congratulations, you’re now part of AdMob network and you can start monetizing your mobile applications or content, by displaying ads in it.
Monteize your first app
Now, let’s create first ad unit for your first app. To do this:
1. Click Monteize new app on AdMob home screen.
2. Add an app, by either searching for in in mobile app stores or manually entering its name.
3. Select an ad format — wheteher you want to serve a typicall small banner or full-screen interstitial ad.
4. Set all the specific parameters for selected ad format and specify this ad unit’s name.
5. After saving all the details, you’ll be redirected to Monteize section with your first ad unit created. Below unit’s name you can read your unit’s ID, like ca-app-pub-0000000000000000/0000000000.
Demo code in an article on using AdMob ads in PhoneGap Build uses six different ad / unit IDs: for each of three major platforms (Android / iOS / WP8) and for each of two ad formats (banner / interstitial). Repeat above steps for as many times as you need.
Interstitial ads are less liked by users of your app, because they cover entire area of screen and therefore can’t be ignored (“I’m not looking at that banner”) and must be dismissed by clicking “x”. In addition, AdMob allows video content for interstitial formats, while only text and graphics for banner format. Since videos consumes a lot of traffic on mobile Internet connection, which is still precious to some, this is another counter-argument for not serving this kind of apps to your customers.
You may, of course, earn more money for this format, but conider twice is reduced numer of users of your application isn’t a worsen scenario than increased (maybe only potentially) income. You may disagree on video content in your ad format settings, but it doesn’t change the fact, that full-screen ads are considered more annoying than simple, small banners.
You can customize banner-like format to match it colors to your application color scheme, while for interstitial format you’re completely on your own and you always display whatever ad network will provide you with.
Adding AdMob ad to PhoneGap Build application
There’s an article on using this plugin in PhoneGap Build. It is a bit out-dated. You should not use now deprecated plugins.cordova.io repository, but newly supported npm repository. For this, simply replace:
<gap:plugin name="com.google.cordova.admob" source="plugins.cordova.io"></gap:plugin>
with:
<gap:plugin name="cordova-plugin-admobpro" source="npm"></gap:plugin>
Note, that at some point, there were issues using npm source.
As for the rest of code, simply copy-paste examples from above mentioned document, making sure, that you provide correct (your own) ad units’ IDs and that they’re defined in first place, before you attempt to call AdMob.createBanner. Keep in mind, that demo contains unit’s IDs for all three platforms and both ad formats, while code itself uses only banner format. You have to change that manually to test/display ads in interstitial format. A simple example for this kind of format can be found here.
When should I begin monetizing my app?
Well, I’m not a marketing guru, so I can tell you, basing on rule as old as this world, that ASAP! :) However, this question may turn into asking, when you should add AdMob Pro plugin to your application code — should you do this before it is even published to app markets or after that.
Either option is valid. You can create ad unit and start displaying ads in your application, that is in development stage (however — keep in mind that taping on your own ads may get you fast into account being suspended!) and before sent to app markets. However, for Android and iOS platform, soon or later you have to link your ad units with existing apps. Check your app listing and notice Link your app link there. Make use of it, as soon as your your application is available to public.
This requirement is not present only for Windows Phone 8. I don’t know, why it occurs for Android and iOS platfroms? I may only guess, that this can be used by Google to prevent developers from using AdMob ads in non-mobile environments, for which Google has completely different add program (AdSense).
Conclusion
Plugin’s author offers an extensible documentation which includes API documentation, code examples and example implementations among different development platforms. Really good piece of work!
There are other places with a lot of information. For example, plugin’s GitHub repo or npm repository.
AdMob Plugin Pro’s autor did a really good work and made life of many developers much easier. But, that costed him a lot of hard work and many hours spent by the computer (which he could, for example, spend playing with his dog). I strongly suggest and encourage you to send him back some positive power, some sort of huge “thank you”, by donating to AdMob Plugin Pro and bringing its author some money.