Banneranzeigen

Plattform auswählen:Android iOS Unity Flutter

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. Banneranzeigen können nach einer bestimmten Zeit automatisch aktualisiert werden. Weitere Informationen finden Sie unter Banneranzeigen.

In dieser Anleitung erfahren Sie, wie Sie verankerte adaptive Banneranzeigen einrichten. Damit wird die Leistung maximiert, indem die Anzeigengröße für jedes Gerät mit einer von Ihnen angegebenen Anzeigenbreite optimiert wird.

Adaptives Ankerbanner

Verankerte adaptive Banneranzeigen haben ein festes Seitenverhältnis und keine feste Größe wie normale Anzeigen. Das Seitenverhältnis entspricht dem Branchenstandard von 320 × 50. Wenn Sie die gesamte verfügbare Breite angeben, 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.

Immer Testanzeigen verwenden

Verwenden Sie beim Entwickeln und Testen Ihrer Apps Testanzeigen anstelle von Live-Anzeigen. Andernfalls kann es zu einer Kontosperrung kommen.

Am einfachsten lassen sich Testanzeigen laden, wenn Sie unsere spezielle Testanzeigenblock-ID für iOS-Banner verwenden:

/21775744923/example/adaptive-banner

Sie ist speziell dafür konfiguriert, für jede Anfrage Testanzeigen zurückzugeben. Sie können sie also beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Denken Sie daran, sie vor der Veröffentlichung Ihrer App durch Ihre eigene Anzeigenblock-ID zu ersetzen.

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

GAMBannerView erstellen

Banneranzeigen werden in GAMBannerView-Objekten angezeigt. Der erste Schritt zur Einbindung von Banneranzeigen besteht also darin, ein GAMBannerView in Ihre Ansichtshierarchie aufzunehmen. Dies geschieht in der Regel entweder programmatisch oder über Interface Builder.

Programmatisch

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

Swift

// Initialize the BannerView.
bannerView = BannerView()

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
BannerSnippets.swift

SwiftUI

Wenn Sie ein AdManagerBannerView verwenden möchten, erstellen Sie ein UIViewRepresentable:

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

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

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

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

Fügen Sie UIViewRepresentable der Ansichtshierarchie hinzu und geben Sie die Werte height und width an:

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}
BannerContentView.swift

Objective-C

// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
    // Align the banner's bottom edge with the safe area's bottom edge
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

Interface Builder

Sie können einem Storyboard oder einer XIB-Datei ein GAMBannerView hinzufügen. Wenn Sie diese Methode verwenden, fügen Sie dem Banner nur Positionsbeschränkungen hinzu. Wenn Sie beispielsweise ein adaptives Banner unten auf dem Bildschirm anzeigen, legen Sie den unteren Rand der Banneransicht auf den oberen Rand des Bottom Layout Guide und die centerX-Einschränkung auf die centerX der Superview fest.

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

Swift

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

Objective-C

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

Anzeige laden

Sobald das GAMBannerView-Element vorhanden und seine Attribute wie adUnitID konfiguriert sind, kann eine Anzeige geladen werden. Dazu wird loadRequest: für ein GAMRequest-Objekt aufgerufen:

Swift

bannerView.load(AdManagerRequest())
ViewController.swift

SwiftUI

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

Objective-C

[self.bannerView loadRequest:[GAMRequest request]];
ViewController.m

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

Tipp:Sie können mit Aufrufen für die Anzahl der Anzeigen einen Cache mit vorab geladenen Anzeigen erstellen, bevor Sie sie präsentieren möchten. So können Anzeigen bei Bedarf ohne Latenz ausgeliefert werden. Da Anzeigen nach einer Stunde ablaufen, sollten Sie diesen Cache leeren und jede Stunde neue Anzeigen laden.

Anzeige aktualisieren

Wenn Sie Ihren Anzeigenblock für die Aktualisierung konfiguriert haben, müssen Sie keine weitere Anzeige anfordern, wenn die Anzeige nicht geladen wird. Das Google Mobile Ads SDK berücksichtigt alle Aktualisierungsraten, die Sie in der Ad Manager-Benutzeroberfläche angegeben haben. Wenn Sie die Aktualisierung nicht aktiviert haben, stellen Sie eine neue Anfrage. Weitere Informationen zur Aktualisierung von Anzeigenblöcken, z. B. zum Festlegen einer Aktualisierungsrate, finden Sie unter Aktualisierungsrate der Anzeigen in mobilen Apps.

Hinweis: Wenn Sie eine Aktualisierungsrate in der Ad Manager-Benutzeroberfläche festlegen, erfolgt die automatische Aktualisierung nur, wenn das Banner auf dem Bildschirm sichtbar ist.

Anzeigenereignisse

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

Für Banner-Events registrieren

Wenn Sie sich für Banneranzeigenereignisse registrieren möchten, legen Sie die delegate-Property für GAMBannerView auf ein Objekt fest, das das GADBannerViewDelegate-Protokoll implementiert. In der Regel fungiert die Klasse, die Banneranzeigen implementiert, auch als Delegate-Klasse. In diesem Fall kann die delegate-Property auf self festgelegt werden.

Swift

bannerView.delegate = self
ViewController.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

self.bannerView.delegate = self;
ViewController.m

Bannerereignisse implementieren

Jede der Methoden in GADBannerViewDelegate ist als optional gekennzeichnet. Sie müssen also nur die Methoden implementieren, die Sie benötigen. In diesem Beispiel wird jede Methode implementiert und eine Nachricht in der Konsole protokolliert:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print(#function)
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print(#function + ": " + error.localizedDescription)
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

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");
}
ViewController.m

Ein Beispiel für die Implementierung von Banner-Delegatmethoden finden Sie in der iOS API Demo-App im Beispiel für den Anzeigen-Delegaten.

Swift Objective-C

Anwendungsfälle

Hier einige Anwendungsbeispiele für diese Methoden für Anzeigenereignisse.

Nach Erhalt einer Anzeige einen Banner in die Ansichtshierarchie einfügen

Möglicherweise möchten Sie das Hinzufügen eines GAMBannerView zur Ansichtshierarchie verzögern, bis eine Anzeige empfangen wurde. Dazu können Sie auf das bannerViewDidReceiveAd:-Ereignis warten:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // 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

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

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  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 enthält Methoden, mit denen Sie über Ereignisse benachrichtigt werden können, z. B. wenn durch einen Klick ein Overlay präsentiert oder geschlossen wird. Wenn Sie nachvollziehen möchten, ob diese Ereignisse auf Anzeigen zurückzuführen sind, registrieren Sie sich für die folgenden GADBannerViewDelegate-Methoden.

Um alle Arten von Overlay-Präsentationen oder externen Browseraufrufen zu erfassen, nicht nur solche, die durch Anzeigenklicks ausgelöst werden, sollte Ihre App auf die entsprechenden Methoden in UIViewController oder UIApplication warten. In der folgenden Tabelle sehen Sie die entsprechenden iOS-Methoden, die gleichzeitig mit GADBannerViewDelegate-Methoden aufgerufen werden:

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

Manuelles Zählen von Impressionen

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

Sie können Impressions-Pings manuell an Ad Manager senden, wenn Sie spezielle Bedingungen dafür haben, wann eine Impression erfasst werden soll. Dazu müssen Sie zuerst ein GAMBannerView für manuelle Impressionen aktivieren, bevor Sie eine Anzeige laden:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Wenn Sie feststellen, dass eine Anzeige erfolgreich zurückgegeben wurde und auf dem Bildschirm zu sehen ist, können Sie manuell eine Impression 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 verwenden, wenn Sie Impressionen zu einem anderen Zeitpunkt erfassen möchten.

App-Ereignisse

Über App-Ereignisse können Sie Anzeigen erstellen, die Nachrichten an ihren App-Code senden können. Die App kann dann auf Grundlage dieser Nachrichten Aktionen ausführen.

Mit GADAppEventDelegate können Sie auf Ad Manager-spezifische App-Ereignisse warten. Diese Ereignisse können jederzeit während des Lebenszyklus der Anzeige auftreten, auch bevor die 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: AdManagerBannerView,
    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 Ansichtscontroller implementiert werden:

Swift

import GoogleMobileAds

class ViewController: UIViewController, AppEventDelegate {}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

Denken Sie daran, den Delegaten mit der appEventDelegate-Property festzulegen, bevor Sie eine Anzeige anfordern.

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

Hier sehen Sie ein Beispiel dafür, wie Sie die Hintergrundfarbe Ihrer App ändern können, indem Sie die Farbe über ein App-Ereignis angeben:

Swift

func bannerView(_ banner: AdManagerBannerView, 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];
    }
  }
}

Hier ist das entsprechende Creative, das App-Ereignismeldungen für die Farbe 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>

Ein Beispiel für die Implementierung von App-Ereignissen in der iOS API Demo App finden Sie unter „Ad Manager App Events“.

Swift Objective-C

Zusätzliche Ressourcen

Beispiele auf GitHub

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

• Demo für erweiterte Funktionen: Swift | Objective-C

Nächste Schritte

Minimierbare Banner

Minimierbare Banneranzeigen werden zuerst als größeres Overlay mit einer Schaltfläche zum Minimieren der Anzeige auf eine kleinere Größe präsentiert. Sie können damit Ihre Leistung weiter optimieren. Weitere Informationen

Adaptive Inline-Banner

Adaptive Inline-Banner sind größer und höher als verankerte adaptive Banner. Sie haben eine variable Höhe und können so hoch wie der Gerätebildschirm sein. Adaptive Inline-Banner werden für Apps, in denen Banneranzeigen in scrollbaren Inhalten platziert werden, gegenüber adaptiven Ankerbannern empfohlen. Weitere Informationen finden Sie unter Inline-adaptive Banner.

Weitere Themen ansehen

• Datenschutz für Nutzer