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 erfahren Sie, wie Sie mit verankerten adaptiven Banneranzeigen die Leistung maximieren, indem Sie die Anzeigengröße für jedes Gerät mit der von Ihnen festgelegten Anzeigenbreite optimieren.

Adaptive Ankerbanner

Verankerte adaptive Banneranzeigen sind Anzeigen mit festem Seitenverhältnis und keine regulären Anzeigen mit fester Größe. Das Seitenverhältnis entspricht dem Branchenstandard 320 × 50. Sobald Sie die volle Breite angegeben haben, wird eine Anzeige mit der optimalen Höhe für diese Breite zurückgegeben. Die optimale Höhe ändert sich bei den Anfragen von demselben Gerät nicht und die umgebenden Ansichten müssen sich bei der Aktualisierung der Anzeige nicht verschieben.

Voraussetzungen

• Arbeiten Sie den Startleitfaden durch.

Immer mit Testanzeigen testen

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

Am einfachsten lassen sich Testanzeigen mit unserer Testanzeigenblock-ID für iOS-Banner laden: /6499/example/adaptive-banner

Sie wurde speziell so konfiguriert, dass bei jeder Anfrage Testanzeigen zurückgegeben werden. Sie können die Funktion beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Ersetzen Sie sie einfach vor der Veröffentlichung Ihrer App durch Ihre Anzeigenblock-ID.

Weitere Informationen zur Funktionsweise von Testanzeigen des Mobile Ads SDK findest du unter Testanzeigen.

GAMBannerView erstellen

Banneranzeigen werden in GAMBannerView-Objekten angezeigt. Der erste Schritt zur Einbindung von Banneranzeigen besteht also darin, eine GAMBannerView in die Ansichtshierarchie einzubinden. Dies erfolgt in der Regel entweder programmatisch oder über Interface Builder.

Programmatisch

Eine GAMBannerView kann auch direkt instanziiert werden. Hier ist ein Beispiel für das Erstellen einer GAMBannerView, die an der unteren Mitte des sicheren Bereichs des Bildschirms ausgerichtet ist:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  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 = GAMBannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    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) GAMBannerView *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 = [[GAMBannerView 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

Beachten Sie, dass in diesem Fall keine Einschränkungen für die Breite oder Höhe festgelegt werden, da die angegebene Anzeigengröße dem Banner eine unveränderliche Inhaltsgröße für die Größe der Ansicht verleiht.

Interface-Builder

Tipp :Informationen zur Implementierung von Banneranzeigen über SwiftUI finden Sie unter Banneranzeigen.

Ein GAMBannerView kann einem Storyboard oder einer xib-Datei hinzugefügt werden. Wenn Sie diese Methode verwenden, dürfen Sie dem Banner nur Positionseinschränkungen hinzufügen. Wenn beispielsweise unten auf dem Bildschirm ein adaptives Banner angezeigt wird, legen Sie den unteren Rand der Banneransicht wie oben in der Layoutanleitung „Bottom“ fest und die Mitte X der Mitte X der Superansicht.

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

Swift

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective-C

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

Anzeige laden

Sobald die GAMBannerView eingerichtet und ihre Eigenschaften konfiguriert sind, kann eine Anzeige geladen werden. Dazu wird loadRequest: für ein GAMRequest-Objekt aufgerufen:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  bannerView.adUnitID = "/6499/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

Objective-C

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/6499/example/adaptive-banner";
  self.bannerView.rootViewController = self;

  [self.bannerView loadRequest:[GAMRequest request]];
}

GAMRequest-Objekte stellen eine einzelne Anzeigenanfrage dar und enthalten Eigenschaften wie Targeting-Informationen.

Falls Ihre Anzeige nicht geladen werden kann, müssen Sie nicht explizit eine neue anfordern, sofern Sie den Anzeigenblock für die Aktualisierung konfiguriert haben. Das Google Mobile Ads SDK berücksichtigt jede Aktualisierungsrate, die Sie auf der Ad Manager-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 einzurichten, bevor Sie sie schalten möchten. So können Anzeigen bei Bedarf ohne Latenz bereitgestellt werden. Da Anzeigen nach einer Stunde ablaufen, sollten Sie diesen Cache leeren und stündlich neue Anzeigen hochladen.

Anzeigenereignisse

Mit GADBannerViewDelegate können Sie auf Lebenszyklusereignisse warten, z. B. wenn eine Anzeige geschlossen wird oder der Nutzer die App verlässt.

Für Bannerereignisse registrieren

Wenn Sie sich für Banneranzeigenereignisse registrieren möchten, legen Sie die delegate-Eigenschaft von GAMBannerView auf ein Objekt fest, in dem das GADBannerViewDelegate-Protokoll implementiert ist. Im Allgemeinen fungiert die Klasse, die Banneranzeigen implementiert, 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: GAMBannerView!

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

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *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. Dieses Beispiel implementiert jede Methode und protokolliert eine Meldung in der Console:

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 Anwendungsbeispiele für diese Anzeigenereignismethoden.

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

Es kann sinnvoll sein, der Ansichtshierarchie eine GAMBannerView hinzuzufügen, 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:(GAMBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

Banneranzeige animieren

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

Swift

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

Objective-C

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

Pausieren und Fortsetzen der App

Das Protokoll GADBannerViewDelegate bietet Methoden zur Benachrichtigung über Ereignisse, z. B. wenn ein Klick dazu führt, dass ein Overlay angezeigt oder geschlossen wird. Wenn Sie überprüfen möchten, ob diese Ereignisse auf Anzeigen zurückzuführen sind, registrieren Sie sich für diese GADBannerViewDelegate-Methoden.

Wenn Sie alle Arten von Overlay-Präsentationen oder Aufrufen externer Browser erfassen möchten, nicht nur diejenigen, die auf Anzeigenklicks zurückgehen, ist es besser, für Ihre App die entsprechenden Methoden für UIViewController oder UIApplication zu überwachen. Die folgende Tabelle enthält die gleichwertigen 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

Manuelle Impressionszählung

Wichtig :Das manuelle Zählen von Impressionen ist nur mit Kampagnen für den Direktverkauf und hausinternen Kampagnen kompatibel (d. h. Creatives, die direkt in Ad Manager getraffickt werden). Es darf nicht für Backfill-Anzeigen oder Anzeigen in Drittanbieter-Werbenetzwerken verwendet werden. Weitere Informationen finden Sie in diesem Hilfeartikel.

Sie können Impressions-Pings manuell an Ad Manager senden, wenn eine Impression unter besonderen Bedingungen erfasst werden soll. Dazu muss vor dem Laden einer Anzeige zuerst ein GAMBannerView für manuelle Impressionen aktiviert werden:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Wenn Sie feststellen, dass eine Anzeige zurückgegeben wurde und auf dem Bildschirm zu sehen ist, können Sie eine Impression manuell auslösen:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

Hinweis :Impressionen werden automatisch ausgelöst, wenn der bannerViewDidReceiveAd:-Callback aufgerufen wird. Sie sollten diese Funktion nur in Betracht ziehen, wenn Sie Impressionen zu einem anderen Zeitpunkt erfassen möchten.

App-Ereignisse

Mit App-Ereignissen können Sie Anzeigen erstellen, über die Nachrichten an den App-Code gesendet werden. Anhand dieser Nachrichten kann die App dann Aktionen ausführen.

Mit GADAppEventDelegate können Sie Ad Manager-spezifische App-Ereignisse erfassen. Diese Ereignisse können im Lebenszyklus der Anzeige jederzeit auftreten, auch vor dem Aufruf der bannerViewDidReceiveAd: des GADBannerViewDelegate-Objekts.

Swift

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func bannerView(_ banner: GAMBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

Objective-C

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

Ihre App-Ereignismethoden können in einem Ansicht-Controller implementiert werden:

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {
}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {
}

@end

Der Delegat muss mit dem Attribut appEventDelegate festgelegt werden, bevor eine Anzeige angefragt wird.

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

Das folgende Beispiel zeigt, wie Sie die Hintergrundfarbe einer App ändern, indem Sie die Farbe über ein App-Ereignis angeben:

Swift

func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String,
    withInfo info: String?) {
  if name == "color" {
    guard let info = info else { return }
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.green
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    default:
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

Objective-C

-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

Und hier ist das entsprechende Creative, über das App-Ereignisnachrichten mit der Farbe an appEventDelegate gesendet werden:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Eine Implementierung von App-Ereignissen in der iOS API Demo App finden Sie im Beispiel zu Ad Manager-App-Ereignissen.

Swift Objective-C

Zusätzliche Ressourcen

Beispiele auf GitHub

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

• Demo zu erweiterten Funktionen: Swift | Objective-C

Nächste Schritte

Minimierbare Banner

Minimierbare Banneranzeigen sind Banneranzeigen, die anfänglich als größeres Overlay dargestellt werden und eine Schaltfläche zum Minimieren der Anzeige haben. Erwägen Sie, damit die Leistung weiter zu optimieren. Weitere Informationen finden Sie unter Minimierbare Banneranzeigen.

Adaptive Inline-Banner

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

Weitere Themen entdecken

• Datenschutz für Nutzer