Banneranzeigen

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 inline mit dem Inhalt, 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 werden die ersten Schritte mit verankerten adaptiven Banneranzeigenbeschrieben. Damit lässt sich die Leistung maximieren, da die Anzeigengröße für jedes Gerät mit einer von Ihnen angegebenen Anzeigenbreite optimiert wird.

Adaptive Ankerbanner

Als verankerte adaptive Banneranzeigen werden anstelle von herkömmlichen Anzeigen mit fester Größe Anzeigen mit einem festen Seitenverhältnis verwendet. Das Seitenverhältnis entspricht dem Branchenstandard 320 × 50. Wenn Sie die volle 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 von demselben Gerät. Auch die umgebenden Ansichten müssen sich beim Aktualisieren der Anzeige nicht verschieben.

Voraussetzungen

Immer mit Testanzeigen testen

Verwenden Sie beim Erstellen und Testen Ihrer Apps Testanzeigen und keine Liveanzeigen. Andernfalls kann Ihr Konto gesperrt werden.

Testanzeigen lassen sich am einfachsten mit unserer speziellen Test-ID für iOS-Banner laden: ca-app-pub-3940256099942544/2435281174

Er wurde speziell so konfiguriert, dass bei jeder Anfrage Testanzeigen zurückgegeben werden. Sie können ihn beim Programmieren, Testen und Debuggen kostenlos in Ihren eigenen Apps verwenden. Ersetzen Sie sie einfach durch Ihre eigene Anzeigenblock-ID, bevor Sie Ihre App veröffentlichen.

Weitere Informationen zur Funktionsweise der Testanzeigen des Mobile Ads SDK finden Sie unter Testanzeigen.

GADBannerViewerstellen

Banneranzeigen werden in GADBannerView-Objekten ausgeliefert. Deshalb müssen Sie zum Einbinden von Banneranzeigen zuerst eine GADBannerView in Ihre Ansichtshierarchie aufnehmen. Dies erfolgt in der Regel entweder programmatisch oder über Interface Builder.

Programmatisch

Ein GADBannerView kann auch direkt instanziiert werden. Hier ein Beispiel für das Erstellen eines GADBannerView, das an der unteren Mitte des sicheren Bereichs des Bildschirms ausgerichtet ist:

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

Objective-C

@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];
  [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

In diesem Fall geben wir keine Einschränkungen für Breite oder Höhe an, da die angegebene Anzeigengröße dem Banner eine unveränderliche Inhaltsgröße für die Größe der Ansicht gibt.

Interface-Builder

Ein GADBannerView kann einem Storyboard oder einer xib-Datei hinzugefügt werden. Bei dieser Methode dürfen Sie nur Positionsbeschränkungen für das Banner hinzufügen. Wenn ein adaptives Banner beispielsweise am unteren Bildschirmrand eingeblendet wird, muss der untere Bereich der Banneransicht dem oberen Rand der Layoutübersicht unten und das Zentrum X entspricht der Mitte X der Superview-Ansicht.

Die Anzeigengröße des Banners wird weiterhin programmatisch festgelegt:

Swift

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective-C

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

Anzeige laden

Nachdem die GADBannerView eingerichtet und die zugehörigen Eigenschaften konfiguriert wurden, 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())
}

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 werden kann, müssen Sie nicht explizit eine weitere anfordern, solange Sie Ihren Anzeigenblock für die Aktualisierung konfiguriert haben. Das Google Mobile Ads SDK berücksichtigt jede Aktualisierungsrate, die Sie auf der Benutzeroberfläche AdMobangegeben haben. 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

Um sich für Banneranzeigenereignisse zu registrieren, legen Sie die Eigenschaft delegate für GADBannerView auf ein Objekt fest, in dem das GADBannerViewDelegate-Protokoll implementiert ist. Im Allgemeinen fungiert die Klasse, in der Banneranzeigen implementiert sind, auch als Delegatklasse. In diesem Fall kann das Attribut delegate auf self gesetzt werden.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.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, sodass Sie nur die gewünschten Methoden implementieren müssen. In diesem Beispiel wird jede Methode 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.

Swift Objective-C

Anwendungsfälle

Im Folgenden finden Sie einige beispielhafte Anwendungsfälle für diese Anzeigenereignismethoden.

Ein Banner zur Ansichtshierarchie hinzufügen, nachdem eine Anzeige empfangen wurde

Sie können das Hinzufügen von GADBannerView zur Ansichtshierarchie verzögern, bis eine Anzeige empfangen wurde. Dazu warten Sie auf das Ereignis bannerViewDidReceiveAd::

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints as above.
  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 mit dem Ereignis bannerViewDidReceiveAd: auch eine Banneranzeige animieren, nachdem sie zurückgegeben wurde, 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;
  }];
}

Anwendung pausieren und fortsetzen

Das GADBannerViewDelegate-Protokoll enthält Methoden, mit denen Sie über Ereignisse informiert werden, beispielsweise wenn ein Klick dazu führt, dass ein Overlay angezeigt oder geschlossen wird. Wenn Sie prüfen möchten, ob diese Ereignisse auf Anzeigen zurückzuführen sind, registrieren Sie sich für diese GADBannerViewDelegate-Methoden.

Um alle Arten von Overlay-Präsentationen oder Aufrufen externer Browser zu erfassen, nicht nur solche, die von Anzeigenklicks stammen, sollte Ihre App besser auf die entsprechenden Methoden von UIViewController oder UIApplication warten. Die folgende Tabelle enthält die entsprechenden 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

Nächste Schritte

Minimierbare Banner

Minimierbare Banneranzeigen sind Banneranzeigen, die anfangs als größeres Overlay präsentiert werden, mit einer Schaltfläche zum Minimieren der Anzeige. Erwägen Sie, damit Ihre Leistung weiter zu optimieren. Weitere Informationen finden Sie unter Minimierbare Banneranzeigen.

Adaptive Inline-Banner

Adaptive Inline-Banner sind größere, höhere Banner im Vergleich zu verankerten adaptiven Bannern. Sie haben eine variable Höhe und können so hoch wie der Gerätebildschirm sein. Adaptive Inline-Banner werden bei Apps, in denen Banneranzeigen in scrollbarem Content platziert werden, vor verankerten adaptiven Banneranzeigen empfohlen. Weitere Informationen finden Sie unter Adaptive Inline-Banner.

Weitere Themen entdecken