Native Designs

Plattform auswählen: Android iOS Flutter

Mit den Einstellungen für native Designs kann Google Ad Manager das Rendern Ihrer nativen Anzeigen basierend auf den nativen Designs verarbeiten, die Sie im Produkt angeben. Legen Sie zuerst Größe und Ausrichtung fest. Fügen Sie dann HTML, CSS und JavaScript hinzu, um responsive Anzeigen zu definieren, die auf allen Bildschirmen eine gute Qualität bieten. Sie müssen nichts weiter tun – Ad Manager wendet automatisch den richtigen nativen Stil für das Ziel an. Native Designs werden genau wie Banneranzeigen mithilfe einer AdManagerAdView implementiert. Sie können mit einer vorab festgelegten festen Anzeigengröße oder einer zur Laufzeit festgelegten flexiblen Anzeigengröße verwendet werden.

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 noch nicht dazu gekommen sind, lesen Sie unseren Leitfaden für den Einstieg.

Feste Größe

Mit nativen Designs mit fester 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 eine Werbebuchung in der Ad Manager-Benutzeroberfläche und wählen Sie im Drop-down-Menü des Felds Size eine der vordefinierten Größen aus.

2. Laden Sie eine AdManagerBannerAd mit der Größe hoch, die Sie in Schritt 1 festgelegt haben. Informationen zum Instanziieren und Laden einer Anzeige finden Sie in der Dokumentation zu Banneranzeigen. Im Bereich Bannergröße finden Sie eine Liste der Größen und die entsprechenden AdSize-Konstanten.

Hier ein Beispiel für die Angabe einer festen Größe, z. B. MEDIUM_RECTANGLE (300 × 250):

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 möglicherweise nicht sinnvoll. Beispielsweise kann die Breite der Anzeige mit den Inhalten Ihrer App übereinstimmen, die Höhe muss sich aber dynamisch an die Inhalte der Anzeige anpassen. In diesem Fall können Sie Fluid als Anzeigengröße in der Ad Manager-Benutzeroberfläche angeben. Das bedeutet, dass die Größe der Anzeige zur Laufzeit in der App bestimmt wird. Das SDK bietet eine spezielle AdSize-Konstante, FLUID, für diesen Fall. Die Höhe der fluiden Anzeigengröße wird dynamisch anhand der vom Publisher festgelegten Breite bestimmt. So kann die Anzeigenansicht der Plattform ihre Höhe an die des Creatives anpassen.

Fluide Anfrage

So fordern Sie eine flexible Anzeige mit FluidAdManagerBannerAd an:

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();
    },
  ),

Darstellung der responsiven Anzeige

Nachdem Ihre Anzeige geladen wurde, können Sie mit der Taste FluidAdWidget responsive Anzeigen anzeigen. Die Höhe wird an die Anzeigenansicht der zugrunde liegenden Plattform angepasst:

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

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