Banneranzeigen

Banneranzeigen belegen eine Position in einem App-Layout, entweder oben oder unten auf dem Bildschirm des Geräts. Sie bleiben auf dem Bildschirm, während Nutzer mit der App interagieren, und können nach einer bestimmten Zeit automatisch aktualisiert werden. Wenn Sie noch keine Erfahrung mit mobiler Werbung haben, sind Sie ein guter Ausgangspunkt. Fallstudie

In diesem Leitfaden erfährst du, wie du Banneranzeigen vonAdMob in eine iOS-App einbindest. Zusätzlich zu Code-Snippets und Anleitungen enthält er Informationen zur korrekten Größe von Bannern sowie Links zu weiteren Ressourcen.

Vorbereitung

Immer mit Testanzeigen testen

Verwenden Sie beim Erstellen und Testen Ihrer Apps keine Testanzeigen, sondern Testanzeigen. Fehlen sie, kann Ihr Konto gesperrt werden.

Die einfachste Methode zum Laden von Testanzeigen ist die Verwendung unserer speziellen Test-Anzeigenblock-ID für iOS-Banner: ca-app-pub-3940256099942544/2934735716

Sie wurde speziell dafür entwickelt, für jede Anfrage Testanzeigen zurückzugeben. Außerdem kannst du es beim Programmieren, Testen und Debuggen in deinen eigenen Apps verwenden. Ersetzen Sie ihn vor der Veröffentlichung durch Ihre eigene Anzeigenblock-ID.

Weitere Informationen zur Funktionsweise von Testanzeigen des Mobile Ads SDKs finden Sie unter Testanzeigen.

GADBannerViewerstellen

Banneranzeigen werden in GADBannerView-Objekten angezeigt. Der erste Schritt zur Integration von Banneranzeigen besteht darin, ein GADBannerView in die Ansichtshierarchie aufzunehmen. Die Freigabe erfolgt in der Regel entweder über den Schnittstellen-Builder oder programmatisch.

Schnittstellen-Builder

GADBannerView kann wie jede normale Ansicht einem Storyboard oder einer Xib-Datei hinzugefügt werden. Achten Sie bei dieser Methode darauf, dass für die Anzeige, die angezeigt werden soll, Einschränkungen bezüglich Breite und Höhe hinzugefügt werden. Wenn Sie beispielsweise ein Banner (320 × 50) einblenden, sollten Sie eine Breitesbeschränkung von 320 Punkten und eine Höhenbeschränkung von 50 Punkten verwenden.

Programmatisch

Eine GADBannerView kann auch direkt instanziiert werden. Hier siehst du ein Beispiel für das Erstellen eines GADBannerView mit einer Bannergröße von 320 x 50, dessen Ausrichtung unten in der Mitte des sicheren Bereichs des Bildschirms liegt:

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: bottomLayoutGuide,
                          attribute: .top,
                          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.bottomLayoutGuide
                               attribute:NSLayoutAttributeTop
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  


@end

Beachten Sie in diesem Fall, dass für die Breite oder Höhe keine Beschränkungen gelten, da das Banner eine unveränderliche Inhaltsgröße erhält.

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

Properties GADBannerView konfigurieren

Zum Laden und Anzeigen von Anzeigen müssen für GADBannerView einige Eigenschaften festgelegt werden.

  • rootViewController: Dieser Ansichts-Controller wird dazu verwendet, beim Klicken auf die Anzeige ein Overlay einzublenden. Er sollte normalerweise auf den Ansicht-Controller gesetzt werden, der GADBannerView enthält.
  • adUnitID: Dies ist die Anzeigenblock-ID, über die GADBannerView Anzeigen geladen werden soll.

Hier ein Codebeispiel, das zeigt, wie die beiden erforderlichen Properties in der viewDidLoad-Methode 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

Sobald GADBannerView eingerichtet und die zugehörigen Eigenschaften konfiguriert sind, kann die 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 Eigenschaften wie beispielsweise Targeting-Informationen.

Anzeigenereignisse

Mithilfe von GADBannerViewDelegate kannst du Lebenszyklusereignisse im Auge behalten, z. B. wenn eine Anzeige geschlossen wird oder der Nutzer die App verlässt.

Für Bannerereignisse registrieren

Um dich für Banneranzeigenereignisse zu registrieren, setze die Property delegate auf GADBannerView auf ein Objekt, das das Protokoll GADBannerViewDelegate implementiert. Grundsätzlich fungiert die Klasse, in der Banneranzeigen implementiert werden, als Bevollmächtigten. In diesem Fall kann die Property 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

Alle Methoden in GADBannerViewDelegate sind als optional gekennzeichnet. Sie müssen also nur die gewünschten Methoden implementieren. In diesem Beispiel wird jede Methode implementiert und eine Nachricht in der Konsole 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 Bannerdelegierungsmethoden in der iOS API Demo Demo finden Sie im Beispiel von Ad Delegation.

Swift Ziel-C

Anwendungsfälle

Im Folgenden sehen Sie einige Beispielanwendungsfälle für diese Anzeigenereignismethoden.

Banner in der Ansichtshierarchie hinzufügen, nachdem eine Anzeige empfangen wurde

Möglicherweise möchten Sie die Ansichtshierarchie bis zum Empfang einer Anzeige mit GADBannerView ergänzen. 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];
}

Banneranzeigen animieren

Du kannst auch das Ereignis bannerViewDidReceiveAd: verwenden, um eine Banneranzeige zu animieren, sobald 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;
  }];
}

Pausieren und Fortsetzen der App

Das Protokoll GADBannerViewDelegate bietet Methoden, um Sie über Ereignisse zu informieren, z. B. wenn ein Klick dazu führt, dass ein Overlay angezeigt oder geschlossen wird. Wenn Sie verfolgen 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 externen Aufrufen zu erfassen, nicht nur die aus Anzeigenklicks, ist deine App besser auf Äquivalente bezüglich UIViewController oder UIApplication ausgelegt. In dieser Tabelle sind entsprechende iOS-Methoden aufgeführt, die gleichzeitig mit GADBannerViewDelegate-Methoden aufgerufen werden können:

GADBannerViewDelegate-Methode iOS-Methode
bannerViewWillPresentScreen: UIViewController's viewWillDisappear:
bannerViewWillDismissScreen: UIViewController's viewWillAppear:
bannerViewDidDismissScreen: UIViewController's viewDidAppear:

In der folgenden Tabelle sind die Standardgrößen von Bannern aufgeführt.

Größe in Punkten (BxH) Beschreibung Verfügbarkeit AdSize-Konstante
320 × 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 Originalgröße Tablets GADAdSizeFullBanner
728 x 90 IAB-Bestenliste Tablets GADAdSizeLeaderboard
Angegebene Breite x Adaptive Höhe Adaptives Banner Telefone und Tablets

Benutzerdefinierte Anzeigengrößen

So legst du eine benutzerdefinierte Bannergröße fest, indem du mit GADAdSizeFromCGSize die gewünschte Größe festlegst:

Swift

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

Objective-C

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

Weitere Informationen

Beispiele auf GitHub

Videoanleitungen zur Garage für mobile Anzeigen

Erfolgsgeschichten