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 supported only fixed heights, adaptive banners let you specify the ad width and use this to determine the optimal ad size.

To choose 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 provides opportunities for improved performance.

When working with adaptive banners, note that they 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, we recommend that your layout 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.

Prerequisites

When to use adaptive banners

Adaptive banners are designed to be a drop-in replacement for both the industry standard 320x50 banner size and the smart banner format which 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 the three examples below:


320x50 banner
Adaptive banner
Smart banner

The 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 any width you provide, rather than forcing the width to be full screen, enabling you to account for the safe area on iOS, and display cutouts on Android.

  • It selects an optimal height for the specific device, rather than having a constant height across different size 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 or cutouts 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 Unity plugin. For mediation, use the latest version of each mediation adapter.
  • 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 will size the banner with an optimized ad height for the given width when using the adaptive AdSize APIs.
  • There are three methods to get an ad size for adaptive: AdSize.GetLandscapeAnchoredAdaptiveBannerAdSizeWithWidth for landscape, AdSize.GetPortraitAnchoredAdaptiveBannerAdSizeWithWidth for portrait, and AdSize.GetCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth for the current orientation at the time of execution.
  • 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 the lesser of 15% of the device's height or 90 density independent pixels and never smaller than 50 density independent pixels.
  • For full width banners, you can use the AdSize.FullWidth flag instead of supplying a specific width.

Quickstart

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

  1. 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 in density independent pixels, or set your own width if you don't want to use the full width of the screen. Since Unity APIs such as Screen.width return absolute pixels, you need to divide by device scale (retrievable from MobileAds.Utils.GetDeviceScale()).
    2. Use the AdSize.FullWidth flag for full width banners.
    3. Use the appropriate static methods on the ad size class, such as AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(width) to get an adaptive AdSize object for the current orientation.
  2. Create a BannerView object with your ad unit ID, the adaptive size, and the relevant position for your ad.
  3. Create an ad request object and load your banner using the LoadAd() method on your prepared ad view, just like you would with a normal banner request.

Code example

Here's an example script that loads and reloads an adaptive banner to fit the width of the screen, taking into account safe area:

using UnityEngine;
using System;
using GoogleMobileAds.Api;

public class AdaptiveBannerSample : MonoBehaviour
{
    private BannerView _bannerView;

    // Use this for initialization
    void Start()
    {
        // Set your test devices.
        // https://developers.google.com/admob/unity/test-ads
        RequestConfiguration requestConfiguration = new RequestConfiguration
        {
            TestDeviceIds = new List<string>
            {
                AdRequest.TestDeviceSimulator,
                // Add your test device IDs (replace with your own device IDs).
                #if UNITY_IPHONE
                "96e23e80653bb28980d3f40beb58915c"
                #elif UNITY_ANDROID
                "75EF8D155528C04DACBBA6F36F433035"
                #endif
            }
        };
        MobileAds.SetRequestConfiguration(requestConfiguration);

        // Initialize the Google Mobile Ads SDK.
        MobileAds.Initialize((InitializationStatus status) =>
        {
            RequestBanner();
        });
    }

    public void OnGUI()
    {
        GUI.skin.label.fontSize = 60;
        Rect textOutputRect = new Rect(
          0.15f * Screen.width,
          0.25f * Screen.height,
          0.7f * Screen.width,
          0.3f * Screen.height);
        GUI.Label(textOutputRect, "Adaptive Banner Example");
    }

    private void RequestBanner()
    {
        // These ad units are configured to always serve test ads.
        #if UNITY_EDITOR
            string adUnitId = "unused";
        #elif UNITY_ANDROID
            string adUnitId = "ca-app-pub-3212738706492790/6113697308";
        #elif UNITY_IPHONE
            string adUnitId = "ca-app-pub-3212738706492790/5381898163";
        #else
            string adUnitId = "unexpected_platform";
        #endif

        // Clean up banner ad before creating a new one.
        if (_bannerView != null)
        {
            _bannerView.Destroy();
        }

        AdSize adaptiveSize =
                AdSize.GetCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(AdSize.FullWidth);

        _bannerView = new BannerView(adUnitId, adaptiveSize, AdPosition.Bottom);

        // Register for ad events.
        _bannerView.OnBannerAdLoaded += OnBannerAdLoaded;
        _bannerView.OnBannerAdLoadFailed += OnBannerAdLoadFailed;

        AdRequest adRequest = new AdRequest();

        // Load a banner ad.
        _bannerView.LoadAd(adRequest);
    }

    #region Banner callback handlers

    private void OnBannerAdLoaded(object sender, EventArgs args)
    {
        Debug.Log("Banner view loaded an ad with response : "
                 + _bannerView.GetResponseInfo());
        Debug.Log("Ad Height: {0}, width: {1}",
                _bannerView.GetHeightInPixels(),
                _bannerView.GetWidthInPixels());
    }

    private void OnBannerAdLoadFailed(LoadAdError error)
    {
        Debug.LogError("Banner view failed to load an ad with error : "
                + error);
    }

    #endregion
}

Here the function AdSize.GetCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth 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 AdSize.GetPortraitAnchoredAdaptiveBannerAdSizeWithWidth and AdSize.GetLandscapeAnchoredAdaptiveBannerAdSizeWithWidth.