AdMob (by Google) is certainly one of the most used advertising solution for mobile apps. Like AdSense for websites, it allows to display various banner formats in your app. In this tutorial, we’ll see how to add AdMob banners to your WP-AppKit app’s theme.

Sign Up For AdMob And Get The Ad Unit ID

The first step of course is to signup for AdMob. We need Google to know about our app and get an ID we’ll use in our app’s theme.

Pick your favorite Google account and click Sign up button. Then follow the steps, it shouldn’t be long.

AdMob Sign Up

AdMob Sign Up

First we’re going to create an app. For this tutorial, we’ll add our app manually but you can also register an app which is already available in app stores.

  • Sign in into AdMob
  • Click Monetize tab
  • Click Monetize new app button

Creating an AdMob App

  • Click Add your app manually
  • Fill App name and select your app’s platform (Android for this tutorial)

Create AdMob App Step 1

You can then declare ad units which are the banner types you want to have in your app. For the tutorial, we’ll simply create a standard banner.

Create AdMob App Step 2

  • Let default parameters as they are
  • Give a meaningful name (eg. Test 320×250). Note that you can edit that name later

Good to know: app’s name and ad unit’s name are only used in the AdMob backend interface.

When done, you should see your app and your ad unit in the Monetize tab.

Create Admob App Step 3

Under the ad unit’s name, you’ll see the ad unit’s ID (something like ca-app-pub-8664272302624397/4763345864).

Copy it somewhere (eg. Notepad) as we’ll need it later in this tutorial.

Register the AdMob Pro Cordova Plugin

As usual with Cordova applications (you know that WP-AppKit’s apps are Cordova apps, aren’t you?), we’ll use a plugin to extend the Cordova’s API and be able to call our AdMob’s banners with JavaScript.

Today, we’re going to use a great plugin called AdMob Pro done by created and maintained by Raymond Xie. The plugin is available on GitHub and Raymond also offers a premium support for it. At least give it a star on GitHub, it totally deserves it.

Good to know: in this tutorial, we assume that you use PhoneGap Build to compile your app.

Registering a plugin in your app is pretty straight forward:

Edit your app’s project (from the Applications panel of the WP-AppKit admin menu)

Editing App 2

Find the Plugins text field in the PhoneGap Build box. There you can register a plugin per line as XML elements. To register AdMob Pro, copy the following line inthe Plugins field:  <gap:plugin name="cordova-plugin-admobpro" source="npm" /> .

Register Cordova Plugin

PhoneGap Build will retrieve AdMob Pro from the NPM repository and add it to your app. Doing so, it will extend the Cordova JavaScript API with AdMob Pro specific functions.

Add AdMob Banners To Your App’s Theme

Last thing we have to do is call the ad unit we have defined earlier in the AdMob admin. We’ll do that in JavaScript using specific AdMob Pro functions.

Before that, a quick pause to say that I am going to add the test banner in a very basic way but be aware that AdMob Pro can a lot more than that and the GitHub plugin’s repository has a great documentation. Be sure to check it to learn its tricks.

You may know that in a WP-AppKit’s theme, all JavaScript goes into functions.js (or in external .js file referenced in functions.js). For this tutorial, we’ll add the banner’s call directly into functions.js.

Good to know: you may notice that we use the Q for Android default WP-AppKit theme but of course, you can use any theme.

So, open functions.js and paste the following piece of code:

We simply use createBanner() with a set of options:

  • adId corresponds to the ad unit ID we copied earlier in this tutorial
  • position indicates that the banner will appear at the bottom of the screen and centered (of course there’s many other possibilities)
  • isTesting triggers dummy banners for testing purposes (don’t use that option with a released app, it’s only for development and testing phases)

We’re also testing if the AdMob object exists (meaning that the Cordova plugin has been added correctly).

Again, it is a very basic way to use AdMob and you should check the plugin’s documentation and examples to create a lot better AdMob implementation for your app.

Once you’ve compiled with PhoneGap Build, you should end up with a nice testing banner in your app 🙂

Q Android with AdMob

We’re done now with this tutorial. I hope, it has been useful for you. As usual, if you have any questions, please use the comments below.

Published by Benjamin on August 24, 2016

Head of Digital for a press group, WordPress since 2008, WordCamp organizer, developer for the fun

3 Comments

  1. Can you provide us a video tutorial video for this? I tried but there was’nt any ads on my app

    Reply
  2. It does not work for me, is it still available, because the AdMob platform is different from the tutorial?

    Reply

Leave a Reply

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

Having questions?

FAQ | Tutorials | Documentation

Or

Contact Us