Integrating Banner Ads – iOS

Banner ads usually appear at the top or bottom of your app’s screen. Adding one to your app takes just a few lines of code.

Prerequisites:

Before integrating banner ads in your app, you’ll need to go through the steps in our Getting Started Guide & create an account on MoPub and integrate the SDK into your project.

Sample code:

For a complete example of how to add banner ads into your app, check out the MoPub Sample App if you’re using the open source SDK.

Basic integration

You can create an ad unit (a space for ads) on the MoPub online dashboard. Upon your first visit, you’ll be prompted to register your application and set up an ad unit. Afterwards, you can retrieve your ad unit ID by clicking “Get code snippet” in the top right corner of the ad unit page. Adding a banner to your application takes only a few, easy steps:

In your view controller’s header file:
Import the `MPAdView.h` header file if using the open source SDK. If you are using Fabric, import `MoPub/MoPub.h` and declare an `MPAdView *adView` property.
Declare that your view controller implements the `MPAdViewDelegate` protocol.
In your view controller’s implementation file, instantiate an `MPAdView`, passing in your ad unit ID. This is typically done in `-viewDidLoad`.
Register your view controller as the `adView`’s delegate.
Set the `adView`’s frame and add the `adView` to your controller’s view hierarchy.
Center the `adView`on screen to account for iPhone 6 and iPhone 6 plus
Implement the `-viewControllerForPresentingModalView` `MPAdViewDelegate` method. The `adView` will use the view controller returned by this method to present modals when tapped. Typically your controller can simply return `self`.
Finally, load an ad by sending `adView` the *-loadAd* message.

The following code snippets demonstrate all of the above steps, placing a 320×50 ad at the bottom of the screen. (For more banner sizes, see the sizing constants in MPConstants.h.

IMPORTANT: For the open source SDK, if you are using MRC you’ll need to set the `-fobjc-arc` compiler flag on these files. Follow the instructions in Getting Started.

// MyViewController.h

#import "MPAdView.h" //If using the open source SDK
#import <MoPub/MoPub.h> //If using Fabric

@interface MyViewController : UIViewController 

@property (nonatomic) MPAdView *adView;

@end

// MyViewController.m

#import "MyViewController.h"

@implementation MyViewController

- (void)viewDidLoad {
    // ... your other -viewDidLoad code ...

    self.adView = [[MPAdView alloc] initWithAdUnitId:@"<YOUR_ADUNIT_ID_HERE>"
                                                 size:MOPUB_BANNER_SIZE];
    self.adView.delegate = self;
    self.adView.frame = CGRectMake((self.view.bounds.size.width - MOPUB_BANNER_SIZE.width) / 2, 
                                  self.view.bounds.size.height - MOPUB_BANNER_SIZE.height,
                                  MOPUB_BANNER_SIZE.width, MOPUB_BANNER_SIZE.height);
    [self.view addSubview:self.adView];
    [self.adView loadAd];
    [super viewDidLoad];
}


#pragma mark - 
- (UIViewController *)viewControllerForPresentingModalView {
    return self;
}

...
@end

Receiving Additional Delegate Callbacks

MPAdViewDelegate includes a variety of optional callbacks you can use to be notified of events, e.g. when an ad has successfully loaded, or when the ad is about to present or dismiss a modal view. Check out the MPAdViewDelegate protocol in MPAdView.h for a list of these methods. Here’s just one example of when these delegate callbacks can come in handy. Ad dimensions often vary across different ad networks; for example, MoPub Marketplace’s portrait banner size is 320×50, whereas AdMob’s banner size is 320×48. In order to resize and position our `adView` accurately every time a new ad is retrieved, we can implement the `-adViewDidLoadAd:` delegate callback in our view controller:

- (void)adViewDidLoadAd:(MPAdView *)view
{
    CGSize size = [view adContentViewSize];
    CGFloat centeredX = (self.view.bounds.size.width - size.width) / 2;
    CGFloat bottomAlignedY = self.view.bounds.size.height - size.height;
    view.frame = CGRectMake(centeredX, bottomAlignedY, size.width, size.height);
}

Handling Rotation

If your application supports rotation, you can opt to forward orientation changes to the `adView` by calling `-rotateToOrientation:`. In some cases, the ad content may change its size upon rotation. To handle these cases properly, you will need to forward the orientation change, as well as resize and reposition.

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
                                duration:(NSTimeInterval)duration {
    [self.adView rotateToOrientation:toInterfaceOrientation];
}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
    CGSize size = [self.adView adContentViewSize];
    CGFloat centeredX = (self.view.bounds.size.width - size.width) / 2;
    CGFloat bottomAlignedY = self.view.bounds.size.height - size.height;
    self.adView.frame = CGRectMake(centeredX, bottomAlignedY, size.width, size.height);
}

Refreshing Ads

`MPAdView` will automatically refresh an ad unit at a time interval specified via the MoPub web interface. You can programmatically disable or enable auto-refresh on a particular `MPAdView` by calling `-stopAutomaticallyRefreshingContents` or `-startAutomaticallyRefreshingContents`.

There may be times when you want to manually refresh an ad. For instance, suppose your application has a `UISearchBar`, and you wish to use the search text as a targeting parameter for your ads. The following code example demonstrates how you can use the `-refreshAd` method to accomplish this:

// UISearchBar delegate method. Notifies us when a user has attempted a search.
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
    [self.adView setKeywords:searchBar.text];
    [self.adView refreshAd];
}

Best Practices

Only create a banner ad view when you display it to the user.
If the user navigates from a screen with a banner on it to a screen that does not have a banner, you should remove the banner view from the view hierarchy.
See more Banner Best Practices