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
Hi, thank you so very much for posting this example. It is very difficult to find information on this. Unfortunately, the link to the example code download isn’t working.
Could you please fix? It would be very very much appreciated. 
Thank you!
I got the sample to download from the link in the Google group, and I have to tell you THANK YOU THANK YOU THANK YOU SO SO MUCH! You are amazing for sharing! Your hard work is very much appreciated; I was able to get the sample project working without too much trouble
My compiler griped about one of the parameters for the test device in the sample, but the live ads code works great! At first the ads bar wasn’t showing up at all, because I needed to add an asterisk as an entry under external hosts in Phonegap.plist. But now, everything is working beautifully, and I couldn’t be happier.
It saves me from having to pay money for a wysiwyg, or having to deploy my app before adding Admob, or having to hack around with iFrames, ICK!
You are right; there aren’t many clean PhoneGap solutions for Admob, and I have a feeling that this solution will be a Godsend to many, as it is the best solution for PhoneGap. Again, I can’t thank you enough for sharing!
@Sally sorry about the d/l link being broken. It’s now fixed
I’m really glad you were able to find the original download. Glad I could help, it needed to be shared!
Will this work for universal apps using phonegap?
Putting it in the webViewDidFinishLoad method will still work but not all the rest of the code. Reason being we are using [bannerView_ setFrame:CGRectMake(0, 0, 320, 50)]; 320×50 is the Banner Ad size for iPhone. You’d need to use either 468×60 or 728×90 for iPad.
For a universal app you could try something like this that detects whether or not your device is an iphone or an ipad. I haven’t tested that code so not 100% if it works but give it a shot.
That worked Perfectly! Thanks!
No problem
This article has been a huge help for me. I do have one more question. Is there a way to center or change the ad size on an iphone when orientation changes? Some apps with phonegap work well in both landscape and portrait orientations.
Hello,
any ideas on how to set up a method that gets called when an ad is dismissed (after being tapped and shown full screen)?
Thanks for the post. My app is having five sections.
Ads are to be displayed only in particular section, not in all sections.
Can you help me in achieving it.
Can you elaborate slightly on step #3? Specifically, can you add a code snippet for:
... In AppDelegate.h – implement ...
I’m super new to objective-c so I’m not exactly sure what that means.
Thanks!!
Hi KeyVisuals, thank you for making this post. However, I am using Cordova rather than the original phonegap and it seems the code on the webViewDidFinishLoad is on the MainViewController.m rather than on AppDelegate.m
Does that make a difference?
Thank you!
@Mark: Here you go
http://pastie.org/4399713
Hi,
I get a Mach-O Linker (Id) Error, the most annoying of them all. Normally this is due to some framework not being included, but i went through them all and they seem to be in place?
ld: duplicate symbol _OBJC_CLASS_$_AppDelegate
Any idea, why this might be hapenning?
Thanks in advance,
Miguel
As soon as I run the code, I get an exception:
‘NSInvalidArgumentException’, reason: ‘-[GADBannerView private]: unrecognized selector sent to instance 0x2501a0′
Can you help?
Cheers.
Thanks for the tutorial it works .. is it possible to resize the web view as the ad is being displayed on top of it ? and also if can be alternated for example. (No ad full length view and if ad is present then view minus length of ad) for a universal app using phonegap 1.3 ? cheers