Banneranzeigen sind rechteckige Anzeigen, die einen Teil der App-Oberfläche einnehmen. Sie bleiben auf dem Bildschirm, während Nutzer mit der App interagieren. Sie sind entweder oben oder unten auf dem Bildschirm verankert oder im Content platziert, sodass sie sichtbar bleiben, wenn der Nutzer scrollt. Banneranzeigen können nach einer bestimmten Zeit automatisch aktualisiert werden. Weitere Informationen finden Sie unter Banneranzeigen.
In dieser Anleitung erfahren Sie, wie Sie verankerte adaptive Banneranzeigen einrichten. Bei diesem Format wird die Leistung maximiert, indem die Anzeigengröße für jedes Gerät anhand einer von Ihnen angegebenen Anzeigenbreite optimiert wird.
Adaptives Ankerbanner
Verankerte adaptive Banneranzeigen haben ein festes Seitenverhältnis und keine feste Größe wie normale Anzeigen. Das Seitenverhältnis entspricht dem Branchenstandard von 320 × 50. Wenn Sie die verfügbare Breite angeben, wird eine Anzeige mit der optimalen Höhe für diese Breite zurückgegeben. Die optimale Höhe ändert sich nicht bei Anfragen vom selben Gerät und die umgebenden Ansichten müssen sich nicht bewegen, wenn die Anzeige aktualisiert wird.
Vorbereitung
- Führen Sie die Schritte im Startleitfaden aus.
Immer Testanzeigen verwenden
Verwenden Sie beim Entwickeln und Testen Ihrer Apps Testanzeigen anstelle von Live-Anzeigen. Andernfalls kann es zu einer Kontosperrung kommen.
Am einfachsten lassen sich Testanzeigen laden, wenn Sie unsere spezielle Testanzeigenblock-ID für iOS-Banner verwenden:
ca-app-pub-3940256099942544/2435281174
Sie ist speziell dafür konfiguriert, für jede Anfrage Testanzeigen zurückzugeben. Sie können sie also beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Denken Sie daran, sie vor der Veröffentlichung Ihrer App durch Ihre eigene Anzeigenblock-ID zu ersetzen.
Weitere Informationen zur Funktionsweise von Testanzeigen im Mobile Ads SDK finden Sie unter Testanzeigen.
GADBannerView erstellen
Banneranzeigen werden in GADBannerView-Objekten angezeigt. Der erste Schritt zur Einbindung von Banneranzeigen besteht also darin, ein GADBannerView in Ihre Ansichtshierarchie aufzunehmen. Dies geschieht in der Regel entweder programmatisch oder über Interface Builder.
Programmatisch
Eine GADBannerView kann auch direkt instanziiert werden.
Im folgenden Beispiel wird ein GADBannerView erstellt:
Swift
// Initialize the BannerView.
bannerView = BannerView()
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
// Align the banner's bottom edge with the safe area's bottom edge
bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
// Center the banner horizontally in the view
bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
SwiftUI
Wenn Sie ein BannerView verwenden möchten, erstellen Sie ein UIViewRepresentable:
private struct BannerViewContainer: UIViewRepresentable {
typealias UIViewType = BannerView
let adSize: AdSize
init(_ adSize: AdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> BannerView {
let banner = BannerView(adSize: adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
banner.delegate = context.coordinator
return banner
}
func updateUIView(_ uiView: BannerView, context: Context) {}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
Fügen Sie UIViewRepresentable der Ansichtshierarchie hinzu und geben Sie die Werte height und width an:
var body: some View {
Spacer()
// Request an anchored adaptive banner with a width of 375.
let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];
self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.bannerView];
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
// Align the banner's bottom edge with the safe area's bottom edge
[self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
Interface Builder
Sie können einem Storyboard oder einer XIB-Datei ein GADBannerView hinzufügen. Wenn Sie diese Methode verwenden, fügen Sie dem Banner nur Positionsbeschränkungen hinzu. Wenn Sie beispielsweise ein adaptives Banner unten auf dem Bildschirm anzeigen, legen Sie den unteren Rand der Banneransicht auf den oberen Rand des Bottom Layout Guide und die centerX-Einschränkung auf die centerX der Superview fest.
Die Anzeigengröße des Banners wird weiterhin programmatisch festgelegt:
Swift
// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
Anzeige laden
Sobald das GADBannerView-Element vorhanden und seine Attribute wie adUnitID konfiguriert sind, kann eine Anzeige geladen werden. Dazu wird loadRequest: für ein GADRequest-Objekt aufgerufen:
Swift
bannerView.load(Request())
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
[self.bannerView loadRequest:[GADRequest request]];
GADRequest-Objekte stellen eine einzelne Anzeigenanfrage dar und enthalten Eigenschaften für Elemente wie Targeting-Informationen.
Anzeige aktualisieren
Wenn Sie Ihren Anzeigenblock für die Aktualisierung konfiguriert haben, müssen Sie keine weitere Anzeige anfordern, wenn die Anzeige nicht geladen wird. Das Google Mobile Ads SDK berücksichtigt jede Aktualisierungsrate, die Sie in der AdMob-Benutzeroberfläche angegeben haben. Wenn Sie die Aktualisierung nicht aktiviert haben, stellen Sie eine neue Anfrage. Weitere Informationen zur Aktualisierung von Anzeigenblöcken, z. B. zum Festlegen einer Aktualisierungsrate, finden Sie unter Automatische Aktualisierung für Banneranzeigen verwenden.
Anzeigenereignisse
Mit GADBannerViewDelegate können Sie auf Lifecycle-Ereignisse warten, z. B. wenn eine Anzeige geschlossen wird oder der Nutzer die App verlässt.
Für Banner-Events registrieren
Wenn Sie sich für Banneranzeigenereignisse registrieren möchten, legen Sie die delegate-Property für GADBannerView auf ein Objekt fest, das das GADBannerViewDelegate-Protokoll implementiert. In der Regel fungiert die Klasse, die Banneranzeigen implementiert, auch als Delegate-Klasse. In diesem Fall kann die delegate-Property auf self festgelegt werden.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
self.bannerView.delegate = self;
Bannerereignisse implementieren
Jede der Methoden in GADBannerViewDelegate ist als optional gekennzeichnet. Sie müssen also nur die Methoden implementieren, die Sie benötigen. In diesem Beispiel wird jede Methode implementiert und eine Nachricht in der Konsole protokolliert:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print(#function)
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print(#function + ": " + error.localizedDescription)
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print(#function)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}
- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
Ein Beispiel für die Implementierung von Banner-Delegatmethoden finden Sie in der iOS API Demo-App im Beispiel für den Anzeigen-Delegaten.
Anwendungsfälle
Hier einige Anwendungsbeispiele für diese Methoden für Anzeigenereignisse.
Nach Erhalt einer Anzeige einen Banner in die Ansichtshierarchie einfügen
Möglicherweise möchten Sie das Hinzufügen eines GADBannerView zur Ansichtshierarchie verzögern, bis eine Anzeige empfangen wurde. Dazu können Sie auf das bannerViewDidReceiveAd:-Ereignis warten:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
Banneranzeige animieren
Sie können auch das bannerViewDidReceiveAd:-Ereignis verwenden, um eine Banneranzeige zu animieren, sobald sie zurückgegeben wird. Das folgende Beispiel zeigt, wie das geht:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
App pausieren und fortsetzen
Das GADBannerViewDelegate-Protokoll enthält Methoden, mit denen Sie über Ereignisse benachrichtigt werden können, z. B. wenn durch einen Klick ein Overlay präsentiert oder geschlossen wird. Wenn Sie nachvollziehen möchten, ob diese Ereignisse auf Anzeigen zurückzuführen sind, registrieren Sie sich für die folgenden GADBannerViewDelegate-Methoden.
Um alle Arten von Overlay-Präsentationen oder externen Browseraufrufen zu erfassen, nicht nur solche, die durch Anzeigenklicks ausgelöst werden, sollte Ihre App auf die entsprechenden Methoden in UIViewController oder UIApplication warten. In der folgenden Tabelle sehen Sie die entsprechenden iOS-Methoden, die gleichzeitig mit GADBannerViewDelegate-Methoden aufgerufen werden:
| GADBannerViewDelegate-Methode | iOS-Methode |
|---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: von UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: von UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: von UIViewController |
Zusätzliche Ressourcen
Beispiele auf GitHub
- Beispiel für verankerte adaptive Banneranzeigen: Swift | SwiftUI | Objective-C
- Demo für erweiterte Funktionen: Swift | Objective-C
Nächste Schritte
Minimierbare Banner
Minimierbare Banneranzeigen werden zuerst als größeres Overlay mit einer Schaltfläche zum Minimieren der Anzeige auf eine kleinere Größe präsentiert. Sie können damit die Leistung weiter optimieren. Weitere Informationen
Adaptive Inline-Banner
Adaptive Inline-Banner sind größer und höher als verankerte adaptive Banner. Sie haben eine variable Höhe und können so hoch wie der Gerätebildschirm sein. Adaptive Inline-Banner werden für Apps, in denen Banneranzeigen in scrollbaren Inhalten platziert werden, gegenüber adaptiven Ankerbannern empfohlen. Weitere Informationen finden Sie unter Inline-adaptive Banner.