Anzeigenlayouts mit nativen Vorlagen gestalten

Plattform auswählen: Android iOS Flutter

Native Vorlagen sind Code-vollständige Ansichten für Ihre nativen Anzeigen, die für eine schnelle Implementierung und einfache Änderung entwickelt wurden. Mit nativen Vorlagen stellt das Plug-in vorgefertigte Android- und iOS-Layouts zur Verfügung. Sie können den Stil der nativen Assets mit einer Dart API anpassen.

In diesem Leitfaden wird gezeigt, wie Sie die Dart API verwenden, um die zugrunde liegenden Plattformansichten zu gestalten und die Anzeige zu rendern.

Vorbereitung

Führen Sie die folgenden Schritte aus, bevor Sie fortfahren:

  • Flutter 2.4.0 oder höher.

Immer mit Testanzeigen testen

Verwenden Sie beim Erstellen und Testen Ihrer Apps Testanzeigen anstelle von aktiven Anzeigen. Testanzeigen lassen sich unter Android am einfachsten mit unserer speziellen Test-Anzeigenblock-ID für native Anzeigen laden:

  • /21775744923/example/native

Die Test-Anzeigenblöcke sind so konfiguriert, dass sie für jede Anfrage Testanzeigen zurückgeben. Sie können sie also in Ihren eigenen Apps verwenden, während Sie programmieren, testen und Fehler beheben. Ersetzen Sie sie jedoch vor der Veröffentlichung Ihrer App durch Ihre eigenen Anzeigenblock-IDs.

Anzeige laden

Im folgenden Beispiel wird eine native Anzeige mit der nativen Vorlage in der Größe medium geladen:

class NativeExampleState extends State<NativeExample> {
  NativeAd? nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/21775744923/example/native';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            debugPrint('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            debugPrint('$NativeAd failed to load: $error');
            ad.dispose();
          },
        ),
        request: const AdManagerAdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

Unter NativeTemplateStyle und NativeTemplateTextStyle finden Sie die verfügbaren Formatierungsoptionen.

Anzeige anpassen

Wenn Sie eine native Anzeige mit nativen Vorlagen anpassen, befindet sich die UI-Konfiguration Ihrer Anzeige in der NativeTemplateStyle Klasse. So können Sie eine gesamte native Anzeige im Dart-Code gestalten.

Vorlagengrößen

Es gibt zwei Arten von Flutter-Vorlagen für native Anzeigen: TemplateType.small und TemplateType.medium. Die kleine Vorlage eignet sich ideal für eine TableView oder GridView, für In-Feed-Anzeigen oder überall dort, wo Sie eine schmale rechteckige Anzeigenaufruf benötigen. Die mittlere Vorlage ist für eine Seitenansicht mit der Hälfte bis drei Vierteln der Seite vorgesehen und eignet sich ideal für Landingpages oder Splash-Screens.

Klein

Android
iOS
Medium

Android
iOS

Ereignisse für native Anzeigen

Wenn Sie über Ereignisse im Zusammenhang mit nativen Anzeigeninteraktionen benachrichtigt werden möchten, verwenden Sie die listener Eigenschaft der Anzeige. Implementieren Sie dann NativeAdListener, um Callbacks für Anzeigenereignisse zu erhalten.

class NativeExampleState extends State<NativeExample> {
  NativeAd? _nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/21775744923/example/native';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            print('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            print('$NativeAd failedToLoad: $error');
            ad.dispose();
          },
          // Called when a click is recorded for a NativeAd.
          onAdClicked: (ad) {},
          // Called when an impression occurs on the ad.
          onAdImpression: (ad) {},
          // Called when an ad removes an overlay that covers the screen.
          onAdClosed: (ad) {},
          // Called when an ad opens an overlay that covers the screen.
          onAdOpened: (ad) {},
          // For iOS only. Called before dismissing a full screen view
          onAdWillDismissScreen: (ad) {},
          // Called when an ad receives revenue value.
          onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
        ),
        request: const AdManagerAdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

Anzeige präsentieren

Wenn Sie eine NativeAd als Widget präsentieren möchten, müssen Sie nach dem Aufruf von load() ein AdWidget mit einer unterstützten Anzeige instanziieren. Sie können das Widget vor dem Aufruf von load() erstellen, aber load() muss aufgerufen werden, bevor Sie es dem Widget-Baum hinzufügen.

AdWidget wird von der Flutter-Klasse Widget abgeleitet und kann wie jedes andere Widget verwendet werden. Platzieren Sie das Widget unter iOS in einem Container mit einer bestimmten Breite und Höhe. Andernfalls wird Ihre Anzeige möglicherweise nicht präsentiert.

// Small template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 90, // minimum recommended height
    maxWidth: 400,
    maxHeight: 200,
  ),
  child: AdWidget(ad: _nativeAd!),
);

// Medium template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 320, // minimum recommended height
    maxWidth: 400,
    maxHeight: 400,
  ),
  child: AdWidget(ad: _nativeAd!),
);

Anzeige verwerfen

Eine NativeAd muss verworfen werden, wenn der Zugriff darauf nicht mehr erforderlich ist. Die Best Practice für den Aufruf von dispose() ist, nachdem das mit der nativen Anzeige verknüpfte AdWidget aus dem Widget-Baum entfernt wurde, und im Callback AdListener.onAdFailedToLoad().