橫幅廣告

橫幅廣告是佔用螢幕上某個位置的矩形圖片或文字廣告。使用者與應用程式互動時,橫幅廣告會顯示在畫面上,且經過一段時間後可自動重新整理。如果您是行動廣告新手,不妨從這裡開始。

本指南說明如何將橫幅檢視畫面整合至 Unity 應用程式。除了程式碼片段和操作說明外,本指南還提供橫幅大小設定的相關資訊,以及其他資源的連結。

必要條件

請務必使用測試廣告進行測試

下列範例程式碼包含廣告單元 ID,可用於要求測試廣告。系統已特別將其設定為針對每項請求傳回測試廣告,而非正式廣告,因此可安全使用。

不過,在 Ad Manager 網頁介面中註冊應用程式,並建立要用於應用程式的廣告單元 ID 後,請在開發期間明確將裝置設為測試裝置

/21775744923/example/adaptive-banner

初始化 Mobile Ads SDK

在載入廣告之前,請讓應用程式呼叫 MobileAds.Initialize(),初始化 Mobile Ads SDK。這項操作只需執行一次,最好是在應用程式啟動時執行。

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 的建構函式包含下列參數:

  • adUnitIdAdManagerBannerView 應從中載入廣告的廣告單元 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);

AdManagerBannerView 的左上角會位於傳遞至建構函式的 x 和 y 值,其中原點為畫面左上角。

(選用) 建立自訂大小的橫幅檢視畫面

除了使用 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);

(選用) 多個廣告大小

Ad Manager 可讓您指定多個廣告大小,這些大小可在 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 會遵循您在 Ad Manager 使用者介面中指定的任何刷新率。如果您尚未啟用重新整理功能,請發出新的要求。如要進一步瞭解廣告單元重新整理功能 (例如設定重新整理頻率),請參閱「行動應用程式中廣告的重新整理頻率」。

下表列出標準橫幅廣告尺寸。

大小以 dp 為單位 (寬 x 高) 說明 可用性 AdSize 常數
320x50 標準橫幅廣告 手機和平板電腦 BANNER
320x100 大型橫幅 手機和平板電腦 LARGE_BANNER
300x250 IAB 中矩形 手機和平板電腦 MEDIUM_RECTANGLE
468x60 IAB 全尺寸橫幅 平板電腦 FULL_BANNER
728x90 IAB 排行榜 平板電腦 LEADERBOARD
提供的寬度 x 自適應高度 自動調整橫幅廣告 手機和平板電腦 不適用
螢幕寬度 x 32|50|90 智慧橫幅 手機和平板電腦 SMART_BANNER
進一步瞭解自動調整橫幅廣告,這類廣告將取代智慧型橫幅廣告

應用程式事件

應用程式事件可讓您建立廣告,傳送訊息至應用程式程式碼。應用程式就能根據這些訊息採取行動。

您可以使用 AppEvent 監聽 Ad Manager 專屬的應用程式事件。這些事件可以在廣告生命週期的任何時間點發生,甚至在載入前也行。

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

以下範例說明如何根據名稱為 color 的應用程式事件變更應用程式的背景顏色:

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

其他資源