Banner ads

Banner views are rectangular image or text ads that occupy a spot on screen. 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 views into a Unity app. In addition to code snippets and instructions, it also includes information about sizing banners properly and links to additional resources.

Prerequisites

• Complete the Get started guide.

Always test with test ads

The following sample code contains an ad unit ID which you can use to request test ads. It's been specially configured to return test ads rather than production ads for every request, making it safe to use.

However, after you've registered an app in the Ad Manager web interface and created your own ad unit IDs for use in your app, explicitly configure your device as a test device during development.

/21775744923/example/adaptive-banner

Initialize the Mobile Ads SDK

Before loading ads, have your app initialize the Mobile Ads SDK by calling MobileAds.Initialize(). This needs to be done only once, ideally at app launch.

using GoogleMobileAds;
using GoogleMobileAds.Api;

public class GoogleMobileAdsDemoScript : MonoBehaviour
{
    public void Start()
    {
        // Initialize the Google Mobile Ads SDK.
        MobileAds.Initialize((InitializationStatus initStatus) =>
        {
            // This callback is called once the MobileAds SDK is initialized.
        });
    }
}

If you're using mediation, wait until the callback occurs before loading ads as this will ensure that all mediation adapters are initialized.

BannerView example

The sample code below details how to use the banner view. In the example, you create an instance of a banner view, use an AdManagerAdRequest to load an ad into the banner view, and then extend its capabilities by handling lifecycle events.

Create a banner view

The first step in using a banner view is to create an instance of a banner view in a C# script attached to a GameObject.

  // This ad unit is configured to always serve test ads.
  private string _adUnitId = "/21775744923/example/adaptive-banner";

  AdManagerBannerView _bannerView;

  /// <summary>
  /// Creates a 320x50 banner view at top of the screen.
  /// </summary>
  public void CreateBannerView()
  {
      Debug.Log("Creating banner view");

      // If we already have a banner, destroy the old one.
      if (_bannerView != null)
      {
          DestroyAd();
      }

      // Create a 320x50 banner at top of the screen
      _bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
  }

The constructor for a AdManagerBannerView has the following parameters:

• adUnitId: The ad unit ID from which the AdManagerBannerView should load ads.
• AdSize: The ad size you'd like to use. Consult Banner sizes for details.
• AdPosition: The position where the banner views should be placed. The AdPosition enum lists the valid ad position values.

Note how different ad units are used, depending on the platform. You need to use an iOS ad unit for making ad requests on iOS and an Android ad unit for making requests on Android.

(Optional) Create a banner view with a custom position

For greater control over where a AdManagerBannerView is placed on screen than what's offered by AdPosition values, use the constructor that has x- and y-coordinates as parameters:

// Create a 320x50 banner views at coordinate (0,50) on screen.
_bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, 0, 50);

The top-left corner of the AdManagerBannerView is positioned at the x and y values passed to the constructor, where the origin is the top-left of the screen.

(Optional) Create a banner view with a custom size

In addition to using an AdSize constant, you can also specify a custom size for your ad:

// Use the AdSize argument to set a custom size for the ad.
AdSize adSize = new AdSize(250, 250);
_bannerView = new AdManagerBannerView(_adUnitId, adSize, AdPosition.Bottom);

(Optional) Multiple ad sizes

Ad Manager lets you specify multiple ad sizes which could be eligible to serve in an AdManagerBannerView. Before implementing this feature in the SDK, create a line item targeting the same ad units associated with different size creatives.

In your app, pass multiple AdSize parameters into ValidAdSizes:

var adView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
adView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner, new AdSize(120, 20), new AdSize(250, 250),
};

If AdManagerAdView changes size at refresh time, your layout should be able to automatically adapt to the new size. AdManagerAdView defaults to the size passed in the first parameter until the next ad returns.

Load a banner ad

After the AdManagerBannerView is in place, proceed to load an ad with the LoadAd() method in the AdManagerBannerView class. It takes an parameter which holds runtime information, such as targeting info, exclusion labels, and the publisher provided ID.

/// <summary>
/// Creates the banner view and loads a banner ad.
/// </summary>
public void LoadAd()
{
    // create an instance of a banner view first.
    if(_bannerView == null)
    {
        CreateAdManagerBannerView();
    }

    // create our request used to load the ad.
    var adRequest = new AdManagerAdRequest();

    // send the request to load the ad.
    Debug.Log("Loading banner ad.");
    _bannerView.LoadAd(adRequest);
}

Tip: You can use ad load calls to build up a cache of preloaded ads before you intend to show them, so that ads can be shown with zero latency when needed. Since ads expire after an hour, you should clear this cache and reload with new ads every hour.

Listen to banner view events

To customize the behavior of your ad, you can hook into a number of events in the ad's lifecycle, such as loading, opening, or closing. To listen for these events, register a delegate:

/// <summary>
/// listen to events the banner view may raise.
/// </summary>
private void ListenToAdEvents()
{
    // Raised when an ad is loaded into the banner view.
    _bannerView.OnBannerAdLoaded += () =>
    {
        Debug.Log("Banner view loaded an ad with response : "
            + _bannerView.GetResponseInfo());
    };
    // Raised when an ad fails to load into the banner view.
    _bannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
    {
        Debug.LogError("Banner view failed to load an ad with error : "
            + error);
    };
    // Raised when the ad is estimated to have earned money.
    _bannerView.OnAdPaid += (AdValue adValue) =>
    {
        Debug.Log(String.Format("Banner view paid {0} {1}.",
            adValue.Value,
            adValue.CurrencyCode));
    };
    // Raised when an impression is recorded for an ad.
    _bannerView.OnAdImpressionRecorded += () =>
    {
        Debug.Log("Banner view recorded an impression.");
    };
    // Raised when a click is recorded for an ad.
    _bannerView.OnAdClicked += () =>
    {
        Debug.Log("Banner view was clicked.");
    };
    // Raised when an ad opened full screen content.
    _bannerView.OnAdFullScreenContentOpened += () =>
    {
        Debug.Log("Banner view full screen content opened.");
    };
    // Raised when the ad closed full screen content.
    _bannerView.OnAdFullScreenContentClosed += () =>
    {
        Debug.Log("Banner view full screen content closed.");
    };
}

Destroy the banner view

When finished using the banner view, be sure to call Destroy() to release resources.

/// <summary>
/// Destroys the banner view.
/// </summary>
public void DestroyAd()
{
    if (_bannerView != null)
    {
        Debug.Log("Destroying banner view.");
        _bannerView.Destroy();
        _bannerView = null;
    }
}

That's it! Your app is now ready to display banner ads.

Banner sizes

The table below lists the standard banner sizes.

Size in dp (WxH)	Description	Availability	AdSize constant
320x50	Standard Banner	Phones and Tablets	BANNER
320x100	Large Banner	Phones and Tablets	LARGE_BANNER
300x250	IAB Medium Rectangle	Phones and Tablets	MEDIUM_RECTANGLE
468x60	IAB Full-Size Banner	Tablets	FULL_BANNER
728x90	IAB Leaderboard	Tablets	LEADERBOARD
Provided width x Adaptive height	Adaptive banner	Phones and Tablets	N/A
Screen width x 32|50|90	Smart banner	Phones and Tablets	SMART_BANNER
Learn more about Adaptive Banners, intended to replace Smart Banners.

Note: If an Android app tries to load a banner that's too big for its layout, the SDK won't display it, logging an error message instead.

App events

App events let you create ads that can send messages to their app code. The app can then take actions based on these messages.

You can listen for Ad Manager specific app events using AppEvent. These events can occur at any time during the ad's lifecycle, even before load is called.

namespace GoogleMobileAds.Api.AdManager;

/// The App event message sent from the ad.
public class AppEvent
{
    // Name of the app event.
    string Name;
    // Argument passed from the app event.
    string Value;
}

OnAppEventReceived is raised when an app event occurs in an ad. Here is an example of how to handle this event in your code:

_bannerview.OnAppEventReceived += (AppEvent args) =>
{
    Debug.Log($"Received app event from the ad: {args.Name}, {args.Value}.");
};

Here is an example showing how to change the background color of your app depending on an app event with a name of color:

_bannerview.OnAppEventReceived += (AppEvent args) =>
{
  if (args.Name == "color")
  {
    Color color;
    if (ColorUtility.TryParseColor(arg.Value, out color))
    {
      gameObject.GetComponent<Renderer>().material.color = color;
    }
  }
};

And, here is the corresponding creative that sends color app event:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Additional resources

• HelloWorld example: A minimal implementation of all ad formats.