Banneranzeigen

Banneransichten sind rechteckige Bild- oder Textanzeigen, die einen Bildschirm einnehmen. Sie bleiben auf dem Bildschirm, während Nutzer mit der App interagieren, und können nach einer bestimmten Zeit automatisch aktualisiert werden. Wenn Sie noch nicht mit mobiler Werbung vertraut sind, sind sie ein guter Ausgangspunkt.

In diesem Leitfaden erfahren Sie, wie Sie Banneransichten in eine Unity-App einbinden. Neben Code-Snippets und Anleitungen enthält sie auch Informationen zur richtigen Größenanpassung von Bannern sowie Links zu weiteren Ressourcen.

Voraussetzungen

Immer mit Testanzeigen testen

Der folgende Beispielcode enthält eine Anzeigenblock-ID, mit der Sie Testanzeigen anfordern können. Es wurde speziell so konfiguriert, dass bei jeder Anfrage Testanzeigen statt Produktionsanzeigen zurückgegeben werden. Die Verwendung ist daher sicher.

Nachdem Sie jedoch eine App in derAd Manager -Weboberfläche registriert und eigene Anzeigenblock-IDs zur Verwendung in Ihrer App erstellt haben, müssen Sie Ihr Gerät während der Entwicklung explizit als Testgerät konfigurieren.

/6499/example/banner

Mobile Ads SDK initialisieren

Bevor die Anzeigen geladen werden, muss Ihre App das Mobile Ads SDK initialisieren. Rufen Sie dazu MobileAds.Initialize() auf. Dieser Schritt muss nur einmal durchgeführt werden, idealerweise direkt beim Start der App.

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

Wenn Sie die Vermittlung verwenden, warten Sie, bis der Callback erfolgt ist, bevor Sie die Anzeigen laden. So wird sichergestellt, dass alle Vermittlungsadapter initialisiert werden.

BannerView-Beispiel

Im Beispielcode unten wird die Verwendung der Banneransicht beschrieben. Im Beispiel erstellen Sie eine Instanz einer Banneransicht, laden eine Anzeige mit einem AdManagerAdRequest in die Banneransicht und erweitern dann die Möglichkeiten durch die Verarbeitung von Lebenszyklus-Ereignissen.

Banneransicht erstellen

Der erste Schritt bei der Verwendung einer Banneransicht besteht darin, eine Instanz einer Banneransicht in einem C#-Skript zu erstellen, das an ein GameObject angehängt ist.


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

Der Konstruktor für ein AdManagerBannerView hat die folgenden Parameter:

  • adUnitId: Die ID des Anzeigenblocks, aus dem Anzeigen vom AdManagerBannerView geladen werden sollen.
  • AdSize: Das ist die gewünschte Anzeigengröße. Weitere Informationen finden Sie unter Bannergrößen.
  • AdPosition: Die Position, an der die Banneransichten platziert werden sollen. In der Aufzählung AdPosition sind die gültigen Werte für die Anzeigenposition aufgeführt.

Je nach Plattform werden unterschiedliche Anzeigenblöcke verwendet. Sie benötigen einen iOS-Anzeigenblock für Anzeigenanfragen unter iOS und einen Android-Anzeigenblock für Anfragen unter Android.

Optional: Banneransicht mit benutzerdefinierter Position erstellen

Wenn Sie genauer steuern möchten, wo ein AdManagerBannerView-Element auf dem Bildschirm platziert wird als von AdPosition-Werten angeboten, können Sie den Konstruktor mit x- und y-Koordinaten als Parameter verwenden:

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

Die obere linke Ecke von AdManagerBannerView befindet sich bei den x- und y-Werten, die an den Konstruktor übergeben werden, wobei der Ursprung der linke obere Bildschirmbereich ist.

Optional: Banneransicht mit einer benutzerdefinierten Größe erstellen

Sie können nicht nur eine AdSize-Konstante verwenden, sondern auch eine benutzerdefinierte Größe für die Anzeige angeben:

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

(Optional) Mehrere Anzeigengrößen

In Ad Manager lassen sich mehrere Anzeigengrößen für die Auslieferung in einem AdManagerBannerView angeben. Bevor Sie diese Funktion im SDK implementieren, müssen Sie eine Werbebuchung erstellen, die auf dieselben Anzeigenblöcke ausgerichtet ist, die mit Creatives unterschiedlicher Größe verknüpft sind.

Übergeben Sie in Ihrer App mehrere AdSize-Parameter an 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),
};

Wenn sich die Größe von AdManagerAdView bei der Aktualisierung ändert, sollte sich das Layout automatisch an die neue Größe anpassen. Für AdManagerAdView wird standardmäßig die Größe verwendet, die im ersten Parameter übergeben wird, bis die nächste Anzeige zurückgegeben wird.

Banneranzeige laden

Wenn AdManagerBannerView vorhanden ist, laden Sie eine Anzeige mit der Methode LoadAd() in der Klasse AdManagerBannerView. Dafür wird ein AdManagerAdRequest -Parameter verwendet, der Laufzeitinformationen enthält, z. B. Ausrichtungsinformationen, Ausschlusslabels und die vom Publisher bereitgestellte 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);
}

Banneraufruf-Ereignisse beobachten

Um das Verhalten Ihrer Anzeige anzupassen, können Sie verschiedene Ereignisse im Lebenszyklus der Anzeige einbeziehen, z. B. Laden, Öffnen oder Schließen. Registrieren Sie einen Bevollmächtigten, um auf diese Ereignisse zu warten:

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

Banneransicht löschen

Wenn Sie mit der Banneransicht fertig sind, rufen Sie Destroy() auf, um Ressourcen freizugeben.

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

Fertig! In Ihrer App können jetzt Banneranzeigen ausgeliefert werden.

In der folgenden Tabelle sind die Standardbannergrößen aufgeführt.

Größe in dp (B x H) Beschreibung Verfügbarkeit AdSize-Konstante
320 x 50 Normale Banner- Smartphones und Tablets BANNER
320 × 100 Großes Banner Smartphones und Tablets LARGE_BANNER
300 x 250 IAB Medium Rectangle Smartphones und Tablets MEDIUM_RECTANGLE
468 × 60 IAB-Banner in voller Größe Tablets FULL_BANNER
728 x 90 IAB-Leaderboard Tablets LEADERBOARD
Angegebene Breite x Adaptive Höhe Adaptives Banner Smartphones und Tablets –
Bildschirmbreite x 32|50|90 Smart-Banner Smartphones und Tablets SMART_BANNER
Weitere Informationen zu adaptiven Bannern, die Smart-Banner ersetzen sollen

App-Ereignisse

Mit App-Ereignissen können Sie Anzeigen erstellen, über die Nachrichten an den App-Code gesendet werden. Die App kann dann auf Grundlage dieser Meldungen Aktionen ausführen.

Mit AppEvent lassen sich Ad Manager-spezifische App-Ereignisse beobachten. Diese Ereignisse können im Lebenszyklus einer Anzeige jederzeit auftreten, auch noch bevor der Ladevorgang aufgerufen wird.

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 wird ausgelöst, wenn ein App-Ereignis in einer Anzeige auftritt. Hier ist ein Beispiel dafür, wie dieses Ereignis in Ihrem Code verarbeitet werden soll:

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

Das folgende Beispiel zeigt, wie Sie die Hintergrundfarbe Ihrer App in Abhängigkeit von einem App-Ereignis mit einem Farbnamen ändern:

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

Und hier ist das entsprechende Creative, das das Farb-App-Ereignis sendet:

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

Zusätzliche Ressourcen