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

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.

The following example demonstrates the above steps to place a 320x50 ad at the bottom of the screen. (For more banner sizes, refer to the sizing constants in MPConstants.h):

// 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 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 by sending adView the -loadAd message.

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

The following example demonstrates the above steps to place a 320x50 ad at the bottom of the screen. (For more banner sizes, refer to the sizing constants in MPConstants.h):

// 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 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. 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 like this:

- (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);
}

To listen for events, you’ll need to implement the listener interface:

@protocol MPAdViewDelegate <NSObject>

@required

/** @name Managing Modal Content Presentation */

/**
 * Asks the delegate for a view controller to use for presenting modal content, such as the in-app
 * browser that can appear when an ad is tapped.
 *
 * @return A view controller that should be used for presenting modal content.
 */
- (UIViewController *)viewControllerForPresentingModalView;

and implement the desired methods from this complete example:

@protocol MPAdViewDelegate <NSObject>

@required

/** @name Managing Modal Content Presentation */

/**
 * Asks the delegate for a view controller to use for presenting modal content, such as the in-app
 * browser that can appear when an ad is tapped.
 *
 * @return A view controller that should be used for presenting modal content.
 */
- (UIViewController *)viewControllerForPresentingModalView;

@optional

/** @name Detecting When a Banner Ad is Loaded */

/**
 * Sent when an ad view successfully loads an ad.
 *
 * Your implementation of this method should insert the ad view into the view hierarchy, if you
 * have not already done so.
 *
 * @param view The ad view sending the message.
 */
- (void)adViewDidLoadAd:(MPAdView *)view;

/**
 * Sent when an ad view fails to load an ad.
 *
 * To avoid displaying blank ads, you should hide the ad view in response to this message.
 *
 * @param view The ad view sending the message.
 */
- (void)adViewDidFailToLoadAd:(MPAdView *)view;

/** @name Detecting When a User Interacts With the Ad View */

/**
 * Sent when an ad view is about to present modal content.
 *
 * This method is called when the user taps on the ad view. Your implementation of this method
 * should pause any application activity that requires user interaction.
 *
 * @param view The ad view sending the message.
 * @see `didDismissModalViewForAd:`
 */
- (void)willPresentModalViewForAd:(MPAdView *)view;

/**
 * Sent when an ad view has dismissed its modal content, returning control to your application.
 *
 * Your implementation of this method should resume any application activity that was paused
 * in response to `willPresentModalViewForAd:`.
 *
 * @param view The ad view sending the message.
 * @see `willPresentModalViewForAd:`
 */
- (void)didDismissModalViewForAd:(MPAdView *)view;

/**
 * Sent when a user is about to leave your application as a result of tapping
 * on an ad.
 *
 * Your application will be moved to the background shortly after this method is called.
 *
 * @param view The ad view sending the message.
 */
- (void)willLeaveApplicationFromAd:(MPAdView *)view;

@end

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 March 04, 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.)