Native Designs

Mit Einstellungen für native Designs können Sie festlegen, dass Google Ad Manager Ihre nativen Anzeigen basierend auf nativen Designs rendert, die Sie im Produkt angeben. Geben Sie zuerst Größe und Ausrichtung an. Fügen Sie dann HTML, CSS und JavaScript hinzu, um responsive Anzeigen zu definieren, die auf allen Bildschirmen optimal dargestellt werden. Sie müssen sich nicht um das Rendern kümmern. Ad Manager wendet automatisch das richtige native Design für das Ziel an. Native Designs werden wie Banneranzeigen mit einem GAMBannerView implementiert. Sie können mit einer festen Anzeigengröße, die im Voraus festgelegt wird, oder mit einer flexiblen Anzeigengröße verwendet werden, die zur Laufzeit festgelegt wird.

Vorbereitung

• Google Mobile Ads SDK: Version 7.14.0 oder höher

In diesem Leitfaden werden Grundkenntnisse des Google Mobile Ads SDK vorausgesetzt. Wenn Sie dies noch nicht getan haben, sollten Sie sich unseren Leitfaden für die ersten Schritte ansehen.

Feste Größe

Mit nativen Designs mit einer festen Größe können Sie die Breite und Höhe der nativen Anzeige steuern. So legen Sie eine feste Größe fest:

1. Erstellen Sie in der Ad Manager-Benutzeroberfläche eine Werbebuchung und wählen Sie im Drop-down-Menü des Felds Size eine der vordefinierten Größen aus.

2. Legen Sie in Interface Builder die Breite und Höhe des GAMBannerView so fest, dass sie der vordefinierten Größe entsprechen, die Sie in Schritt 1 ausgewählt haben. Eine Liste der Größen und der entsprechenden GADAdSize-Konstanten finden Sie im Abschnitt Bannergröße.

Die Implementierung nativer Designs mit einer festen Größe ist so einfach wie das Befolgen der Anleitung unter Ihre erste Banneranfrage. Sie erhalten jedoch die Flexibilität und Kontrolle über HTML, CSS und JavaScript, um Ihrer Banneranzeige ein natives Erscheinungsbild zu verleihen, das sich natürlich in Ihre App einfügt.

Flexible Größe

In einigen Fällen ist eine feste Größe nicht sinnvoll. Beispielsweise soll die Breite der Anzeige mit dem Inhalt Ihrer App übereinstimmen, die Höhe soll jedoch dynamisch an den Inhalt der Anzeige angepasst werden. Um diesen Fall zu berücksichtigen, können Sie in der Ad Manager-Benutzeroberfläche Fluid als Anzeigengröße angeben. Dadurch wird festgelegt, dass die Größe der Anzeige zur Laufzeit in der App bestimmt wird. Das SDK bietet eine spezielle GADAdSize-Konstante, kGADAdSizeFluid, um diesen Fall zu berücksichtigen. Die Höhe der responsiven Anzeigengröße wird dynamisch auf Grundlage der vom Publisher definierten Breite bestimmt. So kann das GAMBannerView seine Höhe an die des Creatives anpassen.

Flüssigkeitsanfrage

Im Gegensatz zu anderen Anzeigenformaten hat die Anzeigengröße kGADAdSizeFluid keine vordefinierte Breite. Sie müssen die Rahmenbreite des Banners also explizit in Ihrem Code oder in Interface Builder festlegen. Wenn keine Breite angegeben ist, legt das SDK die Höhe des Banners standardmäßig auf die volle Breite des Geräts fest.

Wenn Sie eine Anfrage mit mehreren Größen stellen, die kGADAdSizeFluid enthält, wird die zurückgegebene Anzeige immer in einem flexiblen Container platziert und verhält sich wie eine flexible Anzeige. Wenn in diesem responsiven Container ein nicht responsives Creative zurückgegeben wird, zentriert das SDK die Anzeige im Container. So müssen Sie die Breitenbeschränkung nicht jedes Mal ändern, wenn eine neue Anzeige zurückgegeben wird.

Die Implementierung für eine flexible Anfrage mit einer einzelnen Größe und einer flexiblen Anfrage mit mehreren Größen ist sehr ähnlich. Der einzige Unterschied besteht darin, dass Sie bei einer Anfrage mit mehreren Größen die validAdSizes-Eigenschaft festlegen, um die Anzeigengrößen anzugeben, die für die Anzeigenanfrage gültig sind:

bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

So sieht die vollständige Implementierung im Code aus:

var bannerView: AdManagerBannerView!

override func viewDidLoad() {
super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = AdManagerBannerView(adSize: AdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(AdManagerRequest())
}

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

Ein Beispiel für die Implementierung der flexiblen Anzeigengröße in Ad Manager finden Sie in der iOS API Demo-App in Swift oder Objective-C.

API-Demo herunterladen

GADAdSizeDelegate-Protokoll

Möglicherweise möchten Sie die Höhe eines Banners vor der Änderung der Anzeigengröße wissen. Der adView:willChangeAdSizeTo:-Callback benachrichtigt seinen Delegaten, bevor sich die Banneransicht in die neue GADAdSize ändert. Damit Sie benachrichtigt werden, bevor sich die Banneransicht an die neue Anzeigengröße anpasst, muss Ihre Klasse dem GADAdSizeDelegate-Protokoll entsprechen.

Hier ist ein Beispiel für die Implementierung des adView:willChangeAdSizeTo:-Callbacks, das zeigt, wie die neue Breite und Höhe des Banners abgerufen werden:

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: BannerView, willChangeAdSizeTo adSize: AdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}