Implement iAd Banner Ads without Covering UIWebView in Phonegap

Recently, I was interested in adding ads – specifically iAds – to a Phonegap-wrapped iOS application. There are several tutorials out there, Scott DeSapio’s being far and away the best, however myself and a few others ran into a confounding problem:

Phonegap applications are (essentially) composed of a single view, thus subviews (like a banner ad) lay right on top of actual app content.

Not good. Another user managed to give the banner ads a separate space below the webview, but then click events on the ad were lost. After quite a bit of trial and error, I’ve come up with a solution. If you’re starting from scratch, I recommend following the link above to Scott’s blog and coming back when you’re ready to clean up.

This solution hinges on implementing the ADBannerViewDelegateProtocolReference. Full documentation can be found here.

This gives us access to several useful event methods, though the one we’re most concerned with is bannerViewDidLoadAd – which will be our cue to resize the webview.

First, you need to further modify MainViewController.h MainViewController interface by adding <ADBannerViewDelegate>:

@interface MainViewController : CDVViewController <ADBannerViewDelegate> 
{
    ADBannerView *adView;
}
@end

Now you need to implement this interface in MainViewController.m. Add this line in your webViewDidFinishLoad method:

adView.delegate = self;

I also added this line to hide the banner space until an ad is actually received and loaded, but it’s completely optional:

adView.hidden = YES;

Next, declare these two (new) methods. The first lets us know that an ad was received successfully and that we should both resize the webiew and show the ad banner. The second method – didFailToReceiveAdWithError – hides the ad banner and resizes the webview if somethings goes wrong or the ad clears from view. As a bonus, this solves any complaints xCode might spew in relation to the proper handling of ad-receive failures. The bringSubviewToFront:adView line is the linchpin here, allowing banner ad click events to bubble up to the main view controller. The complete implementation is as follows :

- (void)bannerViewDidLoadAd:(ADBannerView *)banner 
{
    CGRect resizedWebView = [super webView].frame;
    resizedWebView.size.height = adView.frame.origin.y;
    [super webView].frame = resizedWebView;
    [self.view bringSubviewToFront:adView];
    adView.hidden = NO;
 } 

- (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error
 {
     CGRect resizedWebView = [super webView].frame;
     resizedWebView.size.height = self.view.frame.size.height;
     [super webView].frame = resizedWebView;
    adView.hidden = YES;
 }