Banneranzeigen

Banneranzeigen nehmen einen Platz im Layout einer App 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 noch keine Erfahrung mit mobiler Werbung haben, sind sie ein guter Anfang. Fallstudie.

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

Voraussetzungen

• Arbeiten Sie den Startleitfaden durch.

Immer mit Testanzeigen testen

Verwenden Sie beim Erstellen und Testen Ihrer Apps Testanzeigen anstelle von Produktionsanzeigen. Andernfalls kann dein Konto gesperrt werden.

Testanzeigen lassen sich am einfachsten mit unserer speziellen Anzeigenblock-ID für Testanzeigen 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 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. Der erste Schritt bei der Einbindung von Banneranzeigen besteht daher darin, eine GADBannerView in die Ansichtshierarchie einzufügen. Dies erfolgt in der Regel entweder mit dem Interface Builder oder programmatisch.

Interface-Builder

Ein GADBannerView kann wie jede typische Ansicht zu einem Storyboard oder einer xib-Datei hinzugefügt werden. Wenn Sie diese Methode verwenden, müssen Sie Einschränkungen für Breite und Höhe hinzufügen, die der Größe entsprechen, die Sie darstellen möchten. Verwenden Sie bei der Auslieferung eines Banners (320 × 50) beispielsweise 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 das Erstellen eines GADBannerView mit einer Bannergröße von 320 × 50, 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()
    
    // 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

Beachten Sie, dass in diesem Fall keine Einschränkungen für Breite oder Höhe angegeben werden, da die angegebene Anzeigengröße dem Banner eine eigene 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 finden Sie im Abschnitt zur Bannergröße.

Eigenschaften GADBannerView konfigurieren

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

• rootViewController: Mit diesem View Controller wird beim Anklicken der Anzeige ein Overlay präsentiert. Er sollte normalerweise auf den Ansichts-Controller festgelegt werden, der GADBannerView enthält.
• adUnitID: Dies ist die Anzeigenblock-ID, aus der die GADBannerView Anzeigen laden sollen.

Das folgende Codebeispiel zeigt, wie die beiden erforderlichen Eigenschaften 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;
}

Hinweis :Anzeigenblock-IDs werden in der AdMob-Benutzeroberfläche erstellt und repräsentieren die Stellen in Ihrer App, an denen Anzeigen erscheinen. Wenn Sie Banneranzeigen beispielsweise in zwei Ansichts-Controllern schalten, können Sie für jeden einen eigenen Anzeigenblock erstellen.

Anzeige laden

Sobald 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 keinen weiteren Anzeigenblock anfordern, sofern Sie den 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.

Tipp:Sie können Aufrufe zum Laden von Anzeigen verwenden, um einen Cache mit vorab geladenen Anzeigen anzulegen, bevor sie ausgeliefert werden sollen, damit Anzeigen bei Bedarf ohne Latenz ausgeliefert werden können. Da Anzeigen nach einer Stunde ablaufen, sollten Sie den Cache leeren und jede Stunde mit neuen Anzeigen neu laden.

Anzeigenereignisse

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

Für Bannerereignisse registrieren

Wenn Sie sich für Ereignisse für Banneranzeigen registrieren möchten, legen Sie die delegate-Property von GADBannerView auf ein Objekt fest, in dem das GADBannerViewDelegate-Protokoll implementiert ist. Im Allgemeinen fungiert die Klasse, in der Banneranzeigen implementiert sind, auch als Delegate-Klasse. In diesem Fall kann das Attribut 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
  }
}

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-Delegaten-Methoden in der iOS API Demo App finden Sie im Ad Delegate-Beispiel.

Swift Objective-C

Anwendungsfälle

Im Folgenden finden Sie einige Anwendungsbeispiele 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: können Sie auch eine Banneranzeige animieren, sobald sie zurückgegeben wird, 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 Protokoll GADBannerViewDelegate 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

Bannergrößen

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

Größe in Punkten (B x H)	Beschreibung	Verfügbarkeit	AdSize-Konstante
320x50	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 Sie eine benutzerdefinierte Bannergröße definieren möchten, legen Sie die gewünschte Größe mit GADAdSizeFromCGSize fest, wie hier gezeigt:

Swift

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

Objective-C

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

Weitere Ressourcen

Beispiele auf GitHub

• Beispiel für Banneranzeigen: Swift | Objective-C

• Demo der erweiterten Funktionen: Swift | Objective-C

• Banner-UITableView-Beispiel auf GitHub: Swift | Objective-C

Videoanleitungen der Google Zukunftswerkstatt

• Bannerimplementierung
• Best Practices für Banner

Erfolgsgeschichten

• Beispielanwendungsfall

Nächste Schritte

Weitere Informationen zum Datenschutz für Nutzer