Cordova (PhoneGap) and AdMob Together: iOS Version

Ads are one the easiest ways for a developer to get paid for an app. Apache Cordova, the new name for PhoneGap, is one of the easiest ways to develop apps for the iOS and other platforms. The problem is how to combine the two of them? Nothing in the official documentation of either says how to do it. After a long evening of hacking, I have gotten it to work for me and here is how I did it.


Some assumptions before we begin: 

• XCode version 4.3.2
• Apache Cordova version 1.7.0
• AdMob version 6.0.3 (6.0.4 uses the device's UDID, which creeps me out)

1. Get Your App Working

The first step is to get your Cordova app working. In my case I am using my calculator example that I introduced a few tutorials ago. You can use whatever app you have just keep in mind that AdMob will need 320x50 pixels, so be sure to leave it some room. 


2. Copy the AdMob Files


Now we copy the AdMob files into the project. Right-click on your project name in Xcode, choose Add Files to "your project name"... Select all of the files except "README.txt" and the "Mediation" folder. 


3. Add Some Missing Frameworks


The following frameworks need to be added to your project:

1. AudioToolbox
2. MessageUI
3. SystemConfiguration
4. CoreGraphics

Double click the project name to show the settings page. Click the tab marked, "Build Phases". Click the accordion marked, "Link Binary With Libraries". Click the plus sign in the lower left corner, in the dialog box that appears select all of the missing frameworks, then click the "Add" button. 

4. Add the Code

In the file, MainViewController.h, add the import statement:

#import "GADBannerView.h"

Add the banner view declaration:

@interface MainViewController: CDVViewController {
  GADBannerView *bannerView_;
}
@end

Added and define the MY_BANNER_UNIT_ID near the top of MainViewController.m.

#define MY_BANNER_UNIT_ID @"YourPublisherId"

5. Modify the viewDidLoad
After the [super viewDidLoad] add the following code:

	// Create a view of the standard size at the bottom of the screen.
	// Available AdSize constants are explained in GADAdSize.h.
	bannerView_ = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];
	// Must be a better way to position at bottom of page
	[bannerView_ setCenter:CGPointMake(kGADAdSizeBanner.size.width/2, 435)];
	// Specify the ad's "unit identifier." This is your AdMob Publisher ID.
	bannerView_.adUnitID = MY_BANNER_UNIT_ID;
	// Let the runtime know which UIViewController to restore after taking
	// the user wherever the ad goes and add it to the view hierarchy.
	bannerView_.rootViewController = self;
	[self.view addSubview:bannerView_];
	// Initiate a generic request to load it with an ad.
	GADRequest *request = [GADRequest request];
	// remove this line when you are ready to deploy for real
	request.testing = YES;
	[bannerView_ loadRequest:request];

view raw viewDidLoad.m hosted with ❤ by GitHub

6. Modify the viewDidUnload

Release the bannerView_ in the viewDidUnload method:

[bannerView_ release];

7. Modify the Cordova.plist

In order for AdMob to get ads from its server, you need to permit it. Expand the "Supporting Files" folder. Then click the "Cordova.plist". Open the ExternalHost, click the plus sign, and the type "*". The asterisk says to permit all outside connections to go through. You can make this list as exclusive as you'd like. If you don't do this you will see the following error in Xcode's console output section:

ERROR whitelist rejection: url='http://media.admob.com/sdk-core-v40.js

8. Try It Out

Try launching your app and you should see the Google banner ad at the bottom of the page. If you click it, it will take you to another page. 

If you need a bit more help I have include the full source code to the Cordova calculator with the AdMob ad. Don't freak out, the name of the project is DelMe3, not calculator. It is a huge project though at 10.6 MB. I wasn't too sure what I could safely leave out of the project, so I included it all.

  

Full Source Code, 10.6 MB