Native Designs

Plattform auswählen:Android iOS Flutter

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 AdManagerAdView 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 Flutter-Plug-in: Version 0.13.6 oder höher

In diesem Leitfaden wird davon ausgegangen, dass Sie mit dem Google Mobile Ads SDK vertraut sind. 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. Laden Sie ein AdManagerBannerAd mit derselben Größe wie in Schritt 1 hoch. Informationen zum Instanziieren und Laden einer Anzeige finden Sie in der Dokumentation zu Banneranzeigen. Eine Liste der Größen und der entsprechenden AdSize-Konstanten finden Sie im Abschnitt Bannergröße.

Hier sehen Sie ein Beispiel dafür, wie Sie eine feste Größe wie die Anzeigengröße MEDIUM_RECTANGLE (300 × 250) angeben:

AdManagerBannerAd ad = AdManagerBannerAd(
  adUnitId: '<your-ad-unit>',
  sizes: <AdSize>[AdSize.mediumRectangle],
  request: AdManagerAdRequest(),
);

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 die spezielle AdSize-Konstante FLUID, um diesen Fall zu berücksichtigen. Die Höhe der responsiven Anzeigengröße wird dynamisch anhand der vom Publisher definierten Breite bestimmt. So kann die Anzeigenansicht der Plattform ihre Höhe an die des Creatives anpassen.

Flüssigkeitsanfrage

Verwenden Sie FluidAdManagerBannerAd, um eine flexible Anzeige anzufordern:

final fluidAd = FluidAdManagerBannerAd(
  adUnitId: '<your-ad-unit>',
  request: AdManagerAdRequest(),
  listener: AdManagerBannerAdListener(
    onAdLoaded: (Ad ad) {
      print('$_fluidAd loaded.');
    },
    onAdFailedToLoad: (Ad ad, LoadAdError error) {
      print('$_fluidAd failedToLoad: $error');
      ad.dispose();
    },
  ),

Auslieferung der flüssigen Anzeige

Nachdem die Anzeige geladen wurde, können Sie mit FluidAdWidget responsive Anzeigen präsentieren. Die Höhe wird an die zugrunde liegende Anzeigenansicht der Plattform angepasst:

FluidAdWidget(
  width: <your-width>,
  ad: fluidAd,
);

Eine Beispielimplementierung der responsiven Anzeigengröße in Ad Manager finden Sie in der Beispiel-App auf GitHub.