Anchored adaptive banners

Adaptive banners are the next generation of responsive ads, maximizing performance by optimizing ad size for each device. Improving on smart banners, which only supported fixed heights, adaptive banners let developers specify the ad-width and use this to determine the optimal ad size.

To pick the best ad size, adaptive banners use fixed aspect ratios instead of fixed heights. This results in banner ads that occupy a more consistent portion of the screen across devices and provide opportunities for improved performance.

When working with adaptive banners, note that these will always return a constant size for a given device and width. Once you've tested your layout on a given device, you can be sure that the ad size will not change. However, the size of the banner creative may change across different devices. Consequently, it is recommended to ensure your layout can accommodate variances in ad height. In rare cases, the full adaptive size may not be filled and a standard size creative will be centered in this slot instead.

When to use adaptive banners

Adaptive banners are designed to be a drop-in replacement for the industry standard 320x50 banner size, as well as the smart banner format they supersede.

These banner sizes are commonly used as anchored banners, which are usually locked to the top or bottom of the screen. For such anchored banners, the aspect ratio when using adaptive banners will be similar to that of a standard 320x50 ad, as can be seen in these screenshots:

An adaptive banner makes better use of the available screen size. Additionally, compared to a smart banner, an adaptive banner is a better choice because:

  • It uses a provided width rather than full screen width, enabling you to account for safe areas.

  • It selects an optimal height for the specific device, rather than having a constant height across different sized devices, mitigating the effects of device fragmentation.

Implementation notes

When implementing adaptive banners in your app, keep the following points in mind:

  • You must know the width of the view that the ad will be placed in, and this should take into account the device width and any safe areas that are applicable.

  • Ensure that your ad view background is opaque to be compliant with AdMob policies when smaller ad sizes serve that do not fill the ad slot.

  • Ensure you are using the latest version of the Google Mobile Ads SDK. For mediation, use the latest version mediation adapters.

  • The adaptive banner sizes are designed to work best when using the full available width. In most cases, this will be the full width of the screen of the device in use. Be sure to take into account applicable safe areas.

  • The Google Mobile Ads SDK returns an optimized ad height for the given width in a GADAdSize.

  • There are three methods to get an ad size for adaptive banners—one for landscape, one for portrait, and one for the current orientation at the time of execution. For more information, see the full API documentation below.

  • The size returned for a given width on a given device will always be the same, hence once you've tested your layout on a given device, you can be sure that the ad size will not change.

  • Anchored banner height is never larger than 15% of the device's height and never smaller than 50 points.

Quick start

Follow the steps below to implement a simple adaptive anchor banner.

  1. Create a GADBannerView object and set your ad unit ID.

  2. Get an adaptive banner ad size. The size you get will be used to request your adaptive banner. To get the adaptive ad size, make sure that you:

    1. Get the width of the device in use, or set your own width if you don’t want to use the full width of the screen.
    2. Use the appropriate static methods on the ad size class, such as GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) to get an adaptive GADAdSize object for the chosen orientation.
    3. Set the ad size on the banner ad view—do this by setting the adSize property on GADBannerView.

    A full example is included below.

  3. Create an ad request object and load your banner using the loadRequest method on your prepared ad view, just like you would with a normal banner request.

Sample code

Here's an example of a view controller that will load and reload an adaptive banner on any iOS version, taking into account safe area and view orientation:

Swift

class ViewController: UIViewController {

  @IBOutlet weak var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Step 1 - Create a GADBannerView (in code or interface builder) and set the
    // ad unit ID on it.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    bannerView.rootViewController = self
  }

  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    // Note loadBannerAd is called in viewDidAppear as this is the first time that
    // the safe area is known. If safe area is not a concern (e.g., your app is
    // locked in portrait mode), the banner can be loaded in viewWillAppear.
    loadBannerAd()
  }

  override func viewWillTransition(to size: CGSize,
                          with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to:size, with:coordinator)
    coordinator.animate(alongsideTransition: { _ in
      self.loadBannerAd()
    })
  }

  func loadBannerAd() {
    // Step 2 - Determine the view width to use for the ad width.
    let frame = { () -> CGRect in
      // Here safe area is taken into account, hence the view frame is used
      // after the view has been laid out.
      if #available(iOS 11.0, *) {
        return view.frame.inset(by: view.safeAreaInsets)
      } else {
        return view.frame
      }
    }()
    let viewWidth = frame.size.width

    // Step 3 - Get Adaptive GADAdSize and set the ad view.
    // Here the current interface orientation is used. If the ad is being preloaded
    // for a future orientation change or different orientation, the function for the
    // relevant orientation should be used.
    bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

    // Step 4 - Create an ad request and load the adaptive banner ad.
    bannerView.load(GADRequest())
  }
}

Objective-C

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Step 1 - Create a GADBannerView (in code or interface builder) and set the
  // ad unit ID on it.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
  self.bannerView.rootViewController = self;
}

- (void)viewDidAppear:(BOOL)animated {
  [super viewDidAppear:animated];
  // Note loadBannerAd is called in viewDidAppear as this is the first time that
  // the safe area is known. If safe area is not a concern (e.g., your app is
  // locked in portrait mode), the banner can be loaded in viewWillAppear.
  [self loadBannerAd];
}

- (void)viewWillTransitionToSize:(CGSize)size
    withTransitionCoordinator:(id)coordinator {
  [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
  [coordinator animateAlongsideTransition:^(id
      _Nonnull context) {
        [self loadBannerAd];
  } completion:nil];
}

- (void)loadBannerAd {
  // Step 2 - Determine the view width to use for the ad width.
  CGRect frame = self.view.frame;
  // Here safe area is taken into account, hence the view frame is used after
  // the view has been laid out.
  if (@available(iOS 11.0, *)) {
    frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
  }
  CGFloat viewWidth = frame.size.width;

  // Step 3 - Get Adaptive GADAdSize and set the ad view.
  // Here the current interface orientation is used. If the ad is being
  // preloaded for a future orientation change or different orientation, the
  // function for the relevant orientation should be used.
  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

  // Step 4 - Create an ad request and load the adaptive banner ad.
  GADRequest *request = [GADRequest request];
  [self.bannerView loadRequest:request];
}

@end

Here, the function GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) is used to get the size for a banner in an anchored position for the current interface orientation. For pre-loading an anchored banner in a given orientation, use the relevant function from GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) and GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width).

Complete example on GitHub

Swift Objective-C