#iPhoneDev

I posted this info on the PhoneGap Google Group a couple weeks ago and thought I would share it here too. Before we start I should mention that PhoneGap is an excellent open source project by Nitobi that allows you to create native applications for mobile devices using web technologies. Also, I have no affiliation with AdMob. I’ve been using them in my apps for almost 3 years now. They are very dependable and they pay on time (unlike MobClix.)

The reason I put this quick tutorial together is because I was trying to accomplish this very thing and after extensive googling was not able to find anything. I thought i’d find my answer in the phonegap google group but I was wrong. One person when asked how to setup Admob Ads actually replied “just use iAds, there’s a plugin for that.” There are many problems with that answer. One – maybe I don’t want to use iAds I want to use AdMob. Two – the iAds fill rate tends to be kinda low and I don’t want to loose income. Three – you must install the iAd phonegap-plugin which can be confusing and troublesome. Four – that solution doesn’t even attempt to provide a solution to the question. So without further adieu here’s my solution . . .

1.) Create your normal, everyday phonegap (1.0.0) project in xcode
2.) Import the GoogleAdMobAdsSDK folder and the required AdMob frameworks (I believe the only one that wasn’t already in the phonegap project was MessageUI.framework)
3.) In AppDelegate.h – implement <GADBannerViewDelegate> then #import “GADBannerView.h” & add  GADBannerView *bannerView_; to your @interface
4.) In AppDelegate.m –  #define MY_BANNER_UNIT_ID @”Your AdMob Publisher ID# Here”

Now the tricky part. This caused me to bang my head on the wall for
some time . . .

5.) Change your method webViewDidFinishLoad to this . . .

- (void)webViewDidFinishLoad:(UIWebView *)theWebView
{
    bannerView_ = [[GADBannerView alloc]init];
    [bannerView_ setDelegate:self];
    [bannerView_ setFrame:CGRectMake(0, 0, 320, 50)];

    // 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.viewController;
    [self.viewController.view addSubview:bannerView_];

    // Initiate a generic request to load it with an ad.
    [bannerView_ loadRequest:[GADRequest request]];

	// only valid if AdGap.plist specifies a protocol to handle
	if(self.invokeString)
	{
		// this is passed before the deviceready event is fired, so you can access it in js when you receive deviceready
		NSString* jsString = [NSString stringWithFormat:@"var invokeString = \"%@\";", self.invokeString];
		[theWebView stringByEvaluatingJavaScriptFromString:jsString];
	}
	return [ super webViewDidFinishLoad:theWebView ];
}

That’s it.

Some of you may be asking why we didn’t create the bannerView_ in the AppDelegates didFinishLaunchingWithOptions method? You can’t. That’s because the PhoneGap AppDelegate seems to create the webview, then the view controller, then it pushes the webview into the view controller which in turn calls webViewDidFinishLoad. This seems to be the key. We cannot access the viewController object until webViewDidFinishLoad has been called.

I’ve created a sample project which is also setup to load test ads. You can get it from here: AdGap