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 Übersicht über Banneranzeigen.
In diesem Leitfaden erfahren Sie, wie Sie verankerte adaptive Banneranzeigen einrichten. Dabei wird die Anzeigengröße für jedes Gerät anhand einer von Ihnen angegebenen Anzeigenbreite optimiert, um die Leistung zu maximieren.
Verankertes adaptives Banner
Verankerte adaptive Banneranzeigen haben ein festes Seitenverhältnis, im Gegensatz zu herkömmlichen Anzeigen mit fester Größe. Das Seitenverhältnis entspricht dem Branchenstandard 320 x 50. Sobald Sie die gesamte verfügbare Breite angegeben haben, wird eine Anzeige mit der optimalen Höhe für diese Breite zurückgegeben. Die optimale Höhe ändert sich bei den Anfragen desselben Geräts nicht und die umgebenden Ansichten müssen sich bei der Aktualisierung der Anzeige nicht verschieben.
Vorbereitung
- Führen Sie die Schritte im Startleitfaden aus.
Verwenden Sie immer Testanzeigen
Verwenden Sie beim Erstellen und Testen Ihrer Apps Testanzeigen anstelle von aktiven Produktionsanzeigen. Andernfalls kann Ihr Konto gesperrt werden.
Am einfachsten lassen sich Testanzeigen laden, wenn Sie die spezielle Test-Anzeigenblock-ID für iOS-Banner verwenden:
ca-app-pub-3940256099942544/2435281174
Es wurde speziell so konfiguriert, dass für jede Anfrage Testanzeigen zurückgegeben werden. Sie können es in Ihren eigenen Apps verwenden, während Sie Code schreiben, testen und debuggen. Achten Sie darauf, sie vor der Veröffentlichung Ihrer App durch Ihre eigene Anzeigenblock-ID zu ersetzen.
Weitere Informationen zur Funktionsweise von Testanzeigen des Mobile Ads SDK findest du unter Testanzeigen.
GADBannerView erstellen
Banneranzeigen werden in GADBannerView
-Objekten präsentiert. Der erste Schritt zur Einbindung von Banneranzeigen besteht also darin, GADBannerView
in die Ansichtshierarchie aufzunehmen. Dies erfolgt in der Regel entweder programmatisch oder über Interface Builder.
Programmatisch
Eine GADBannerView
kann auch direkt instanziiert werden.
Im folgenden Beispiel wird eine GADBannerView
erstellt:
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
let viewWidth = view.frame.inset(by: view.safeAreaInsets).width
// Here the current interface orientation is used. Use
// GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
// GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
// particular orientation,
let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
bannerView = GADBannerView(adSize: adaptiveSize)
addBannerViewToView(bannerView)
}
func addBannerViewToView(_ bannerView: GADBannerView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
view.addConstraints(
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(item: bannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
])
}
}
SwiftUI
Wenn Sie eine GADBannerView
verwenden möchten, erstellen Sie eine UIViewRepresentable
:
private struct BannerView: UIViewRepresentable {
let adSize: GADAdSize
init(_ adSize: GADAdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> UIView {
// Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
// frame size changes; wrapping in a UIView container insulates the GADBannerView from size
// changes that impact the view returned from makeUIView.
let view = UIView()
view.addSubview(context.coordinator.bannerView)
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
context.coordinator.bannerView.adSize = adSize
}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
Um die Initialisierung und das Verhalten des GADBannerView
zu verwalten, erstellen Sie eine Coordinator
:
class BannerCoordinator: NSObject, GADBannerViewDelegate {
private(set) lazy var bannerView: GADBannerView = {
let banner = GADBannerView(adSize: parent.adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
banner.delegate = self
return banner
}()
let parent: BannerView
init(_ parent: BannerView) {
self.parent = parent
}
Verwenden Sie GeometryReader
, um die Breite der Ansicht abzurufen. In dieser Klasse wird die richtige Anzeigengröße für die aktuelle Geräteausrichtung berechnet. frame
ist auf die Höhe festgelegt, die aus der Anzeigengröße berechnet wird.
var body: some View {
GeometryReader { geometry in
let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)
VStack {
Spacer()
BannerView(adSize)
.frame(height: adSize.size.height)
}
}
Objective-C
In diesem Fall geben wir keine Einschränkungen für Breite oder Höhe an, da die angegebene Anzeigengröße dem Banner eine intrinsische Inhaltsgröße für die Größe der Ansicht zuweist.
@import GoogleMobileAds;
@interface ViewController ()
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Here safe area is taken into account, hence the view frame is used after the
// view has been laid out.
CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
CGFloat viewWidth = frame.size.width;
// Here the current interface orientation is used. If the ad is being preloaded
// for a future orientation change or different orientation, the function for the
// relevant orientation should be used.
GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
// In this case, we instantiate the banner with desired ad size.
self.bannerView = [[GADBannerView alloc] initWithAdSize:adaptiveSize];
[self addBannerViewToView:self.bannerView];
}
- (void)addBannerViewToView:(UIView *)bannerView {
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:bannerView];
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
[self.view addConstraints:@[
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view.safeAreaLayoutGuide
attribute:NSLayoutAttributeBottom
multiplier:1
constant:0],
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]
]];
}
@end
Interface Builder
Sie können einem Storyboard oder einer XIB-Datei eine GADBannerView
hinzufügen. Wenn Sie diese Methode verwenden, dürfen Sie dem Banner nur Positionsbeschränkungen hinzufügen. Wenn beispielsweise ein adaptives Banner unten auf dem Bildschirm angezeigt wird, legen Sie für den unteren Bereich der Banneransicht den oberen Rand der Layoutübersicht unten und für die Einschränkung centerX
die Einschränkung centerX
der Superansicht fest.
Die Anzeigengröße des Banners wird weiterhin programmatisch festgelegt:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
Anzeige laden
Sobald die GADBannerView
eingerichtet und ihre Eigenschaften konfiguriert sind, kann eine Anzeige geladen werden. Dazu wird loadRequest:
für ein GADRequest
-Objekt aufgerufen:
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Set the ad unit ID and view controller that contains the GADBannerView.
bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
bannerView.rootViewController = self
bannerView.load(GADRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Set the ad unit ID and view controller that contains the GADBannerView.
self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GADRequest request]];
}
GADRequest-Objekte stellen eine einzelne Anzeigenanfrage dar und enthalten beispielsweise Eigenschaften für Targeting-Informationen.
Wenn Ihre Anzeige nicht geladen wird, müssen Sie nicht explizit eine weitere anfordern, sofern Sie Ihren Anzeigenblock für die Aktualisierung konfiguriert haben. Das Google Mobile Ads SDK berücksichtigt die Aktualisierungsrate, die Sie in der AdMob-Benutzeroberfläche angegeben haben. Wenn Sie die Aktualisierung nicht aktiviert haben, müssen Sie eine neue Anfrage stellen.
Anzeigenereignisse
Mit GADBannerViewDelegate
können Sie auf Lebenszyklus-Ereignisse warten, z. B. wenn eine Anzeige geschlossen wird oder der Nutzer die App verlässt.
Für Bannerereignisse registrieren
Wenn Sie sich für Banneranzeigenereignisse registrieren möchten, legen Sie die Property delegate
für GADBannerView
auf ein Objekt fest, das das GADBannerViewDelegate
-Protokoll implementiert. In der Regel fungiert die Klasse, die Banneranzeigen implementiert, auch als delegierte Klasse. In diesem Fall kann die Property delegate
auf self
festgelegt werden.
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController, GADBannerViewDelegate {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.delegate = self
Objective-C
@import GoogleMobileAds;
@interface ViewController () <GADBannerViewDelegate>
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// ...
self.bannerView.delegate = self;
}
Bannerereignisse implementieren
Alle Methoden in GADBannerViewDelegate
sind als optional gekennzeichnet. Sie müssen also nur die gewünschten Methoden implementieren. In diesem Beispiel werden die einzelnen Methoden implementiert und eine Meldung in der Console protokolliert:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
print("bannerViewDidReceiveAd")
}
func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
print("bannerViewDidRecordImpression")
}
func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
print("bannerViewWillPresentScreen")
}
func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewWillDIsmissScreen")
}
func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewDidDismissScreen")
}
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");
}
Eine Implementierung von Banner Delegate-Methoden in der iOS API Demo App finden Sie im Ad Delegate-Beispiel.
Anwendungsfälle
Im Folgenden finden Sie einige Anwendungsbeispiele für diese Anzeigenereignismethoden.
Banner zur Ansichtshierarchie hinzufügen, sobald eine Anzeige empfangen wird
Du solltest mit dem Hinzufügen eines GADBannerView
zur Ansichtshierarchie warten, bis eine Anzeige empfangen wurde. Dazu warten Sie auf das Ereignis bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
// 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 das Ereignis bannerViewDidReceiveAd:
auch verwenden, um eine Banneranzeige zu animieren, sobald sie zurückgegeben wird. Beispiel:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
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 bietet Methoden, mit denen Sie über Ereignisse informiert werden, z. B. wenn ein Klick dazu führt, dass ein Overlay angezeigt oder geschlossen wird. Wenn Sie nachvollziehen möchten, ob diese Ereignisse auf Anzeigen zurückzuführen sind, registrieren Sie sich für diese GADBannerViewDelegate
Methoden.
Wenn Sie alle Arten von Overlay-Präsentationen oder externen Browseraufrufen erfassen möchten, nicht nur die, die von Anzeigenklicks stammen, sollten Sie in Ihrer App auf die entsprechenden Methoden auf UIViewController
oder UIApplication
achten. Die folgende Tabelle enthält die gleichwertigen iOS-Methoden, die zur selben Zeit wie 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 der erweiterten Funktionen: Swift | Objective-C
Nächste Schritte
Minimierbare Banner
Minimierbare Banneranzeigen sind Banneranzeigen, die zuerst als größeres Overlay mit einer Schaltfläche angezeigt werden, über die die Anzeige auf eine kleinere Größe minimiert werden kann. Erwägen Sie, damit die Leistung weiter zu optimieren. Weitere Informationen finden Sie unter Minimierbare Banneranzeigen.
Adaptive Inline-Banner
Adaptive Inline-Banner sind im Vergleich zu adaptiven Ankerbannern größer und höher. Sie haben eine variable Höhe und können so hoch sein wie der Bildschirm des Geräts. Adaptive Inline-Banner werden gegenüber verankerten adaptiven Banneranzeigen für Apps empfohlen, bei denen Banneranzeigen in scrollbaren Inhalten platziert werden. Weitere Informationen finden Sie unter Adaptive Inline-Banner.