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. Banneranzeige Anzeigen können nach einer bestimmten Zeit automatisch aktualisiert werden. Weitere Informationen finden Sie unter Banneranzeigen.
Dieser Leitfaden enthält die ersten Schritte mit verankerten adaptive Banneranzeigen Die Leistung wird maximiert, indem die Anzeigengröße für jedes Gerät eine von Ihnen festgelegte Anzeigenbreite.
Adaptive Ankerbanner
Verankerte adaptive Banneranzeigen sind Anzeigen mit festem Seitenverhältnis und nicht reguläre fester Größe. Das Seitenverhältnis entspricht dem Branchenstandard von 320 × 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 Anfragen desselben Typs nicht. Gerät und die umgebenden Ansichten müssen sich bei der Aktualisierung der Anzeige nicht verschieben.
Vorbereitung
- Arbeiten Sie den Startleitfaden durch.
Verwenden Sie immer Testanzeigen
Verwenden Sie beim Entwickeln und Testen Ihrer Apps nur Testanzeigen, Live-Produktionsanzeigen. Andernfalls kann Ihr Konto gesperrt werden.
Die einfachste Methode zum Laden von Testanzeigen ist die Verwendung unserer Testanzeigenblock-ID für iOS. Banner:
/21775744923/example/adaptive-banner
Sie wurde speziell so konfiguriert, dass bei jeder Anfrage Testanzeigen zurückgegeben werden. können Sie es beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Machen Sie einfach ersetzen Sie sie vor dem Veröffentlichen Ihrer App durch Ihre Anzeigenblock-ID.
Weitere Informationen zur Funktionsweise von Testanzeigen des Mobile Ads SDK finden Sie unter Test Anzeigen:
GAMBannerView erstellen
Banneranzeigen werden in GAMBannerView
-Objekten präsentiert. Der erste Schritt zur Einbindung von Banneranzeigen besteht also darin, GAMBannerView
in die 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
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GAMBannerView!
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 = GAMBannerView(adSize: adaptiveSize)
addBannerViewToView(bannerView)
}
func addBannerViewToView(_ bannerView: GAMBannerView) {
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 ein GAMBannerView
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)
}
Erstellen Sie zum Verwalten der Initialisierung und des Verhaltens von GAMBannerView
einen
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
}
Zum Abrufen der Breite der Ansicht verwenden Sie GeometryReader
. Dieser Kurs
berechnet die entsprechende Anzeigengröße für die aktuelle Geräteausrichtung. Die
frame
wird auf die Höhe festgelegt, die anhand 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
Beachten Sie, dass wir in diesem Fall keine Einschränkungen für die Breite oder Höhe angeben, da die Anzeigengröße gibt dem Banner eine unveränderliche Inhaltsgröße für die angezeigt wird.
@import GoogleMobileAds;
@interface ViewController ()
@property(nonatomic, strong) GAMBannerView *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 = [[GAMBannerView 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 ein GAMBannerView
zu einem Storyboard oder einer xib-Datei hinzufügen. Achten Sie bei dieser Methode darauf, nur Positionseinschränkungen für das Banner hinzuzufügen. Beispiel:
für adaptive Banner unten auf dem Bildschirm festlegen,
der Banneransicht so hoch, dass sie dem oberen Rand der Layoutanleitung unten entspricht.
centerX
Einschränkung, die dem centerX
der Superansicht entspricht.
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 GAMBannerView
eingerichtet ist und ihre Eigenschaften
ist es Zeit, eine Anzeige zu laden. Dazu wird loadRequest:
für ein GAMRequest
-Objekt aufgerufen:
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Set the ad unit ID and view controller that contains the GAMBannerView.
bannerView.adUnitID = "/21775744923/example/adaptive-banner"
bannerView.rootViewController = self
bannerView.load(GAMRequest())
}
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 GAMBannerView.
self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GAMRequest request]];
}
GAMRequest-Objekte stellen eine einzelne Anzeigenanfrage dar und Eigenschaften für Dinge wie Targeting-Informationen enthalten.
Falls Ihre Anzeige nicht geladen werden kann, müssen Sie keine weitere Voraussetzung ist, dass Sie den Anzeigenblock für die Aktualisierung konfiguriert haben. Google Mobile Ads SDK die in Ad Manager angegebene Aktualisierungsrate berücksichtigt, UI. Wenn Sie die Aktualisierung nicht aktiviert haben, müssen Sie eine neue Anfrage senden.
Anzeigenereignisse
Mit GADBannerViewDelegate
können Sie Lebenszyklusereignisse überwachen,
etwa wenn eine Anzeige geschlossen wird oder der Nutzer die App verlässt.
Für Bannerereignisse registrieren
Wenn du dich für Banneranzeigenereignisse registrieren möchtest, musst du die Property delegate
auf
GAMBannerView
auf ein Objekt, das den
GADBannerViewDelegate
-Protokoll. 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: GAMBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.delegate = self
Objective-C
@import GoogleMobileAds;
@interface ViewController () <GADBannerViewDelegate>
@property(nonatomic, strong) GAMBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// ...
self.bannerView.delegate = self;
}
Bannerereignisse implementieren
Jede der Methoden in GADBannerViewDelegate
ist als optional gekennzeichnet.
Sie müssen nur die
gewünschten Methoden implementieren. In diesem Beispiel werden alle Methoden
und protokolliert eine Nachricht in der Konsole:
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");
}
Im Beispiel für Ad Delegate finden Sie eine Implementierung von Banner-Delegierungsmethoden in der iOS API-Demo-App.
Anwendungsfälle
Im Folgenden finden Sie einige Anwendungsbeispiele für diese Anzeigenereignismethoden.
Banner zur Ansichtshierarchie hinzufügen, sobald eine Anzeige empfangen wird
Sie sollten das Hinzufügen eines GAMBannerView
s zu einem späteren Zeitpunkt
Ansichtshierarchie bleiben,
bis die Anzeige empfangen wurde. Dazu hören Sie
für das Ereignis bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
// 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
Mit dem Ereignis bannerViewDidReceiveAd:
lässt sich eine Banneranzeige auch einmal animieren.
zurückgegeben, wie im folgenden Beispiel gezeigt:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
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 Protokoll GADBannerViewDelegate
bietet Methoden, um Sie über Ereignisse zu benachrichtigen:
als wenn ein Klick dazu führt, dass ein Overlay angezeigt oder geschlossen wird. Wenn Sie
nachzuverfolgen, ob diese Ereignisse auf Werbung zurückzuführen sind, registrieren Sie sich
GADBannerViewDelegate
-Methoden.
Um alle Arten von Overlay-Präsentationen oder Aufrufen externer Browser abzufangen,
die auf Anzeigenklicks zurückzuführen sind, ist es besser, wenn Ihre App
gleichwertige Methoden auf UIViewController
oder UIApplication
. Hier ist eine Tabelle
zeigt die äquivalenten iOS-Methoden, die zur gleichen Zeit wie
GADBannerViewDelegate
-Methoden:
GADBannerViewDelegate-Methode | iOS-Methode |
---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: von UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: von UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: von UIViewController |
Manuelle Impressionszählung
Sie können Impressions-Pings manuell an Ad Manager senden, wenn Sie spezielle
Bedingungen für die Aufzeichnung einer Impression. Dies kann zuerst geschehen,
Aktivieren von GAMBannerView
für manuelle Impressionen vor dem Laden einer Anzeige:
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
Wenn Sie feststellen, dass eine Anzeige erfolgreich zurückgegeben 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 App-Ereignissen können Sie Anzeigen erstellen, über die Nachrichten an den App-Code gesendet werden. Die auf Grundlage dieser Nachrichten Aktionen ausführen kann.
Mit GADAppEventDelegate
können Sie auf Ad Manager-spezifische App-Ereignisse warten.
Diese Ereignisse können jederzeit während des Lebenszyklus der Anzeige auftreten, sogar vor dem
bannerViewDidReceiveAd:
des GADBannerViewDelegate
-Objekts wird aufgerufen.
Swift
// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.
// Called when the banner receives an app event.
optional public func bannerView(_ banner: GAMBannerView,
didReceiveAppEvent name: String, withInfo info: String?)
Objective-C
// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.
@optional
// Called when the banner receives an app event.
- (void)bannerView:(GAMBannerView *)banner
didReceiveAppEvent:(NSString *)name
withInfo:(NSString *)info;
Die Methoden für App-Ereignisse können in einem Viewcontroller implementiert werden:
Swift
import GoogleMobileAds
class ViewController: UIViewController, GADAppEventDelegate {}
Objective-C
@import GoogleMobileAds;
@interface ViewController : UIViewController <GADAppEventDelegate> {}
@end
Denken Sie daran, den Delegat mit dem Attribut appEventDelegate
festzulegen, bevor Sie
der Anzeigenanfrage.
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
Dieses Beispiel zeigt, wie Sie die Hintergrundfarbe Ihrer App ändern, indem Sie durch ein App-Ereignis festlegen:
Swift
func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String,
withInfo info: String?) {
if name == "color" {
guard let info = info else { return }
switch info {
case "green":
// Set background color to green.
view.backgroundColor = UIColor.green
case "blue":
// Set background color to blue.
view.backgroundColor = UIColor.blue
default:
// 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];
}
}
}
Und hier ist das entsprechende Creative, das App-Ereignisnachrichten mit Farbe an
appEventDelegate
:
<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>
Im Beispiel für Ad Manager-App-Ereignisse finden Sie eine Implementierung von App-Ereignissen in der iOS API-Demo-App.
Zusätzliche Ressourcen
Beispiele auf GitHub
- Beispiel für verankerte adaptive Banneranzeigen: Swift | SwiftUI | Objective-C
- Demo zu erweiterten Funktionen: Swift | Objective-C
Nächste Schritte
Minimierbare Banner
Minimierbare Banneranzeigen sind Banneranzeigen, die anfänglich als größere Overlay mit einer Schaltfläche zum Minimieren der Anzeige auf eine kleinere Größe. Erwägen Sie die Verwendung um die Leistung weiter zu optimieren. Weitere Informationen finden Sie unter Minimierbare Banneranzeigen.
Adaptive Inline-Banner
Adaptive Inline-Banner sind im Vergleich zu verankerten adaptiven Bannern größer und höher. Banner. Sie haben eine variable Höhe und können so hoch wie der Gerätebildschirm sein. Adaptive Inline-Banner werden gegenüber verankerten adaptiven Banneranzeigen empfohlen, Apps, die Banneranzeigen in scrollbarem Content platzieren Siehe Inline-Adaptive Details.