Banery reklamowe

Wyświetlenia banera to prostokątne reklamy graficzne lub tekstowe, które zajmują miejsce na ekranie. Pozostają na ekranie, gdy użytkownicy wchodzą w interakcję z aplikacją, i mogą odświeżać się automatycznie po upływie określonego czasu. Jeśli dopiero zaczynasz korzystać z reklam mobilnych, powinien on być dla Ciebie przydatnym punktem wyjścia.

Z tego przewodnika dowiesz się, jak zintegrować widoki banerów z aplikacją w Unity. Oprócz fragmentów kodu i instrukcji znajdziesz tu też informacje o prawidłowym rozmiarze banerów oraz linki do dodatkowych materiałów.

Wymagania wstępne

Zawsze korzystaj z reklam testowych

Poniższy przykładowy kod zawiera identyfikator jednostki reklamowej, którego możesz używać do wysyłania żądań reklam testowych. Został on specjalnie skonfigurowany tak, aby w przypadku każdego żądania zwracał reklamy testowe, a nie produkcyjne, dzięki czemu jest bezpieczny w użyciu.

Jeśli jednak zarejestrujesz aplikację w interfejsie internetowym Ad Managera i utworzysz własne identyfikatory jednostek reklamowych do wykorzystania w niej, podczas tworzenia aplikacji musisz wyraźnie skonfigurować urządzenie jako urządzenie testowe.

/6499/example/banner

Zainicjowanie pakietu SDK do reklam mobilnych

Przed wczytaniem reklam poproś aplikację o zainicjowanie pakietu SDK do reklam mobilnych, wywołując metodę MobileAds.Initialize(). Wystarczy to zrobić tylko raz, najlepiej podczas uruchamiania aplikacji.

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

Jeśli korzystasz z zapośredniczenia, przed wczytaniem reklam poczekaj na wywołanie zwrotne, ponieważ zapewni to zainicjowanie wszystkich adapterów zapośredniczenia.

Przykład BannerView

Poniższy przykładowy kod zawiera szczegółowe informacje o korzystaniu z widoku banera. W tym przykładzie tworzysz wystąpienie widoku banera, używasz polecenia AdManagerAdRequest do wczytania reklamy w widoku banera, a następnie rozszerzasz jego możliwości przez obsługę zdarzeń cyklu życia.

Tworzenie widoku banera

Pierwszym krokiem w korzystaniu z widoku banera jest utworzenie instancji widoku banera w skrypcie C# dołączonym do interfejsu GameObject.


  // This ad unit is configured to always serve test ads.
  private string _adUnitId = "/6499/example/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);
  }

Konstruktor obiektu AdManagerBannerView zawiera te parametry:

  • adUnitId: identyfikator jednostki reklamowej, z której AdManagerBannerView ma wczytywać reklamy.
  • AdSize: rozmiar reklamy, którego chcesz użyć. Szczegółowe informacje znajdziesz w artykule Rozmiary banerów.
  • AdPosition: pozycja, w której mają znajdować się banery. Wyliczenie AdPosition zawiera prawidłowe wartości pozycji reklamy.

Zwróć uwagę na to, jak używane są różne jednostki reklamowe w zależności od platformy. Do wysyłania żądań reklamy w iOS musisz używać jednostek reklamowych na iOS, a do wysyłania żądań na Androida – jednostek reklamowych na Androida.

(Opcjonalnie) Tworzenie widoku banera z pozycją niestandardową

Aby mieć większą kontrolę nad tym, w którym miejscu na ekranie znajduje się obiekt AdManagerBannerView, niż jest to możliwe za pomocą wartości AdPosition, użyj konstruktora, który ma współrzędne X i Y jako parametry:

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

Lewy górny róg obiektu AdManagerBannerView jest położony przy wartościach x i y przekazywanych do konstruktora, przy czym punkt początkowy znajduje się w lewym górnym rogu ekranu.

(Opcjonalnie) Tworzenie widoku banera o niestandardowym rozmiarze

Oprócz korzystania ze stałej AdSize możesz też określić rozmiar reklamy:

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

(Opcjonalnie) Wiele rozmiarów reklam

Ad Manager umożliwia określenie wielu rozmiarów reklam, które mogą być wyświetlane w AdManagerBannerView. Przed wdrożeniem tej funkcji w pakiecie SDK utwórz element zamówienia kierowany na te same jednostki reklamowe powiązane z kreacjami o różnych rozmiarach.

W aplikacji przekaż do funkcji ValidAdSizes wiele parametrów AdSize:

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

Jeśli AdManagerAdView zmieni rozmiar podczas odświeżania, układ powinien automatycznie dostosować się do nowego rozmiaru. Dopóki nie pojawi się następna reklama, AdManagerAdView domyślnie stosuje się rozmiar przekazywany w pierwszym parametrze.

Wczytywanie banera reklamowego

Gdy obiekt AdManagerBannerView będzie gotowy, wczytaj reklamę przy użyciu metody LoadAd() w klasie AdManagerBannerView. Pobiera parametr , który zawiera informacje o środowisku wykonawczym, takie jak informacje o kierowaniu, etykiety wykluczeń i identyfikator podany przez wydawcę.

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

Nasłuchiwanie zdarzeń wyświetlenia banera

Aby dostosować działanie reklamy, możesz uwzględnić kilka zdarzeń w jej cyklu życia, takich jak wczytywanie, otwarcie lub zamknięcie. Aby nasłuchiwać tych zdarzeń, zarejestruj przedstawiciela:

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

Zniszcz widok banera

Gdy skończysz korzystać z widoku banera, wywołaj Destroy(), aby zwolnić zasoby.

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

Znakomicie. Twoja aplikacja jest już gotowa do wyświetlania banerów reklamowych.

W tabeli poniżej znajdziesz standardowe rozmiary banerów.

Rozmiar w dp (szer.xwys.) Opis Dostępność Stała rozmiar reklamy
320 x 50 Standardowy baner Telefony i tablety BANNER
320 x 100 Duży baner Telefony i tablety LARGE_BANNER
300 x 250 Średni prostokąt IAB Telefony i tablety MEDIUM_RECTANGLE
468 x 60 Baner IAB w pełnym rozmiarze Tablety FULL_BANNER
728 x 90 Tabela wyników IAB Tablety LEADERBOARD
Podana szerokość x Wysokość adaptacyjna Baner adaptacyjny Telefony i tablety Nie dotyczy
Szerokość ekranu x 32|50|90 Baner inteligentny Telefony i tablety SMART_BANNER
Dowiedz się więcej o banerach adaptacyjnych, które mają zastąpić banery inteligentne.

Zdarzenia w aplikacjach

Zdarzenia w aplikacji pozwalają tworzyć reklamy, które mogą wysyłać komunikaty do kodu aplikacji. Na podstawie tych komunikatów aplikacja może podejmować działania.

Możesz nasłuchiwać zdarzeń Ad Managera w aplikacjach za pomocą parametru AppEvent. Zdarzenia te mogą wystąpić w dowolnym momencie cyklu życia reklamy, nawet przed wywołaniem wczytywania.

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

Wartość OnAppEventReceived jest podwyższana, gdy w reklamie wystąpi zdarzenie w aplikacji. Oto przykład obsługi tego zdarzenia w kodzie:

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

Oto przykład zmiany koloru tła aplikacji w zależności od zdarzenia w aplikacji o nazwie koloru:

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

A oto odpowiednia kreacja wysyłająca zdarzenie w aplikacji koloru:

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

Dodatkowe materiały