Implement iAd Banner Ads without Covering UIWebView in Phonegap

Image

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;
 }
Advertisements

4 thoughts on “Implement iAd Banner Ads without Covering UIWebView in Phonegap

  1. This is a great tip.Is there an easy way to pause the javascript in the app when the user touches an ad? Or any events I could tap into to know if the user touched an ad? I think the answer is not without an plugin but can’t hurt to ask right?

    • Good question, Hugh. As the ads are implemented on the iOS (objective-C) side of things, there’s no way for the javascript to know about any events that occur there as clicking on an iAd opens a new window. You can listen for this even in the iOS code by implementing this method which fires when a user clicks an iAd:

      – (BOOL)bannerViewActionShouldBegin:(ADBannerView *)banner willLeaveApplication:(BOOL)willLeave

      • I followed Scott DeSapio’s blog and was able to successfully get the iAD banner to display at the bottom of the screen. I then went ahead and followed the instructions laid out in your blog but it still appears that the iAD banner is covering my UIWebView.

        What is the best way for me to troubleshoot this?

  2. Hi Brandon,

    Thanks for your help here, just a quick message to ask you a quick question.
    I’ve successfully add my iad banner, but as soon as I moving to another page of the app, the add banner is gone forever.
    It appears only once on the homepage when I’m launching the app, after that it’s invisible.
    Any idea?
    Is this something normal ?
    Do I have to implement more code for each page ?

    Thanks a lot 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s