このページは Cloud Translation API によって翻訳されました。

バナー広告

バナービューは、画面の一部分に表示される長方形のイメージ広告またはテキスト広告です。アプリの操作中は画面に表示され続けますが、一定時間が経過すると自動的に更新されるよう設定できます。モバイル広告を初めてお使いの場合は、この広告から始めることをおすすめします。

このガイドでは、バナービューを Unity アプリに統合する方法を説明します。コードスニペットと設定方法のほか、バナーの適切なサイズに関する情報、他の関連リソースへのリンクも紹介します。

前提条件

スタートガイドの手順を完了していること。

常にテスト広告でテストする

次のサンプルコードには、テスト広告のリクエストに使用できる広告ユニット ID が含まれています。この ID は、どのリクエストに対しても実際の広告ではなくテスト広告を返すように設定されており、安全に使用できます。

ただし、アドマネージャーのウェブインターフェースでアプリを登録し、アプリで使用する独自の広告ユニット ID を作成した後は、開発中に使用するデバイスを明示的にテストデバイスとして設定する必要があります。

/21775744923/example/adaptive-banner

Mobile Ads SDK を初期化する

広告を読み込む前に MobileAds.Initialize() を呼び出して、アプリで Mobile Ads SDK を初期化します。この処理は 1 回だけ行います（アプリの起動時に行うのが理想的です）。

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

メディエーションを使用している場合、すべてのメディエーションアダプタを確実に初期化できるよう、広告の読み込みはコールバックが発生してから行います。

BannerView の例

下のサンプルコードは、バナービューの使用方法を示したものです。バナービューのインスタンスを作成し、AdManagerAdRequest を使って広告をバナービューに読み込んだ後、ライフサイクルイベントのハンドリングによって機能を拡張する流れになっています。

バナービューを作成する

バナービューを使用するにはまず、GameObject に添付された C# スクリプト内で、バナービューのインスタンスを作成します。


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

AdManagerBannerView のコンストラクタには、次のパラメータがあります。

adUnitId: AdManagerBannerView が広告を読み込む広告ユニットの ID です。
AdSize: 使用する広告サイズ。詳しくは、バナーサイズをご覧ください。
AdPosition: バナービューを配置する位置です。AdPosition 列挙型は、広告の位置として有効な値を示します。

使用する広告ユニットの種類はプラットフォームに応じて異なることに注意しましょう。iOS での広告リクエストには iOS 用の広告ユニットを、Android での広告リクエストには Android 用の広告ユニットを使用する必要があります。

（任意）位置をカスタム指定してバナービューを作成する

AdManagerBannerView が画面上で配置される場所を、AdPosition 値による指定よりも柔軟に管理するには、x 座標と y 座標のパラメータを持つコンストラクタを使用します。

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

この場合、コンストラクタに渡された x 値と y 値の座標に、AdManagerBannerView の左上の角が配置されます（原点は画面の左上です）。

（任意）サイズをカスタム指定してバナービューを作成する

広告のサイズは、AdSize 定数で指定するほか、カスタム指定することも可能です。

// 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);

（省略可）複数の広告サイズ

アドマネージャーでは、AdManagerBannerView の配信対象となる広告サイズを複数指定できます。SDK にこの機能を実装する前に、同じ広告ユニットをターゲティングして、異なるサイズのクリエイティブを関連付けた広告申込情報を作成してください。

アプリで、複数の AdSize パラメータを 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),
};

更新時に AdManagerAdView のサイズが変わった場合は、レイアウトが新しいサイズに合わせて自動的に調整されるようになります。AdManagerAdView は、次の広告が返されるまで、最初のパラメータで渡されたサイズにデフォルトで設定されます。

バナー広告を読み込む

AdManagerBannerView を配置したら、AdManagerBannerView クラスの LoadAd() メソッドを使用して広告の読み込みに進みます。ターゲティング情報、除外ラベル、パブリッシャー指定の 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);
}

バナービューのイベントをリッスンする

広告の動作をカスタマイズするには、広告のライフサイクルで生じるさまざまなイベント（読み込み、開始、終了など）を利用します。こういったイベントをリッスンするには、次のようにデリゲートを登録します。

/// <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() を呼び出してリソースを解放してください。

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

これで、アプリにバナー広告を表示できるようになりました。

広告を更新する

広告ユニットの更新を有効にしていれば、広告の読み込みに失敗しても、別の広告をリクエストする必要はありません。Google Mobile Ads SDK では、アドマネージャーの管理画面で指定した更新頻度が使用されます。更新を有効にしていない場合は、新しいリクエストを発行します。更新頻度の設定など、広告ユニットの更新について詳しくは、モバイルアプリでの広告の更新頻度をご覧ください。

バナーのサイズ

標準のバナーサイズについては、以下の表をご覧ください。

サイズ（単位は dp、幅×高さ）	説明	対象	AdSize の定数値
320×50	標準バナー	携帯電話とタブレット	`BANNER`
320×100	バナー（大）	携帯電話とタブレット	`LARGE_BANNER`
300×250	IAB レクタングル（中）	携帯電話とタブレット	`MEDIUM_RECTANGLE`
468×60	IAB フルサイズバナー	タブレット	`FULL_BANNER`
728×90	IAB ビッグバナー	タブレット	`LEADERBOARD`
指定された幅 × 最適な高さ	アダプティブバナー	携帯電話とタブレット	なし
画面の幅×32、50 または 90	スマートバナー	携帯電話とタブレット	`SMART_BANNER`
今後はスマートバナーに代わってアダプティブバナーが使用される予定です。詳しくは、アダプティブバナーをご覧ください。

アプリ内イベント

アプリ内イベントを利用することで、アプリのコードにメッセージを送信する広告を作成できます。アプリは、送信されたメッセージに基づいて処理を行います。

アドマネージャー専用のアプリ内イベントをリッスンするには、AppEvent を使用します。これらのイベントは、広告ライフサイクルのあらゆるタイミングで（load が呼び出される前でも）発生する可能性があります。

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 は、広告でアプリ内イベントが発生したときに発生します。コードでこのイベントを処理する方法の例を次に示します。

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

色名を含むアプリ内イベントに応じてアプリの背景色を変更する方法について、次に例を示します。

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

また、対応するクリエイティブは次のとおりです。これは、色に関するアプリ内イベントを送信します。

<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>

参考情報

HelloWorld の例: すべての広告フォーマットの最小限の実装