In diesem Leitfaden wird beschrieben, wie Sie eine verankerte adaptive Banneranzeige in eine iOS-App laden.
Vorbereitung
Bevor Sie fortfahren, richten Sie Google Mobile Ads SDK ein.
Immer Testanzeigen verwenden
Verwenden Sie beim Entwickeln und Testen Ihrer Apps Testanzeigen anstelle von Live-Anzeigen. Andernfalls kann es zu einer Kontosperrung kommen.
Testanzeigen lassen sich unter iOS am einfachsten mit unserer speziellen Test-Anzeigenblock-ID für Banner laden:
/21775744923/example/adaptive-banner
Sie wurde speziell konfiguriert, um 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, die ID vor der Veröffentlichung Ihrer App durch Ihre eigene Anzeigenblock-ID zu ersetzen.
Weitere Informationen zur Funktionsweise von Google Mobile Ads SDK-Testanzeigen finden Sie unter Testanzeigen.
GAMBannerView erstellen
Banneranzeigen werden in GAMBannerView-Objekten ausgeliefert. Der erste Schritt zur Einbindung von Banneranzeigen besteht also darin, ein GAMBannerView in Ihre Ansichtshierarchie aufzunehmen. Dies geschieht in der Regel entweder programmatisch oder über Interface Builder.
Programmatisch
Eine GAMBannerView kann auch direkt instanziiert werden.
Im folgenden Beispiel wird ein GAMBannerView erstellt:
Swift
// Initialize the banner view.
bannerView = AdManagerBannerView()
bannerView.delegate = self
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 AdManagerBannerView 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 = largeAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the banner view.
GAMBannerView *bannerView = [[GAMBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[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 activateConstraints:@[
// Align the banner's bottom edge with the safe area's bottom edge
[bannerView.bottomAnchor
constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];
self.bannerView = bannerView;
Interface Builder
Sie können einem Storyboard oder einer XIB-Datei ein GAMBannerView hinzufügen. Wenn Sie diese Methode verwenden, dürfen Sie nur Positionsbeschränkungen für das Banner hinzufügen. Wenn Sie beispielsweise ein adaptives Banner unten auf dem Bildschirm anzeigen, legen Sie den unteren Rand der Bannerview auf den oberen Rand des Bottom Layout Guide fest und die centerX-Einschränkung auf die centerX der Superview.
Anzeigengröße festlegen
Große adaptive Banner sind ein größeres Format, das für Layouts ohne Scrollen konzipiert ist. Im Vergleich zu standardmäßigen verankerten adaptiven Bannern ist bei diesen Bannern eine größere maximale Höhe möglich (bis zu 20% der Bildschirmhöhe, zwischen 50 und 150 Punkten). Dieser zusätzliche Platz ist für Videoinhalte optimiert.
Im folgenden Beispiel wird die Größe eines großen adaptiven Ankerbanners abgerufen:
Swift
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
Anzeige laden
Sobald der GAMBannerView vorhanden und seine Eigenschaften wie adUnitID konfiguriert sind, kann eine Anzeige geladen werden. Dazu wird loadRequest: für ein GAMRequest-Objekt aufgerufen:
Swift
func loadBannerAd(bannerView: AdManagerBannerView) {
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
bannerView.load(AdManagerRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
[self.bannerView loadRequest:[GAMRequest request]];
GAMRequest-Objekte stellen eine einzelne Anzeigenanfrage dar und enthalten Eigenschaften für Dinge wie Ausrichtungsinformationen.
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. Google Mobile Ads SDK berücksichtigt alle Aktualisierungsraten, die Sie in der Ad Manager-Benutzeroberfläche angegeben haben. Wenn Sie die Aktualisierung nicht aktiviert haben, senden Sie eine neue Anfrage. Weitere Informationen zur Aktualisierung von Anzeigenblöcken, z. B. zum Festlegen einer Aktualisierungsrate, finden Sie unter Aktualisierungsrate der Anzeigen in mobilen Apps.
Umgang mit Änderungen der Ausrichtung
Wenn sich die Bildschirmausrichtung Ihrer App ändert, z. B. vom portrait-Modus ins Querformat, ändert sich oft auch die verfügbare Breite für das Banner. Damit Sie eine Anzeige mit der richtigen Größe für das neue Layout ausliefern, müssen Sie ein neues Banner anfordern. Wenn die Bannerbreite statisch ist oder die Layoutbeschränkungen die Größenänderung zulassen, können Sie diesen Schritt überspringen.
Swift
override func viewWillTransition(
to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
coordinator.animate(alongsideTransition: { _ in
// Load a new ad for the new orientation.
})
}
Objective-C
- (void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
// Load a new ad for the new orientation.
} completion:nil];
}
Anzeigenereignisse
Mit GADBannerViewDelegate können Sie Lifecycle-Ereignisse erfassen, 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 GAMBannerView 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-Eigenschaft auf self gesetzt werden.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
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("Banner ad loaded.")
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print("Banner ad failed to load: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print("Banner ad recorded an impression.")
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print("Banner ad recorded a click.")
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print("Banner ad will present screen.")
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print("Banner ad will dismiss screen.")
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print("Banner ad did dismiss screen.")
}
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GAMBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}
- (void)bannerViewDidRecordImpression:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
Ein Beispiel für die Implementierung von Banner-Delegatmethoden finden Sie in der iOS API Demo-App unter „Ad Delegate“.
Anwendungsfälle
Hier sind einige Beispiele für Anwendungsfälle für diese Methoden für Anzeigenereignisse.
Banner zur Ansichtshierarchie hinzufügen, sobald eine Anzeige empfangen wird
Möglicherweise sollten Sie das Hinzufügen eines GAMBannerView 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:(GAMBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
Banneranzeige animieren
Sie können das bannerViewDidReceiveAd:-Ereignis auch verwenden, um eine Banneranzeige zu animieren, sobald sie zurückgegeben wird. Hier ein Beispiel:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)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 diese GADBannerViewDelegate-Methoden.
Damit alle Arten von Overlay-Präsentationen oder externen Browseraufrufen erfasst werden, 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 sind die entsprechenden iOS-Methoden aufgeführt, die gleichzeitig mit den GADBannerViewDelegate-Methoden aufgerufen werden:
| GADBannerViewDelegate-Methode | iOS-Methode |
|---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: von UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: von UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: von UIViewController |
Manuelles Zählen von Impressionen
Sie können Impressions-Pings manuell an Ad Manager senden, wenn Sie spezielle Bedingungen dafür haben, wann eine Impression erfasst werden soll. Dazu müssen Sie zuerst eine GAMBannerView für manuelle Impressionen aktivieren, bevor Sie eine Anzeige laden:
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
Wenn Sie feststellen, dass eine Anzeige erfolgreich zurückgegeben wurde und auf dem Bildschirm zu sehen ist, können Sie eine Impression manuell auslösen:
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
App-Ereignisse
Mit GADAppEventDelegate können Sie Ad Manager-spezifische App-Ereignisse erfassen.
Diese Ereignisse können jederzeit während des Lebenszyklus der Anzeige auftreten, auch bevor die bannerViewDidReceiveAd: des GADBannerViewDelegate-Objekts aufgerufen wird.
Um sich für App-Ereignisse zu registrieren, legen Sie die Delegate-Eigenschaft für GAMBannerView auf ein Objekt fest, das das GADAppEventDelegate-Protokoll implementiert. In der Regel fungiert die Klasse, die Banneranzeigen implementiert, auch als Delegate-Klasse. In diesem Fall kann die Delegate-Eigenschaft auf self festgelegt werden.
Swift
// Set this property before making the request for an ad.
bannerView.appEventDelegate = self
Objective-C
// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;
Das folgende Beispiel zeigt, wie Sie die Hintergrundfarbe Ihrer App ändern, indem Sie die Farbe über ein App-Ereignis angeben:
Swift
func bannerView(
_ banner: AdManagerBannerView, didReceiveAppEvent name: String, withInfo info: String?
) {
if name == "color" {
if info == "green" {
// Set background color to green.
view.backgroundColor = UIColor.green
} else if info == "blue" {
// Set background color to blue.
view.backgroundColor = UIColor.blue
} else {
// Set background color to black.
view.backgroundColor = UIColor.black
}
}
}
Objective-C
- (void)bannerView:(GAMBannerView *)banner
didReceiveAppEvent:(NSString *)name
withInfo:(NSString *)info {
if ([name isEqual:@"color"]) {
if ([info isEqual:@"green"]) {
// Set background color to green.
self.view.backgroundColor = [UIColor greenColor];
} else if ([info isEqual:@"blue"]) {
// Set background color to blue.
self.view.backgroundColor = [UIColor blueColor];
} else {
// Set background color to black.
self.view.backgroundColor = [UIColor blackColor];
}
}
}
Hier sehen Sie das entsprechende Creative, mit dem App-Ereignismeldungen für die Farbe an appEventDelegate gesendet werden:
<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>
Ein Beispiel für die Implementierung von App-Ereignissen in der iOS API-Demo-App finden Sie unter „Ad Manager App Events“.
Zusätzliche Ressourcen
Beispiele auf GitHub
- Beispiel für adaptive Ankerbanneranzeigen: 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 einem Button zum Minimieren der Anzeige auf eine kleinere Größe präsentiert. Sie können sie verwenden, um die Leistung weiter zu optimieren. Weitere Informationen finden Sie unter Minimierbare Banneranzeigen.
Adaptive Inline-Banner
Adaptive Inline-Banner sind größer und höher als adaptive Ankerbanner. 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 Ankerbanneranzeigen empfohlen. Weitere Informationen finden Sie unter Inline-adaptive Banner.