Banery reklamowe

Wyświetlenia banerów to prostokątne reklamy graficzne lub reklamy 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 określonym czasie. Jeśli nie masz doświadczenia z reklamami mobilnymi, jest to dobry punkt wyjścia.

W tym przewodniku pokazujemy, jak zintegrować widoki banerów z aplikacją na Unity. Oprócz fragmentów kodu i instrukcji zawiera on 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żyć do wysłania żądania reklam testowych. Został on specjalnie skonfigurowany tak, aby w przypadku każdego żądania zwracać reklamy testowe zamiast reklam produkcyjnych, dzięki czemu można z niego korzystać.

Gdy jednak zarejestrujesz aplikację wAd Manager interfejsie internetowym i utworzysz własne identyfikatory jednostek reklamowych do wykorzystania w niej, podczas jej tworzenia skonfiguruj urządzenie jako urządzenie testowe.

/6499/example/banner

Inicjowanie pakietu SDK do reklam mobilnych

Przed wczytaniem reklam Twoja aplikacja musi zainicjować pakiet SDK do reklam mobilnych, wywołując MobileAds.Initialize(). Wystarczy to zrobić tylko raz, najlepiej przy uruchomieniu 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 używasz zapośredniczenia, poczekaj z załadowaniem reklam na wywołanie zwrotne, ponieważ dzięki temu wszystkie adaptery zapośredniczenia zostaną zainicjowane.

Przykład BannerView

Przykładowy kod poniżej pokazuje, jak korzystać z widoku banera. W tym przykładzie tworzysz wystąpienie widoku banera, załadujesz reklamę w widoku banera za pomocą typu AdManagerAdRequest, a następnie rozszerzysz jej możliwości, obsługując zdarzenia cyklu życia.

Tworzenie widoku banera

Pierwszym krokiem w korzystaniu z widoku banera jest utworzenie jego wystąpienia w skrypcie C# dołączonym do elementu 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 AdManagerBannerView ma następujące 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, w której mają być wyświetlane wyświetlenia banera. Wyliczenie AdPosition zawiera prawidłowe wartości pozycji reklamy.

Zobacz, jak używane są różne jednostki reklamowe w zależności od platformy. Do wysyłania żądań reklam w iOS używaj jednostki reklamowej na iOS, a w Androida – jednostki reklamowej.

(Opcjonalnie) Tworzenie widoku banera z niestandardową pozycją

Aby mieć większą kontrolę nad tym, gdzie na ekranie jest umieszczany element AdManagerBannerView niż to, co są oferowane przez wartości AdPosition, użyj konstruktora, który ma jako parametry współrzędne X i Y:

// 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 umiejscowiony w wartościach x i y przekazywanych do konstruktora, gdzie punkt początkowy znajduje się w lewym górnym rogu ekranu.

(Opcjonalnie) Tworzenie widoku banera o rozmiarze niestandardowym

Oprócz stałej AdSize możesz też określić rozmiar niestandardowy dla 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 elemencie AdManagerBannerView. Zanim wdrożysz tę funkcję 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ż wiele parametrów AdSize do parametru 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 przy odświeżaniu, układ powinien się automatycznie dostosować do nowego rozmiaru. AdManagerAdView przyjmuje domyślnie rozmiar przekazany w pierwszym parametrze aż do zwrócenia następnej reklamy.

Wczytywanie banera reklamowego

Po umieszczeniu dyrektywy AdManagerBannerView załaduj reklamę za pomocą metody LoadAd() w klasie AdManagerBannerView. Wykorzystuje parametr AdManagerAdRequest , który zawiera informacje o czasie działania, 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);
}

Odsłuchiwanie zdarzeń wyświetlenia banera

Aby dostosować działanie reklamy, możesz uwzględnić w jej cyklu życia różne zdarzenia, takie 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.");
    };
}

Zniszczenie widoku banera

Gdy skończysz korzystać z widoku banera, pamiętaj, aby wywołać 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. W Twojej aplikacji są już gotowe do wyświetlania banerów reklamowych.

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 IAB w pełnym rozmiarze Tablety FULL_BANNER
728 x 90 Tabela wyników IAB Tablety LEADERBOARD
Podana szerokość x Adaptacyjna wysokość 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ć wiadomości na kod aplikacji. Na podstawie tych komunikatów aplikacja może podejmować działania.

Możesz nasłuchiwać zdarzeń z aplikacji Ad Managera za pomocą funkcji AppEvent. Mogą one wystąpić w dowolnym momencie cyklu życia reklamy, jeszcze 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 podawana, gdy w reklamie występuje 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}.");
};

Ten przykład pokazuje, jak zmienić kolor 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 tak wygląda powiązana kreacja, która wysyła zdarzenie dotyczące koloru w aplikacji:

<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