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 im Content platziert, sodass sie sichtbar bleiben, wenn der Nutzer scrollt. Banneranzeige Anzeigen können nach einer bestimmten Zeit automatisch aktualisiert werden. Siehe Übersicht über Banneranzeigen .

In diesem Leitfaden erfahren Sie, wie Sie ankernbare adaptive Banneranzeigen einrichten. Dabei wird die Anzeigengröße für jedes Gerät anhand einer von Ihnen angegebenen Anzeigenbreite optimiert, um die Leistung zu maximieren.

Adaptive Ankerbanner

Verankerte adaptive Banneranzeigen haben ein festes Seitenverhältnis, im Gegensatz zu herkömmlichen Anzeigen mit fester Größe. Das Seitenverhältnis entspricht dem Branchenstandard 320 x 50. Sobald Sie die gesamte verfügbare Breite angegeben haben, wird eine Anzeige mit der optimalen Höhe für diese Breite zurückgegeben. Die optimale Höhe ändert sich nicht bei Anfragen vom selben Gerät und die umgebenden Ansichten müssen sich nicht bewegen, wenn die Anzeige aktualisiert wird.

Vorbereitung

• Führen Sie die Schritte im Startleitfaden aus.

Verwenden Sie immer Testanzeigen

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

Die einfachste Methode zum Laden von Testanzeigen ist die Verwendung unserer Testanzeigenblock-ID für iOS. Banner:

/21775744923/example/adaptive-banner

Es wurde speziell so konfiguriert, dass für jede Anfrage Testanzeigen zurückgegeben werden. Sie können es in Ihren eigenen Apps verwenden, während Sie Code schreiben, testen und debuggen. Machen Sie einfach ersetzen Sie sie vor dem Veröffentlichen Ihrer App durch Ihre Anzeigenblock-ID.

Weitere Informationen zur Funktionsweise von Testanzeigen im Mobile Ads SDK finden Sie unter Testanzeigen.

GAMBannerView erstellen

Banneranzeigen werden in GAMBannerView angezeigt Objekte. Der erste Schritt zur Integration von Banneranzeigen ist also das Einfügen einer GAMBannerView in Ihrer Ansichtshierarchie. Dies geschieht in der Regel entweder programmatisch oder über Interface Builder erstellen.

Programmatisch

Eine GAMBannerView kann auch direkt instanziiert werden. Im folgenden Beispiel wird eine GAMBannerView erstellt:

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)
    // This example doesn't give width or height constraints, as the provided
    // ad size gives the banner an intrinsic content size to size the view.
    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)
      ])
  }
}

SwiftUI

Wenn Sie eine GAMBannerView verwenden möchten, erstellen Sie eine UIViewRepresentable:

private struct BannerView: UIViewRepresentable {
  let adSize: GADAdSize

  init(_ adSize: GADAdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> UIView {
    // Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
    // frame size changes; wrapping in a UIView container insulates the GADBannerView from size
    // changes that impact the view returned from makeUIView.
    let view = UIView()
    view.addSubview(context.coordinator.bannerView)
    return view
  }

  func updateUIView(_ uiView: UIView, context: Context) {
    context.coordinator.bannerView.adSize = adSize
  }

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }
BannerContentView.swift

Um die Initialisierung und das Verhalten des GAMBannerView zu verwalten, erstellen Sie eine Coordinator:

class BannerCoordinator: NSObject, GADBannerViewDelegate {

  private(set) lazy var bannerView: GADBannerView = {
    let banner = GADBannerView(adSize: parent.adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(GADRequest())
    banner.delegate = self
    return banner
  }()

  let parent: BannerView

  init(_ parent: BannerView) {
    self.parent = parent
  }
BannerContentView.swift

Verwenden Sie GeometryReader, um die Breite der Ansicht abzurufen. In dieser Klasse wird die richtige Anzeigengröße für die aktuelle Geräteausrichtung berechnet. frame ist auf die Höhe festgelegt, die aus der Anzeigengröße berechnet wird.

var body: some View {
  GeometryReader { geometry in
    let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)

    VStack {
      Spacer()
      BannerView(adSize)
        .frame(height: adSize.size.height)
    }
  }
BannerContentView.swift

Objective-C

In diesem Fall geben wir keine Einschränkungen für Breite oder Höhe an, da die angegebene Anzeigengröße dem Banner eine intrinsische Inhaltsgröße für die Größe der Ansicht zuweist.

@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];
  // This example doesn't give width or height constraints, as the provided
  // ad size gives the banner an intrinsic content size to size the view.
  [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

Interface Builder

Sie können ein GAMBannerView zu einem Storyboard oder einer xib-Datei hinzufügen. Achten Sie bei dieser Methode darauf, nur Positionseinschränkungen für das Banner hinzuzufügen. Wenn Sie beispielsweise ein adaptives Banner am unteren Bildschirmrand anzeigen lassen möchten, setzen Sie den unteren Rand der Banneransicht auf den oberen Rand des unteren Layout-Guides und die centerX-Einschränkung auf die centerX des Superviews.

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 ist und ihre Eigenschaften ist es Zeit, eine Anzeige zu laden. Dazu wird loadRequest: auf einer GAMRequest -Objekt enthält:

Swift

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

  bannerView.load(GAMRequest())
}

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
BannerContentView.swift

Objective-C

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

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

GAMRequest-Objekte stellen eine einzelne Anzeigenanfrage dar und Eigenschaften für Dinge wie Targeting-Informationen enthalten.

Falls Ihre Anzeige nicht geladen werden kann, müssen Sie keine weitere Voraussetzung ist, dass Sie den Anzeigenblock für die Aktualisierung konfiguriert haben. Google Mobile Ads SDK die in Ad Manager angegebene Aktualisierungsrate berücksichtigt, UI. Wenn Sie die Aktualisierung nicht aktiviert haben, müssen Sie eine neue Anfrage senden.

Tipp: Mit Aufrufen zum Anzeigen-Laden kannst du einen Cache mit vorab geladenen Anzeigen erstellen, bevor du sie ausliefern möchtest. So können Anzeigen bei Bedarf ohne Latenz ausgeliefert werden. Da Anzeigen nach einer Stunde ablaufen, sollten Sie diesen Cache leeren und jede Stunde mit neuen Anzeigen neu laden.

Anzeigenereignisse

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

Für Bannerereignisse registrieren

Wenn du dich für Banneranzeigenereignisse registrieren möchtest, musst du die Property delegate auf GAMBannerView auf ein Objekt, das den GADBannerViewDelegate-Protokoll. In der Regel fungiert die Klasse, die Banneranzeigen implementiert, auch als delegierte Klasse. In diesem Fall kann die Property delegate auf self festgelegt werden.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GAMBannerView!

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

SwiftUI

banner.delegate = self
BannerContentView.swift

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

Alle Methoden in GADBannerViewDelegate sind als optional gekennzeichnet. Sie müssen also nur die gewünschten Methoden implementieren. In diesem Beispiel werden alle Methoden und protokolliert eine Nachricht in der Konsole:

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 finden Sie im Ad Delegate-Beispiel unter die iOS API Demo App.

Swift Objective-C

Anwendungsfälle

Hier einige Anwendungsfälle für diese Methoden für Anzeigenereignisse.

Der Ansichtshierarchie ein Banner hinzufügen, sobald eine Anzeige empfangen wird

Sie sollten das Hinzufügen von GAMBannerView Ansichtshierarchie bleiben, bis eine Anzeige empfangen wurde. Dazu hören Sie für das Ereignis bannerViewDidReceiveAd::

Swift

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

Objective-C

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

Banneranzeige animieren

Mit dem Ereignis bannerViewDidReceiveAd: lässt sich eine Banneranzeige auch einmal animieren. zurückgegeben, 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:(GAMBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

App pausieren und fortsetzen

Das GADBannerViewDelegate-Protokoll bietet Methoden, mit denen Sie über Ereignisse informiert werden, z. B. wenn durch einen Klick ein Overlay angezeigt oder geschlossen wird. Wenn Sie nachvollziehen 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 abzufangen, die auf Anzeigenklicks zurückzuführen sind, ist es besser, wenn Ihre App gleichwertige Methoden auf UIViewController oder UIApplication. Hier ist eine Tabelle Hier sehen Sie die iOS-Methoden, die zur gleichen Zeit wie GADBannerViewDelegate-Methoden:

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

Manuelle Impressionszählung

Wichtig: Die manuelle Erfassung von Impressionen ist nur mit direkt verkauften und selbstverwalteten Kampagnen kompatibel, also mit Creatives, die direkt in Ad Manager getraffickt werden. Sie sollte nicht für Backfill-Anzeigen oder Anzeigen von Drittanbieternetzwerken verwendet werden. Weitere Informationen Weitere Informationen

Sie können Impressions-Pings manuell an Ad Manager senden, wenn Sie spezielle Bedingungen für die Aufzeichnung einer Impression. Dies kann zuerst geschehen, Aktivieren von GAMBannerView für manuelle Impressionen vor dem Laden einer Anzeige:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Wenn Sie feststellen, dass eine Anzeige erfolgreich zurückgegeben 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 die bannerViewDidReceiveAd: aufgerufen wird. Sie sollten diese Funktion nur in Betracht ziehen, wenn Sie Impressionen zu einem anderen Zeitpunkt erfassen.

App-Ereignisse

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

Mit GADAppEventDelegate können Sie Ad Manager-spezifische App-Ereignisse erfassen. Diese Ereignisse können jederzeit während des Lebenszyklus der Anzeige auftreten, auch bevor bannerViewDidReceiveAd: des GADBannerViewDelegate-Objekts aufgerufen wird.

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;

Die Methoden für App-Ereignisse können in einem Viewcontroller implementiert werden:

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

Denken Sie daran, den Delegating-Client mithilfe der Property appEventDelegate festzulegen, bevor Sie eine Anfrage für eine Anzeige senden.

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

Im folgenden Beispiel wird gezeigt, wie Sie die Hintergrundfarbe Ihrer 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, das App-Ereignisnachrichten zu Farben an appEventDelegate sendet:

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

Die Implementierung von App-Ereignissen in der iOS API Demo App

Swift Objective-C

Zusätzliche Ressourcen

Beispiele auf GitHub

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

• Demo zu erweiterten Funktionen: Swift | Objective-C

Nächste Schritte

Minimierbare Banner

Minimierbare Banneranzeigen sind Banneranzeigen, die anfänglich als größere Overlay mit einer Schaltfläche zum Minimieren der Anzeige auf eine kleinere Größe. Sie können sie verwenden, um die Leistung weiter zu optimieren. Weitere Informationen finden Sie unter Minimierbare Banneranzeigen.

Adaptive Inline-Banner

Adaptive Inline-Banner sind im Vergleich zu adaptiven Ankerbannern größer und höher. Sie haben eine variable Höhe und können so hoch sein wie der Bildschirm des Geräts. Für Apps, in denen Banneranzeigen in scrollbaren Inhalten platziert werden, werden adaptive Inline-Banner anstelle von adaptiven Ankerbannern empfohlen. Siehe Inline-Adaptive Details.

Weitere Themen entdecken

• Datenschutz für Nutzer