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:

  1. Go through the steps in our Getting Started Guide to create an account on MoPub and integrate the SDK into your project.

  2. Create an ad unit in the Publisher UI (refer here for instructions). You will need that ad unit’s ID later to request ads from MoPub. (You can retrieve your ad unit ID by clicking Get code snippet in the top right corner of the Ad Unit page.)

Loading Banner Ads in Your App

Starting with the 5.8.0 release of the MoPub SDK, you can specify a desired ad size, and the MoPub SDK will request an ad for that size. To use that feature, ensure you set have up the frame for your banner ad view before making your ad request. You can find additional information below tailored to your use cases.

Adding a banner to your application is a simple process:

  1. Edit your view controller’s header file.
  2. Edit your view controller’s implementation file.

IMPORTANT: Please do not use publisher-provided overlays (such as close buttons) that are located with the ad placement and that subsequently cover the ad creative. Doing so is against MoPub Policy. If you have questions, please reach out to your account team or support@mopub.com for additional assistance.

Step 1. Edit Your View Controller’s Header File

  1. In your view controller’s header file, import the MPAdView.h header file and declare an MPAdView *adView property.

  2. Declare that your view controller implements the MPAdViewDelegate protocol.

// MyViewController.h

#import "MPAdView.h"

@interface MyViewController : UIViewController <MPAdViewDelegate>

@property (nonatomic) MPAdView *adView;

@end

Step 2. Edit Your View Controller’s Implementation File

  1. In your view controller’s implementation file, instantiate an MPAdView, passing in your ad unit ID. This is typically done in -viewDidLoad.
  2. Register your view controller as the adView’s delegate.
  3. Set the adView’s frame at this time (either in code, Nib, or the Interface Builder), and add the adView to your controller’s view hierarchy.
  4. Center the adViewon screen to account for iPhone 6 and iPhone 6 Plus.
  5. 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.
  6. Finally, load an ad:
    • If you know the size of the banner you’d like to request, call loadAdWithMaxAdSize:custom_CGSize.
    • If you don’t know or have the size of the banner you’d like to request, and you’d like to use a constant, call loadAdWithMaxAdSize: and pass in one of the recognized MoPub ad size constants. The constants are height-based, and the complete list can be found here.
    • If you would like to use the frame as the maximum ad size, pass in the kMPPresetMaxAdSizeMatchFrame constant.

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

// 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; for example, when an ad has successfully loaded, or when the ad is about to present or dismiss a modal view. Refer to the MPAdViewDelegate for a list of these methods.

Handling Rotation

If your application supports rotation, you can optionally 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, forward the orientation change, and 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 automatically refreshes 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 uses 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 must conditionally fire two different ad units.

  • Create a 320x50 ad unit and a 728x90 ad unit.

  • Detect the device type and use the appropriate 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;
       }
    

Sample Code

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

Last updated August 26, 2019

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.

© 2019 MoPub (a division of Twitter, Inc.)