Banner Ads

Banner ads are rectangular image or text ads that occupy a spot within an app's layout. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time. If you're new to mobile advertising, they're a great place to start.

This guide shows you how to integrate banner ads from AdMob into an iOS app. In addition to code snippets and instructions, it includes information about sizing banners properly and links to additional resources.

Prerequisites

• Import the Google Mobile Ads SDK, either by itself or as part of Firebase.

Always test with test ads

The sample code in this guide contains an ad unit ID and you're free to request ads with it. It's been specially configured to return test ads rather than production ads for every request, which makes it safe to use.

However, once you register an app in the AdMob UI and create your own ad unit IDs for use in your app, you'll need to explicitly configure your device as a test device when you're developing. This is extremely important. Testing with real ads (even if you never tap on them) is against AdMob policy and can cause your account to be suspended. See Test Ads for information on how you can make sure you always get test ads when developing.

Create a GADBannerView

AdMob banners are displayed in GADBannerView objects, so the first step toward integrating AdMob ads is to include a GADBannerView in your view hierarchy. This is typically done in one of two ways.

Interface Builder

A GADBannerView can be added to a storyboard or xib file like any typical view. When using this method, be sure to add width and height constraints to match the ad size you'd like to display. For example, when displaying a standard banner (320x50), use a width constraint of 320 points, and a height constraint of 50 points.

Programmatically

A GADBannerView can also be instantiated directly. Here's an example of how to create a GADBannerView with the standard banner size of 320x50:

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    bannerView = GADBannerView(adSize: kGADAdSizeFullBanner)
    self.view.addSubview(bannerView)
  }
}

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:kGADAdSizeBanner];
  [self.view addSubview:self.bannerView];
}

@end

Configure GADBannerView properties

In order to load and display ads, GADBannerView requires a few properties be set.

• rootViewController - This view controller is used to present an overlay when the ad is clicked. It should normally be set to the view controller that contains the GADBannerView.
• adUnitID - This is the AdMob ad unit ID from which the GADBannerView should load ads.

Here's a code example showing how to set the two properties in the viewDidLoad method of a UIViewController:

override func viewDidLoad() {
  super.viewDidLoad()
  bannerView = GADBannerView(adSize: kGADAdSizeFullBanner)
  self.view.addSubview(bannerView)
  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
}

- (void)viewDidLoad {
  [super viewDidLoad];
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:kGADAdSizeBanner];
  [self.view addSubview:self.bannerView];
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
}

Ad unit IDs are created in the AdMob UI, and represent a place in your app where ads appear. If you show banner ads in two view controllers, for example, you can create an ad unit for each one.

Call loadRequest

Once the GADBannerView is in place and its properties configured, it's time to load an ad. This is done by calling the loadRequest: method, which takes a GADRequest object as its argument:

override func viewDidLoad() {
  super.viewDidLoad()
  bannerView = GADBannerView(adSize: kGADAdSizeFullBanner)
  self.view.addSubview(bannerView)
  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
  bannerView.load(GADRequest())
}

- (void)viewDidLoad {
  [super viewDidLoad];
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:kGADAdSizeBanner];
  [self.view addSubview:self.bannerView];
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GADRequest request]];
}

GADRequest objects represent a single ad request, and contain properties for things like targeting information.

Ad events

Through the use of GADBannerViewDelegate, you can listen for lifecycle events, such as when an ad is closed or the user leaves the app.

Registering for banner events

To register for banner ad events, set the delegate property on GADBannerView to an object that implements the GADBannerViewDelegate protocol. Generally, the class that implements banner ads also acts as the delegate class, in which case, the delegate property can be set to self.

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    bannerView = GADBannerView(adSize: kGADAdSizeBanner)
    bannerView.delegate = self
  }
}

#import "GADBannerView.h"
#import "GADBannerViewDelegate.h"

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  self.bannerView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  self.bannerView.delegate = self;
}

Implementing banner events

Each of the methods in GADBannerViewDelegate is marked as optional, so you only need to implement the methods you want. This example implements each method and logs a message to the console:

/// Tells the delegate an ad request loaded an ad.
func adViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("adViewDidReceiveAd")
}

/// Tells the delegate an ad request failed.
func adView(_ bannerView: GADBannerView,
    didFailToReceiveAdWithError error: GADRequestError) {
  print("adView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

/// Tells the delegate that a full screen view will be presented in response
/// to the user clicking on an ad.
func adViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("adViewWillPresentScreen")
}

/// Tells the delegate that the full screen view will be dismissed.
func adViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("adViewWillDismissScreen")
}

/// Tells the delegate that the full screen view has been dismissed.
func adViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("adViewDidDismissScreen")
}

/// Tells the delegate that a user click will open another app (such as
/// the App Store), backgrounding the current app.
func adViewWillLeaveApplication(_ bannerView: GADBannerView) {
  print("adViewWillLeaveApplication")
}

/// Tells the delegate an ad request loaded an ad.
- (void)adViewDidReceiveAd:(GADBannerView *)adView {
  NSLog(@"adViewDidReceiveAd");
}

/// Tells the delegate an ad request failed.
- (void)adView:(GADBannerView *)adView
    didFailToReceiveAdWithError:(GADRequestError *)error {
  NSLog(@"adView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}

/// Tells the delegate that a full screen view will be presented in response
/// to the user clicking on an ad.
- (void)adViewWillPresentScreen:(GADBannerView *)adView {
  NSLog(@"adViewWillPresentScreen");
}

/// Tells the delegate that the full screen view will be dismissed.
- (void)adViewWillDismissScreen:(GADBannerView *)adView {
  NSLog(@"adViewWillDismissScreen");
}

/// Tells the delegate that the full screen view has been dismissed.
- (void)adViewDidDismissScreen:(GADBannerView *)adView {
  NSLog(@"adViewDidDismissScreen");
}

/// Tells the delegate that a user click will open another app (such as
/// the App Store), backgrounding the current app.
- (void)adViewWillLeaveApplication:(GADBannerView *)adView {
  NSLog(@"adViewWillLeaveApplication");
}

See the AdMob Ad Delegate example for an implementation of banner delegate methods in the iOS API Demo app.

Swift Objective-C

Use cases

Here are some example use cases for these ad event methods.

Adding a banner to the view hierarchy once an ad is received

You may choose to hold off on adding a GADBannerView to the view hierarchy until an ad is received. You can do this by listening for the adViewDidReceiveAd: event:

func adViewDidReceiveAd(_ bannerView: GADBannerView) {
  view.addSubview(bannerView)
}

- (void)adViewDidReceiveAd:(GADBannerView *)adView {
  [self.view addSubview:adView];
}

The addSubview: method automatically removes a view from its parent if it already has one, so it's safe to make this call every time.

Animating a banner ad

You can also use the adViewDidReceiveAd: event to animate a banner ad once it's returned as shown in the following example:

func adViewDidReceiveAd(_ bannerView: GADBannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

- (void)adViewDidReceiveAd:(GADBannerView *)adView {
  adView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    adView.alpha = 1;
  }];
}

Third-party analytics

The SDK automatically tracks clicks and impressions, but if you're also using a third-party analytics solution, you can also track each of the GADBannerViewDelegate calls separately.

Pausing and resuming the app

The GADBannerViewDelegate protocol has methods to notify you of events such as when a click causes an overlay to be presented or dismissed, or invokes an external browser. If you want to know that these events happened because of ads, then register for these GADBannerViewDelegate methods.

But to catch all types of overlay presentations or external browser invocations, not just ones that come from ad clicks, your app is better off listening for the equivalent methods on UIViewController or UIApplication. Here is a table showing the equivalent iOS methods that are invoked at the same time as GADBannerViewDelegate methods:

Banner sizes

The following banner sizes are supported:

If an app tries to load a banner that's too big for its layout, the SDK won't display it. Instead, an error message will be written to the log.

Smart Banners

Smart Banners are ad units that render screen-width banner ads on any screen size across different devices in either orientation. Smart Banners help deal with increasing screen fragmentation across different devices by "smartly" detecting the width of the device in its current orientation and making the ad view that size.

Three ad heights are implemented in smart banners:

Typically, Smart Banners on phones have a height of 50dp in portrait and 32dp in landscape. On tablets, height is normally 90dp in both orientations.

When an image ad isn't large enough to take up the entire allotted space, the image will be centered, and the space on either side will be filled in.

To use Smart Banners, just specify kGADAdSizeSmartBannerPortrait for the ad size:

let bannerView = GADBannerView(adSize: kGADAdSizeSmartBannerPortrait)

GADBannerView *bannerView = [[GADBannerView alloc]
      initWithAdSize:kGADAdSizeSmartBannerPortrait];

Additional resources

Samples

• Banner sample app on GitHub: Swift | Objective-C

• API demo app (featuring advanced banner topics) on GitHub: Swift | Objective-C

Mobile Ads Garage video tutorials

• Banner Implementation
• Banner Best Practices

Next steps

• Create your own banner ad unit in the AdMob UI.
• Learn about Ad Targeting, Ad Events, and banner ad guidance.
• Try another ad format:
  • Interstitials
  • Rewarded Video