Banner Ads

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 to create an account on MoPub and integrate the SDK into your project.

Disclaimer

Publisher provided overlays (i.e. close buttons) located with the ad placement and subsequently covering the ad creative are against Policy and should not be used. If you have quesitons please reach out to your account team or support@mopub.com.

Sample code

For a complete example of how to add banner ads into your app, check out the MoPub sample app.

Basic integration

You can create an ad unit (a space for ads) using the MoPub UI. 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:

  1. In your view controller’s header file:
    • Import the MPAdView.h header file and declare an MPAdView *adView property.
    • Declare that your view controller implements the MPAdViewDelegate protocol.
  2. In your view controller’s implementation file, instantiate an MPAdView, passing in your ad unit ID. This is typically done in -viewDidLoad.
  3. Register your view controller as the adView’s delegate.
  4. Set the adView’s frame and add the adView to your controller’s view hierarchy.
  5. Center the adViewon screen to account for iPhone 6 and iPhone 6 plus
  6. 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.
  7. Finally, load an ad by sending adView the -loadAd message.

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

IMPORTANT: If you are using MRC you’ll need to set the -fobjc-arc compiler flag on these files. Follow the instructions here.

// MyViewController.h

#import "MPAdView.h"

@interface MyViewController : UIViewController <MPAdViewDelegate>

@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 - <MPAdViewDelegate>
- (UIViewController *)viewControllerForPresentingModalView {
    return self;
}

...
@end

Optional 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, iAd’s portrait banner size is 320x50, whereas AdMob’s banner size is 320x48. 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 (e.g. iAd), 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];
}

Universal Apps

  • When setting up a universal application (an app that will work on both phones and tablets) you will have to conditionally fire two different ad units.
  • Create a 320x50 ad unit and a 728x90 ad unit.
  • Detect the device type and appropriately use the right ad unit IDs in the MoPub ad call. Use the following code:
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
{
    mopubViewLandscape = [[MPAdView alloc] initWithAdUnitId:MOPUB_IPHONE_BANNER_ID size:MOPUB_BANNER_SIZE];
}
else
{
    mopubViewLandscape = [[MPAdView alloc] initWithAdUnitId:MOPUB_IPAD_BANNER_ID size:MOPUB_LEADERBOARD_SIZE];
}
  • Make sure you also conditionally set the right size for the specific ad unit.
  • If you’re on iOS, use the following code:
-(void)adViewDidLoadAd:(MPAdView *)view
{
    CGSize size = [view adContentViewSize];
    CGRect newFrame = view.frame;
    newFrame.size = size;
    newFrame.origin.x = (self.view.bounds.size.width - size.width) / 2;
    view.frame = newFrame;
}

Last updated October 10, 2018

TWITTER, MOPUB, and the Bird logo are trademarks of Twitter, Inc. or its affiliates. All third party logos and trademarks included are the property of their respective owners.

© 2018 MoPub Inc.