Banneranzeigen

Banneranzeigen nehmen einen Platz im App-Layout ein, entweder oben oder unten auf dem Gerätebildschirm. Sie bleiben auf dem Bildschirm, während Nutzer mit der App interagieren, und können nach einer bestimmten Zeit automatisch aktualisiert werden. Wenn Sie mit mobiler Werbung noch nicht vertraut sind, sind sie ein guter Ausgangspunkt. Fallstudie.

In diesem Leitfaden erfahren Sie, wie Sie Banneranzeigen ausAdMob in eine iOS-App einbinden. Zusätzlich zu Code-Snippets und Anleitungen enthält er Informationen zur richtigen Größenanpassung von Bannern sowie Links zu weiteren Ressourcen.

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-Anzeigenblock-ID für iOS-Banner laden: ca-app-pub-3940256099942544/2934735716

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 angezeigt. Wenn Sie Banneranzeigen daher einbinden möchten, müssen Sie zuerst eine GADBannerView in Ihre Ansichtshierarchie aufnehmen. Dies erfolgt in der Regel entweder mit dem Interface Builder oder programmatisch.

Interface-Builder

Ein GADBannerView kann wie jede andere Ansicht einem Storyboard oder einer xib-Datei hinzugefügt werden. Bei dieser Methode müssen Sie Einschränkungen für Breite und Höhe hinzufügen, damit sie der Größe entsprechen, die ausgeliefert werden soll. Verwenden Sie beispielsweise für ein Banner (320 × 50) eine Breitenbeschränkung von 320 Punkten und eine Höhenbeschränkung von 50 Punkten.

Programmatisch

Ein GADBannerView kann auch direkt instanziiert werden. Hier ein Beispiel für die Erstellung eines GADBannerView, das an der unteren Mitte des sicheren Bereichs des Bildschirms ausgerichtet ist, mit einer Bannergröße von 320 × 50:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GADBannerView(adSize: GADAdSizeBanner)

    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];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [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.

Wenn Sie keine durch eine Konstante definierte Standardgröße verwenden möchten, können Sie mit GADAdSizeFromCGSize eine benutzerdefinierte Größe festlegen. Weitere Informationen hierzu finden Sie im Abschnitt zur Bannergröße.

Attribute GADBannerView konfigurieren

Damit Anzeigen für GADBannerView geladen und ausgeliefert werden können, müssen einige Eigenschaften festgelegt werden.

  • rootViewController: Dieser View Controller wird verwendet, um ein Overlay anzuzeigen, wenn auf die Anzeige geklickt wird. Er sollte normalerweise auf den Ansichts-Controller festgelegt werden, der GADBannerView enthält.
  • adUnitID: Dies ist die Anzeigenblock-ID, aus der mit dem GADBannerView Anzeigen geladen werden sollen.

Das folgende Codebeispiel zeigt, wie die beiden erforderlichen Attribute in der Methode viewDidLoad eines UIViewControllers festgelegt werden:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
}

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()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
  bannerView.load(GADRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  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 keine explizite Anfrage für eine weitere Anfrage stellen, solange Sie Ihren Anzeigenblock für die Aktualisierung konfiguriert haben. Das Google Mobile Ads SDK berücksichtigt jede Aktualisierungsrate, die Sie auf derAdMob -Benutzeroberfläche angegeben haben. Wenn Sie die Aktualisierung nicht aktiviert haben, müssen Sie eine neue Anfrage senden.

Anzeigenereignisse

Mit GADBannerViewDelegate können Sie auf Lebenszyklusereignisse wie das Schließen einer Anzeige oder das Verlassen der App warten.

Für Bannerereignisse registrieren

Wenn Sie sich für Banneranzeigenereignisse registrieren möchten, 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

Mit dem Ereignis bannerViewDidReceiveAd: lässt sich auch eine Banneranzeige animieren, nachdem sie zurückgegeben wurde. Hier ein 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;
  }];
}

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 nachverfolgen 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

In der folgenden Tabelle sind die Standardbannergrößen aufgeführt.

Größe in Punkten (B x H) Beschreibung Verfügbarkeit AdSize-Konstante
320 x 50 Banner Smartphones und Tablets GADAdSizeBanner
320 × 100 Großes Banner Smartphones und Tablets GADAdSizeLargeBanner
300 x 250 IAB Medium Rectangle Smartphones und Tablets GADAdSizeMediumRectangle
468 × 60 IAB-Banner in voller Größe Tablets GADAdSizeFullBanner
728 x 90 IAB-Bestenliste Tablets GADAdSizeLeaderboard
Angegebene Breite x Adaptive Höhe Adaptives Banner Smartphones und Tablets

Benutzerdefinierte Anzeigengrößen

Wenn du eine benutzerdefinierte Bannergröße definieren möchtest, lege die gewünschte Größe mit GADAdSizeFromCGSize fest:

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

Weitere Ressourcen

Beispiele auf GitHub

Videoanleitungen der Google Zukunftswerkstatt

Erfolgsgeschichten

Nächste Schritte

Weitere Informationen zum Datenschutz für Nutzer