Banery reklamowe

Wybierz platformę: Android iOS Unity Flutter

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, to świetny sposób na rozpoczęcie.

Z tego przewodnika dowiesz się, jak zintegrować wyświetlenia banerów z aplikacją 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 testuj za pomocą reklam testowych

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

Gdy jednak zarejestrujesz aplikację w interfejsie internetowym Ad Managera i utworzysz własne identyfikatory jednostek reklamowych do użycia w aplikacji, podczas tworzenia aplikacji skonfiguruj urządzenie jako urządzenie testowe.

/21775744923/example/adaptive-banner

Inicjowanie pakietu SDK do reklam mobilnych

Przed wczytaniem reklam aplikacja musi zainicjować pakiet SDK do reklam mobilnych Google, wywołując funkcję MobileAds.Initialize(). Należy to zrobić tylko raz, najlepiej przy uruchamianiu aplikacji.

using GoogleMobileAds;
using GoogleMobileAds.Api;

public class GoogleMobileAdsDemoScript : MonoBehaviour
{
    public void Start()
    {
        // Initialize Google Mobile Ads SDK.
        MobileAds.Initialize((InitializationStatus initStatus) =>
        {
            // This callback is called once the MobileAds SDK is initialized.
        });
    }
}

Jeśli używasz zapośredniczenia, przed wczytaniem reklam poczekaj na wywołanie zwrotne, ponieważ dzięki temu wszystkie adaptery zapośredniczenia zostaną zainicjowane.

Przykład BannerView

Poniższy przykładowy kod pokazuje, jak używać widoku banera. W tym przykładzie utwórz instancję widoku banera, użyj AdManagerAdRequest, aby wczytać reklamę do widoku banera, a następnie rozszerz jego możliwości, obsługując zdarzenia cyklu życia.

Tworzenie widoku banera

Pierwszym krokiem w używaniu widoku banera jest utworzenie jego instancji.

// Create a 320x50 banner at top of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);

Zastąp AD_UNIT_ID identyfikatorem jednostki reklamowej.

Konstruktor AdManagerBannerView ma te parametry:

  • adUnitId: Identyfikator jednostki reklamowej banera, który ma się wczytać.
  • AdSize: rozmiar banera, którego chcesz użyć.
  • AdPosition: miejsce, w którym mają się wyświetlać banery.

(Opcjonalnie) Tworzenie widoku banera z niestandardową pozycją

Aby mieć większą kontrolę nad tym, gdzie na ekranie ma się wyświetlać widok banera, niż zapewniają 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.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, 0, 50);

Lewy górny róg widoku banera jest umieszczony na podstawie wartości x i y przekazanych do konstruktora, gdzie punkt początkowy to lewy górny róg ekranu.

(Opcjonalnie) Tworzenie widoku banera o niestandardowym rozmiarze

Oprócz używania AdSize stałej możesz też określić niestandardowy rozmiar reklamy:

// Create a 250x250 banner at the bottom of the screen.
AdSize adSize = new AdSize(250, 250);
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", 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. 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 przekaż wiele parametrów AdSize do funkcji ValidAdSizes:

// Create a 250x250 banner at the bottom of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);

// Add multiple ad sizes.
adManagerBannerView.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. AdManagerAdView domyślnie przyjmuje rozmiar przekazany w pierwszym parametrze do czasu, aż pojawi się kolejna reklama.

Ładowanie banera reklamowego

Po umieszczeniu elementu AdManagerBannerView załaduj reklamę za pomocą metody LoadAd() w klasie AdManagerBannerView. Przyjmuje on parametr, który zawiera informacje o czasie działania, takie jak informacje o kierowaniu, etykiety wykluczeń i identyfikator podany przez wydawcę.

Aby wczytać reklamę, utwórz obiekt AdManagerAdRequest i przekaż go do metody LoadAd().

// Send a request to load an ad into the banner view.
adManagerBannerView.LoadAd(new AdManagerAdRequest());

Nasłuchiwanie zdarzeń wyświetlenia banera

Aby dostosować działanie reklamy, możesz połączyć ją z wieloma zdarzeniami w cyklu życia reklamy, takimi jak wczytywanie, otwieranie lub zamykanie. Aby nasłuchiwać tych zdarzeń, zarejestruj delegata:

adManagerBannerView.OnBannerAdLoaded += () =>
{
    // Raised when an ad is loaded into the banner view.
};
adManagerBannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
{
    // Raised when an ad fails to load into the banner view.
};
adManagerBannerView.OnAdPaid += (AdValue adValue) =>
{
    // Raised when the ad is estimated to have earned money.
};
adManagerBannerView.OnAdImpressionRecorded += () =>
{
    // Raised when an impression is recorded for an ad.
};
adManagerBannerView.OnAdClicked += () =>
{
    // Raised when a click is recorded for an ad.
};
adManagerBannerView.OnAdFullScreenContentOpened += () =>
{
    // Raised when an ad opened full screen content.
};
adManagerBannerView.OnAdFullScreenContentClosed += () =>
{
    // Raised when the ad closed full screen content.
};

Usuń widok banera

Po zakończeniu korzystania z widoku banera wywołaj funkcję Destroy(), aby zwolnić zasoby.

if (adManagerBannerView != null)
{
    // Always destroy the banner view when no longer needed.
    adManagerBannerView.Destroy();
    adManagerBannerView = null;
}

Znakomicie. Aplikacja jest teraz gotowa do wyświetlania reklam banerowych.

Odświeżanie reklamy

Jeśli jednostka reklamowa jest skonfigurowana do odświeżania, nie musisz wysyłać kolejnej prośby o reklamę, gdy nie uda się jej wczytać. Pakiet SDK do reklam mobilnych Google uwzględnia każdą częstotliwość odświeżania określoną w interfejsie Ad Managera. Jeśli nie masz włączonego odświeżania, wyślij nową prośbę. Więcej informacji o odświeżaniu jednostek reklamowych, np. o ustawianiu częstotliwości odświeżania, znajdziesz w artykule Częstotliwość odświeżania reklam w aplikacjach mobilnych.

W tej tabeli znajdziesz 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 Długi baner IAB Tablety LEADERBOARD
Podana szerokość x adaptacyjna wysokość 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ć banery inteligentne.

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.

Możesz nasłuchiwać zdarzeń w aplikacji związanych z usługą Ad Manager za pomocą funkcji AppEvent. Te zdarzenia mogą wystąpić w dowolnym momencie cyklu życia reklamy, nawet przed wywołaniem funkcji load.

OnAppEventReceived jest wywoływane, gdy w reklamie wystąpi zdarzenie w aplikacji. Oto przykład obsługi tego zdarzenia w kodzie:

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

Oto przykład pokazujący, jak zmienić kolor tła aplikacji w zależności od zdarzenia w aplikacji o nazwie color:

adManagerBannerView.OnAppEventReceived += (AppEvent args) =>
{
    if (args.Name == "color")
    {
        Color color;
        if (ColorUtility.TryParseHtmlString(args.Data, out color))
        {
            renderer.material.color = color;
        }
    }
};

A oto odpowiednia kreacja, która wysyła zdarzenie aplikacji dotyczące 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: 0;
      left: 0;
      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