Werbebanner

Bannerwerbung nimmt einen Platz innerhalb des App-Layouts ein, entweder oben oder unten auf dem Gerätebildschirm. Sie bleiben auf dem Bildschirm, während Benutzer mit der App interagieren, und können nach einer bestimmten Zeit automatisch aktualisiert werden. Wenn Sie neu in der mobilen Werbung sind, sind sie ein großartiger Ausgangspunkt.Fallstudie .

Diese Anleitung zeigt Ihnen, wie Sie Werbebanner vonAdMob in eine iOS-App integrieren. Neben Code-Snippets und Anleitungen enthält es Informationen zur richtigen Größe von Bannern und Links zu weiteren Ressourcen.

Voraussetzungen

• Importieren Sie das Google Mobile Ads SDK entweder allein oder als Teil von Firebase .

Testen Sie immer mit Testanzeigen

Stellen Sie beim Erstellen und Testen Ihrer Apps sicher, dass Sie Testanzeigen anstelle von Live-Produktionsanzeigen verwenden. Andernfalls kann Ihr Konto gesperrt werden.

Am einfachsten laden Sie Testanzeigen, indem Sie unsere dedizierte Testanzeigenblock-ID für iOS-Banner verwenden:ca-app-pub-3940256099942544/2934735716

Es wurde speziell so konfiguriert, dass es für jede Anfrage Testanzeigen zurückgibt, und Sie können es beim Codieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Stellen Sie nur sicher, dass Sie es durch Ihre eigene Anzeigenblock-ID ersetzen, bevor Sie Ihre App veröffentlichen.

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

Erstellen Sie einen GADBannerView

Bannerwerbung wird in GADBannerView Objekten angezeigt, sodass der erste Schritt zur Integration von Bannerwerbung darin besteht, einen GADBannerView in Ihre Ansichtshierarchie aufzunehmen. Dies erfolgt normalerweise entweder mit dem Interface Builder oder programmgesteuert.

Interface-Builder

Ein GADBannerView kann wie jede typische Ansicht zu einem Storyboard oder einer xib-Datei hinzugefügt werden. Stellen Sie bei Verwendung dieser Methode sicher, dass Breiten- und Höhenbeschränkungen hinzugefügt werden, damit sie der Anzeigengröße entsprechen, die Sie anzeigen möchten. Wenn Sie beispielsweise ein Banner (320 x 50) anzeigen, verwenden Sie eine Breitenbeschränkung von 320 Punkten und eine Höhenbeschränkung von 50 Punkten.

Programmatisch

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

Schnell

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

Ziel 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, dass wir in diesem Fall keine Breiten- oder Höhenbeschränkungen angeben, da die bereitgestellte Anzeigengröße dem Banner eine intrinsische Inhaltsgröße gibt, um die Ansicht zu vergrößern.

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

Konfigurieren GADBannerView Eigenschaften

Um Anzeigen zu laden und anzuzeigen, müssen für GADBannerView einige Eigenschaften festgelegt werden.

• rootViewController – Dieser Ansichtscontroller wird verwendet, um ein Overlay anzuzeigen, wenn auf die Anzeige geklickt wird. Er sollte normalerweise auf den View-Controller gesetzt werden, der den GADBannerView enthält.
• adUnitID – Dies ist die Anzeigenblock-ID, aus der der GADBannerView Anzeigen laden soll.

Hier ist ein Codebeispiel, das zeigt, wie die beiden erforderlichen Eigenschaften in der viewDidLoad Methode eines UIViewController festgelegt werden:

Schnell

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

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

Ziel 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 stellen einen Ort in Ihrer App dar, an dem Anzeigen erscheinen. Wenn Sie beispielsweise Bannerwerbung in zwei View-Controllern anzeigen, können Sie für jeden einen Anzeigenblock erstellen.

Laden Sie eine Anzeige

Sobald der GADBannerView und seine Eigenschaften konfiguriert sind, ist es an der Zeit, eine Anzeige zu laden. Dies geschieht durch Aufrufen von loadRequest: für ein GADRequest Objekt:

Schnell

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

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

Ziel 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 für Dinge wie Targeting-Informationen.

Hinweis: Wenn Ihre Anzeige nicht geladen wird, müssen Sie nicht ausdrücklich eine weitere anfordern, solange Sie Ihren Anzeigenblock für die Aktualisierung konfiguriert haben. Das Google Mobile Ads SDK berücksichtigt jede Aktualisierungsrate, die Sie in derAdMob Benutzeroberfläche angegeben haben. Wenn Sie die Aktualisierung nicht aktiviert haben, müssen Sie eine neue Anfrage stellen.

Anzeigenereignisse

Durch die Verwendung von GADBannerViewDelegate können Sie auf Lebenszyklusereignisse lauschen, z. B. wenn eine Anzeige geschlossen wird oder der Benutzer die App verlässt.

Registrierung für Banner-Events

Um sich für Banneranzeigenereignisse zu registrieren, legen Sie die Eigenschaft „ delegate “ auf GADBannerView auf ein Objekt fest, das das GAD- GADBannerViewDelegate Protokoll implementiert. Im Allgemeinen fungiert die Klasse, die Bannerwerbung implementiert, auch als Delegate-Klasse. In diesem Fall kann die delegate -Eigenschaft auf self gesetzt werden.

Schnell

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

Ziel c

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  ...
  self.bannerView.delegate = self;
}

Banner-Events implementieren

Jede der Methoden in GADBannerViewDelegate ist als optional gekennzeichnet, sodass Sie nur die gewünschten Methoden implementieren müssen. Dieses Beispiel implementiert jede Methode und protokolliert eine Nachricht an die Konsole:

Schnell

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

Ziel 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");
}

Sehen Sie sich das Ad Delegate-Beispiel für eine Implementierung von Banner-Delegat-Methoden in der iOS-API-Demo-App an.

Swift Objective-C

Anwendungsfälle

Hier sind einige Anwendungsbeispiele für diese Anzeigenereignismethoden.

Hinzufügen eines Banners zur Ansichtshierarchie, sobald eine Anzeige empfangen wird

Möglicherweise möchten Sie das Hinzufügen eines GADBannerView zur Ansichtshierarchie verschieben, bis eine Anzeige eingegangen ist. Sie können dies tun, indem Sie auf das Ereignis bannerViewDidReceiveAd: :

Schnell

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints as above.
  addBannerViewToView(bannerView)
}

Ziel c

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

Animieren einer Werbebanner

Sie können auch das Ereignis bannerViewDidReceiveAd: verwenden, um eine Banneranzeige zu animieren, sobald sie zurückgegeben wird, wie im folgenden Beispiel gezeigt:

Schnell

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

Ziel c

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

Anhalten und Fortsetzen der App

Das GADBannerViewDelegate Protokoll verfügt über Methoden, um Sie über Ereignisse zu benachrichtigen, z. B. 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 externen Browseraufrufen zu erfassen, nicht nur solche, die von Anzeigenklicks stammen, sollte Ihre App besser auf die entsprechenden Methoden auf UIViewController oder UIApplication . Hier ist eine Tabelle mit den entsprechenden iOS-Methoden, die gleichzeitig mit den GADBannerViewDelegate Methoden aufgerufen werden:

GADBannerViewDelegate-Methode	iOS-Methode
bannerViewWillPresentScreen:	ViewWillDisappear von viewWillDisappear:
bannerViewWillDismissScreen:	ViewWillAppear des viewWillAppear:
bannerViewDidDismissScreen:	Ansicht des viewDidAppear:

Bannergrößen

In der folgenden Tabelle sind die Standard-Bannergrößen aufgeführt.

Größe in Punkten (BxH)	Beschreibung	Verfügbarkeit	AdSize-Konstante
320 x 50	Banner	Telefone und Tablets	GADAdSizeBanner
320 x 100	Großes Banner	Telefone und Tablets	GADAdSizeLargeBanner
300 x 250	Mittleres IAB-Rechteck	Telefone und Tablets	GADAdSizeMediumRectangle
468x60	IAB-Banner in voller Größe	Tablets	GADAdSizeFullBanner
728 x 90	IAB-Bestenliste	Tablets	GADAdSizeLeaderboard
Bereitgestellte Breite x Adaptive Höhe	Adaptives Banner	Telefone und Tablets	N / A

Benutzerdefinierte Anzeigengrößen

Um eine benutzerdefinierte Bannergröße zu definieren, legen Sie Ihre gewünschte Größe mit GADAdSizeFromCGSize , wie hier gezeigt:

Schnell

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

Ziel c

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

Zusätzliche Ressourcen

Beispiele auf GitHub

• Beispiel für Bannerwerbung: Swift | Ziel c

• Demo für erweiterte Funktionen: Swift | Ziel c

• Banner-UITableView-Beispiel auf GitHub: Swift | Ziel c

Video-Tutorials zu Mobile Ads Garage

• Banner-Implementierung
• Best Practices für Banner

Erfolgsgeschichten

• Beispielanwendungsfall