Banery reklamowe

Wyświetlenia banerów 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ą być automatycznie odświeżane po upływie określonego czasu. Jeśli dopiero zaczynasz przygodę z reklamami mobilnymi, warto zacząć od nich.

Z tego przewodnika dowiesz się, jak zintegrować wyświetlenia banerów w aplikacji Unity. Oprócz fragmentów kodu i instrukcji zawiera on też informacje o prawidłowym dopasowaniu rozmiaru banerów oraz linki do dodatkowych materiałów.

Wymagania wstępne

Zawsze testuj reklamy za pomocą reklam testowych

Podany poniżej przykładowy kod zawiera identyfikator jednostki reklamowej, którego możesz użyć do żądania reklam testowych. Jest on specjalnie skonfigurowany tak, aby zwracać reklamy testowe, a nie reklamy produkcyjne w przypadku każdego żądania, co czyni go bezpiecznym w użyciu.

Po zarejestrowaniu aplikacji w interfejsie internetowym Ad Managera i utworzeniu własnych identyfikatorów jednostek reklamowych do użycia w aplikacji musisz podczas jej tworzenia wyraźnie skonfigurować urządzenie jako urządzenie testowe.

/21775744923/example/adaptive-banner

Inicjowanie pakietu SDK do reklam mobilnych

Przed wczytaniem reklam zainicjuj pakiet SDK do reklam mobilnych w aplikacji, wywołując funkcję 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 zaczekaj na wywołanie zwrotne, aby mieć pewność, że wszystkie adaptery zapośredniczenia są zainicjowane.

Przykład banera

Przykładowy kod poniżej zawiera szczegółowe informacje o używaniu widoku banera. W tym przykładzie tworzysz instancję widoku banera, używasz funkcji AdManagerAdRequest, aby wczytać reklamę do widoku banera, a potem rozszerzasz możliwości widoku, obsługując zdarzenia cyklu życia.

Tworzenie widoku banera

Pierwszym krokiem w używaniu widoku banera jest utworzenie jego wystąpienia w skrypcie C# dołączonym do 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);
  }

Konstruktor obiektu AdManagerBannerView ma te parametry:

  • adUnitId: identyfikator jednostki reklamowej, z której AdManagerBannerView ma wczytywać reklamy.
  • AdSize: rozmiar reklamy, którego chcesz użyć. Więcej informacji znajdziesz w sekcji Rozmiary banerów.
  • AdPosition: pozycja, na której powinny się wyświetlać wyświetlenia banera. Wyliczeniowa AdPosition zawiera listę prawidłowych wartości pozycji reklamy.

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

(Opcjonalnie) Tworzenie widoku banera z niestandardową pozycją

Aby uzyskać większą kontrolę nad tym, gdzie AdManagerBannerView jest umieszczany na ekranie, niż oferują to 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 elementu AdManagerBannerView jest umieszczony w punktach x i y przekazanych konstruktorowi, gdzie punkt początkowy znajduje się w lewym górnym rogu ekranu.

(Opcjonalnie) Tworzenie widoku banera o niestandardowym rozmiarze

Oprócz stałej wartości AdSize możesz też określić niestandardowy 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 kilku rozmiarów reklam, które mogą być wyświetlane w elementach AdManagerBannerView. Zanim wdrożysz tę funkcję w SDK, utwórz element zamówienia kierowany na te same jednostki reklamowe powiązane z kreacjami o różnych rozmiarach.

W aplikacji prześlij wiele parametrów AdSize do funkcji 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),
};

Jeśli AdManagerAdView zmieni rozmiar w momencie odświeżania, układ powinien automatycznie dostosować się do nowego rozmiaru. Domyślnie AdManagerAdView ma rozmiar podany w pierwszym parametrze, dopóki nie zostanie zwrócona kolejna reklama.

Ładowanie banera reklamowego

Gdy AdManagerBannerView będzie już gotowy, załaduj reklamę za pomocą metody LoadAd() w klasie AdManagerBannerView. Używa ona parametru , który zawiera informacje o czasie wykonywania, takie jak informacje o kierowaniu, etykiety wykluczeń i identyfikator wydawcy.

/// <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świetlania banera

Aby dostosować działanie reklamy, możesz podłączyć ją do wielu zdarzeń w cyklu życia reklamy, np. wczytywania, otwierania lub zamykania. Aby odbierać te zdarzenia, zarejestruj delegata:

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

Po zakończeniu korzystania z widoku banera zadzwoń pod numer Destroy(), aby zwolnić zasoby.

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

Znakomicie. Twoja aplikacja jest teraz gotowa do wyświetlania reklam typu baner.

Odświeżanie reklamy

Jeśli jednostka reklamowa jest skonfigurowana tak, aby się odświeżać, nie musisz prosić o wyświetlenie kolejnej reklamy, gdy nie uda się jej załadować. Pakiet SDK do reklam mobilnych Google uwzględnia częstotliwość odświeżania określoną w interfejsie Ad Managera. Jeśli nie masz włączonego odświeżania, prześlij nowe żądanie. Więcej informacji o odświeżaniu jednostek reklamowych, np. o ustalaniu częstotliwości odświeżania, znajdziesz w artykule Częstotliwość odświeżania reklam w aplikacjach mobilnych.

Tabela poniżej zawiera standardowe rozmiary banerów.

Rozmiar w dp (szer. x wys.) Opis Dostępność stała AdSize
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 pełnowymiarowy IAB Tablety FULL_BANNER
728 x 90 Tabela wyników IAB Tablety LEADERBOARD
Podana szerokość x wysokość dostosowująca się do treści Baner adaptacyjny Telefony i tablety Nie dotyczy
Szerokość ekranu x 32|50|90 Inteligentny baner Telefony i tablety SMART_BANNER
Dowiedz się więcej o banerach adaptacyjnych, które mają zastąpić inteligentne banery.

Zdarzenia w aplikacjach

Zdarzenia w aplikacjach umożliwiają tworzenie reklam, które mogą wysyłać komunikaty do kodu aplikacji. Aplikacja może następnie podejmować działania na podstawie tych wiadomości.

Zdarzenia aplikacji związane z Ad Managerem możesz nasłuchiwać za pomocą funkcji AppEvent. Zdarzenia te mogą wystąpić w dowolnym momencie cyklu życia reklamy, nawet przed wywołaniem metody 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 jest wywoływane, gdy w reklamie wystąpi zdarzenie aplikacji. Oto przykład sposobu obsługi tego zdarzenia w kodzie:

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

Oto przykładowy sposób zmiany koloru tła aplikacji w zależności od zdarzenia 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 tutaj jest odpowiednia kreacja, która wysyła zdarzenie aplikacji do kolorowania:

<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