Banneranzeigen

Banneranzeigen sind rechteckige Anzeigen, die einen Teil der App-Oberfläche einnehmen. Sie bleiben auf dem Bildschirm, während die Nutzer mit der App interagieren. am oberen oder unteren Rand des Bildschirms oder inline mit dem Content, wenn der Nutzer scrollt. Banneranzeigen können nach einer bestimmten Zeit automatisch aktualisiert werden. Siehe Übersicht über Banneranzeigen .

In diesem Leitfaden erhalten Sie eine Einführung in die Verwendung von verankerten adaptiven Bannern. Anzeigen, Die Leistung wird maximiert, indem die Anzeigengröße für jedes Gerät eine von Ihnen festgelegte Anzeigenbreite.

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 von 320 × 50. Einmal die verfügbare volle Breite angeben, wird eine Anzeige mit der optimalen Höhe für dieser Breite. Die optimale Höhe ändert sich nicht bei Anfragen vom selben Gerät und die umliegenden Ansichten müssen sich nicht bewegen, wenn die Anzeige aktualisiert wird.

Vorbereitung

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. Machen Sie einfach ersetzen Sie sie vor dem Veröffentlichen Ihrer App durch Ihre Anzeigenblock-ID.

Weitere Informationen zur Funktionsweise von Testanzeigen im Mobile Ads SDK finden Sie 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 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

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 ein 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)
  }

Erstellen Sie zum Verwalten der Initialisierung und des Verhaltens von GADBannerView 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. 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 ein GADBannerView zu einem Storyboard oder einer xib-Datei hinzufügen. Bei Verwendung dieses hinzufügen, achten Sie darauf, nur Positionsbeschränkungen für das Banner hinzuzufügen. Wenn Sie beispielsweise ein adaptives Banner am unteren Bildschirmrand anzeigen lassen möchten, setzen Sie den unteren Rand der Banneransicht auf den oberen Rand des unteren Layout-Guides und die centerX-Einschränkung auf die centerX des Superviews.

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 Properties konfiguriert sind, können Sie eine Anzeige laden. Dazu wird loadRequest: auf einer GADRequest -Objekt enthält:

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 Properties wie Targeting-Informationen.

Wenn Ihre Anzeige nicht geladen wird, müssen Sie nicht explizit eine andere anfordern, sofern Sie Ihren Anzeigenblock für die Aktualisierung konfiguriert haben. Das Google Mobile Ads SDK berücksichtigt die in der AdMob-Benutzeroberfläche angegebene Aktualisierungsrate. Wenn Sie die Aktualisierung nicht aktiviert haben, müssen Sie eine neue Anfrage senden.

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 du dich für Banneranzeigenereignisse registrieren möchtest, musst du die Property delegate auf GADBannerView 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: 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

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.

Swift Objective-C

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 kannst du das Ereignis bannerViewDidReceiveAd: beobachten:

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 nach der Rückgabe zu animieren, 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:(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 durch einen Klick 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 Hier sehen Sie die 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

Zusätzliche Ressourcen

Beispiele auf GitHub

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. 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 im Vergleich zu adaptiven Ankerbannern größer und höher. 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 scrollbaren Inhalten platzieren Siehe Inline-Adaptive Details.

Weitere Themen entdecken