Banneransichten sind rechteckige Bild- oder Textanzeigen, die einen bestimmten Punkt auf dem 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 neu in der mobilen Werbung sind, sind diese ein guter Ausgangspunkt.
In diesem Leitfaden erfahren Sie, wie Sie Banneransichten in eine Unity-App einbinden. Zusätzlich zu Code-Snippets und Anleitungen finden Sie hier Informationen zur richtigen Größe von Bannern und Links zu weiteren Ressourcen.
Voraussetzungen
- Arbeiten Sie den Startleitfaden durch.
Immer mit Testanzeigen testen
Der folgende Beispielcode enthält eine Anzeigenblock-ID, mit der Sie Testanzeigen anfordern können. Da es speziell so konfiguriert wurde, dass bei jeder Anfrage Testanzeigen zurückgegeben werden, kann es sicher verwendet werden.
Nachdem Sie jedoch eine App auf der Ad Manager-Weboberfläche registriert und eigene Anzeigenblock-IDs zur Verwendung in Ihrer App erstellt haben, konfigurieren Sie Ihr Gerät während der Entwicklung explizit als Testgerät.
/6499/example/banner
Mobile Ads SDK initialisieren
Bitten Sie Ihre App, das Mobile Ads SDK zu initialisieren, bevor Anzeigen geladen werden. Rufen Sie dazu MobileAds.Initialize()
auf. Dieser Vorgang muss nur einmal durchgeführt werden, idealerweise 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, bevor Sie Anzeigen laden. So wird sichergestellt, dass alle Vermittlungsadapter initialisiert werden.
BannerView-Beispiel
Der Beispielcode unten veranschaulicht die Verwendung der Banneransicht. In diesem Beispiel erstellen Sie eine Instanz einer Banneransicht, verwenden ein AdManagerAdRequest
, um eine Anzeige in die Banneransicht zu laden, und erweitern dann die Funktionen durch die Verarbeitung von Lebenszyklusereignissen.
Banneransicht erstellen
Der erste Schritt bei der Verwendung einer Banneransicht besteht darin, eine Instanz der 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 Anzeigenblock-ID, über die Anzeigen mit derAdManagerBannerView
geladen werden sollen.AdSize
: 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ählungAdPosition
sind die gültigen Werte für die Anzeigenposition aufgeführt.
Beachten Sie, wie je nach Plattform unterschiedliche Anzeigenblöcke verwendet werden. 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 besser steuern möchten, wo eine AdManagerBannerView
auf dem Bildschirm platziert wird als mit AdPosition
-Werten, verwenden Sie den Konstruktor mit x- und y-Koordinaten als Parameter:
// Create a 320x50 banner views at coordinate (0,50) on screen.
_bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, 0, 50);
Die obere linke Ecke des AdManagerBannerView
befindet sich an den x- und y-Werten, die an den Konstruktor übergeben werden. Der Ursprung ist dabei die linke obere Ecke des Bildschirms.
Optional: Banneransicht mit benutzerdefinierter Größe erstellen
Neben der Verwendung einer AdSize
-Konstante können Sie auch eine benutzerdefinierte Größe für Ihre Anzeige festlegen:
// 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, erstellen Sie eine Werbebuchung, 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. AdManagerAdView
verwendet standardmäßig die Größe, die im ersten Parameter übergeben wird, bis die nächste Anzeige zurückgegeben wird.
Banneranzeige laden
Nachdem AdManagerBannerView
vorhanden ist, laden Sie eine Anzeige mit der Methode LoadAd()
in der Klasse AdManagerBannerView
. Sie benötigt einen -Parameter, der Laufzeitinformationen wie Targeting-Informationen, Ausschlusslabels und die vom Publisher bereitgestellte ID enthält.
/// <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);
}
Auf Banneraufrufereignisse warten
Um das Verhalten Ihrer Anzeige anzupassen, können Sie verschiedene Ereignisse im Lebenszyklus der Anzeige einbinden, z. B. das 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 entfernen
Wenn Sie mit der Banneransicht fertig sind, rufen Sie Destroy()
auf, um Ressourcen freizugeben.
/// <summary>
/// Destroys the banner view.
/// </summary>
public void DestroyAd()
{
if (_bannerView != null)
{
Debug.Log("Destroying banner view.");
_bannerView.Destroy();
_bannerView = null;
}
}
Fertig! In Ihrer App können jetzt Banneranzeigen ausgeliefert werden.
Bannergrößen
In der folgenden Tabelle sind die Standard-Bannergröß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-Full-Size-Banner | Tablets | FULL_BANNER |
728 x 90 | IAB-Leaderboard | Tablets | LEADERBOARD |
Angegebene Breite × 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. Anhand dieser Nachrichten kann die App dann Aktionen ausführen.
Mit AppEvent
können Sie Ad Manager-spezifische App-Ereignisse erfassen. Diese Ereignisse können im Lebenszyklus der Anzeige jederzeit auftreten, 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 wird:
_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 können:
_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, von dem das App-Ereignis „Farbe“ gesendet wird:
<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
- Beispiel für HelloWorld: Eine minimale Implementierung aller Anzeigenformate.