Diese Seite wurde von der Cloud Translation API übersetzt.

Native Einrichtungen in Android und iOS

Die nativen Anzeigen werden Nutzern mithilfe von UI-Komponenten präsentiert, die eine Plattform wie z. B. eine View unter Android oder UIView auf iOS

In diesem Leitfaden erfahren Sie, wie Sie native Anzeigen plattformspezifischen Code.

Vorbereitung

Führen Sie die Schritte im Startleitfaden aus.
Machen Sie sich mit den Optionen für native Anzeigen vertraut.

Verwenden Sie immer Testanzeigen

Verwenden Sie beim Entwickeln und Testen Ihrer Apps nur Testanzeigen, Live-Produktionsanzeigen. Die einfachste Methode zum Laden von Testanzeigen ist die Verwendung Test-Anzeigenblock-ID für native Anzeigen:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

Die Testanzeigenblöcke sind so konfiguriert, dass bei jeder Anfrage Testanzeigen zurückgegeben werden. können Sie sie beim Programmieren, Testen und ersetzen Sie diese durch Ihre Anzeigenblock-IDs, die Veröffentlichung Ihrer App.

Plattformspezifische Einrichtungen

Zum Erstellen nativer Anzeigen müssen Sie plattformspezifischen Code für iOS und Android schreiben und dann Ihre Dart-Implementierung ändern, um die von Ihnen vorgenommenen Änderungen am Native-Code zu nutzen.

Android

Plug-in importieren

Für die Android-Implementierung des Google Mobile Ads-Plug-ins ist eine Klasse erforderlich. Implementierung der NativeAdFactory der API erstellen. Wenn Sie diese API in Ihrem Android-Projekt referenzieren möchten, fügen Sie der Datei „settings.gradle“ die folgenden Zeilen hinzu:

def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
    pluginsFile.withInputStream { stream -> plugins.load(stream) }
}

plugins.each { name, path ->
    def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
    include ":$name"
    project(":$name").projectDir = pluginDirectory
}

NativeAdFactory implementieren

Erstellen Sie als Nächstes eine Klasse, die NativeAdFactory implementiert und die Methode createNativeAd() überschreibt.

package io.flutter.plugins.googlemobileadsexample;

import android.graphics.Color;
import android.view.LayoutInflater;
import android.widget.TextView;
import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

/**
 * my_native_ad.xml can be found at
 * github.com/googleads/googleads-mobile-flutter/blob/main/packages/google_mobile_ads/
 *     example/android/app/src/main/res/layout/my_native_ad.xml
 */
class NativeAdFactoryExample implements NativeAdFactory {
  private final LayoutInflater layoutInflater;

  NativeAdFactoryExample(LayoutInflater layoutInflater) {
    this.layoutInflater = layoutInflater;
  }

  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map&lt;String, Object> customOptions) {
    final NativeAdView adView =
        (NativeAdView) layoutInflater.inflate(R.layout.my_native_ad, null);

    // Set the media view.
    adView.setMediaView((MediaView) adView.findViewById(R.id.ad_media));

    // Set other ad assets.
    adView.setHeadlineView(adView.findViewById(R.id.ad_headline));
    adView.setBodyView(adView.findViewById(R.id.ad_body));
    adView.setCallToActionView(adView.findViewById(R.id.ad_call_to_action));
    adView.setIconView(adView.findViewById(R.id.ad_app_icon));
    adView.setPriceView(adView.findViewById(R.id.ad_price));
    adView.setStarRatingView(adView.findViewById(R.id.ad_stars));
    adView.setStoreView(adView.findViewById(R.id.ad_store));
    adView.setAdvertiserView(adView.findViewById(R.id.ad_advertiser));

    // The headline and mediaContent are guaranteed to be in every NativeAd.
    ((TextView) adView.getHeadlineView()).setText(nativeAd.getHeadline());
    adView.getMediaView().setMediaContent(nativeAd.getMediaContent());

    // These assets aren't guaranteed to be in every NativeAd, so it's important to
    // check before trying to display them.
    if (nativeAd.getBody() == null) {
      adView.getBodyView().setVisibility(View.INVISIBLE);
    } else {
      adView.getBodyView().setVisibility(View.VISIBLE);
      ((TextView) adView.getBodyView()).setText(nativeAd.getBody());
    }

    if (nativeAd.getCallToAction() == null) {
      adView.getCallToActionView().setVisibility(View.INVISIBLE);
    } else {
      adView.getCallToActionView().setVisibility(View.VISIBLE);
      ((Button) adView.getCallToActionView()).setText(nativeAd.getCallToAction());
    }

    if (nativeAd.getIcon() == null) {
      adView.getIconView().setVisibility(View.GONE);
    } else {
      ((ImageView) adView.getIconView()).setImageDrawable(nativeAd.getIcon().getDrawable());
      adView.getIconView().setVisibility(View.VISIBLE);
    }

    if (nativeAd.getPrice() == null) {
      adView.getPriceView().setVisibility(View.INVISIBLE);
    } else {
      adView.getPriceView().setVisibility(View.VISIBLE);
      ((TextView) adView.getPriceView()).setText(nativeAd.getPrice());
    }

    if (nativeAd.getStore() == null) {
      adView.getStoreView().setVisibility(View.INVISIBLE);
    } else {
      adView.getStoreView().setVisibility(View.VISIBLE);
      ((TextView) adView.getStoreView()).setText(nativeAd.getStore());
    }

    if (nativeAd.getStarRating() == null) {
      adView.getStarRatingView().setVisibility(View.INVISIBLE);
    } else {
      ((RatingBar) adView.getStarRatingView()).setRating(nativeAd.getStarRating()
          .floatValue());
      adView.getStarRatingView().setVisibility(View.VISIBLE);
    }

    if (nativeAd.getAdvertiser() == null) {
      adView.getAdvertiserView().setVisibility(View.INVISIBLE);
    } else {
      adView.getAdvertiserView().setVisibility(View.VISIBLE);
      ((TextView) adView.getAdvertiserView()).setText(nativeAd.getAdvertiser());
    }

    // This method tells the Google Mobile Ads SDK that you have finished populating your
    // native ad view with this native ad.
    adView.setNativeAd(nativeAd);

    return adView;
  }
}

Ein Beispiel für die Konfiguration des NativeAdView-Layouts finden Sie in my_native_ad.xml.

NativeAdFactory registrieren

Jede NativeAdFactory-Implementierung muss bei einer factoryId, eine eindeutige String-Kennung, beim Aufruf von MainActivity.configureFlutterEngine(FlutterEngine). factoryId ist die später beim Instanziieren einer nativen Anzeige aus Dart-Code verwendet werden.

Für jede eindeutige native Anzeige kann ein NativeAdFactory implementiert und registriert werden. Anzeigenlayout für Ihre App oder ein einzelnes Layout kann alle Layouts unterstützen.

Beachten Sie beim Erstellen mit add-to-app, die NativeAdFactory sollte auch abgemeldet sein in cleanUpFlutterEngine(engine).

Nachdem du NativeAdFactoryExample erstellt hast, richte MainActivity ein als folgt:

package my.app.path;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(FlutterEngine flutterEngine) {
    flutterEngine.getPlugins().add(new GoogleMobileAdsPlugin());
    super.configureFlutterEngine(flutterEngine);

    GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine,
        "adFactoryExample", NativeAdFactoryExample());
  }

  @Override
  public void cleanUpFlutterEngine(FlutterEngine flutterEngine) {
    GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "adFactoryExample");
  }
}

iOS

NativeAdFactory implementieren

Für die iOS-Implementierung des Google Mobile Ads-Plug-ins ist eine Klasse erforderlich. Implementierung der FLTNativeAdFactory der API erstellen. Erstellen Sie eine Klasse, die NativeAdFactory implementiert, und implementieren Sie die createNativeAd()-Methode.

#import "FLTGoogleMobileAdsPlugin.h"

/**
 * The example NativeAdView.xib can be found at
 * github.com/googleads/googleads-mobile-flutter/blob/main/packages/google_mobile_ads/
 *     example/ios/Runner/NativeAdView.xib
 */
@interface NativeAdFactoryExample : NSObject &lt;FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                      customOptions:(NSDictionary *)customOptions {
  // Create and place the ad in the view hierarchy.
  GADNativeAdView *adView =
      [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)adView.headlineView).text = nativeAd.headline;

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)adView.bodyView).text = nativeAd.body;
  adView.bodyView.hidden = nativeAd.body ? NO : YES;

  [((UIButton *)adView.callToActionView) setTitle:nativeAd.callToAction
                                         forState:UIControlStateNormal];
  adView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

  ((UIImageView *)adView.iconView).image = nativeAd.icon.image;
  adView.iconView.hidden = nativeAd.icon ? NO : YES;

  ((UILabel *)adView.storeView).text = nativeAd.store;
  adView.storeView.hidden = nativeAd.store ? NO : YES;

  ((UILabel *)adView.priceView).text = nativeAd.price;
  adView.priceView.hidden = nativeAd.price ? NO : YES;

  ((UILabel *)adView.advertiserView).text = nativeAd.advertiser;
  adView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  adView.callToActionView.userInteractionEnabled = NO;

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  // Note: this should always be done after populating the ad views.
  adView.nativeAd = nativeAd;

  return adView;
}
@end

Ein Beispiel für die Konfiguration des GADNativeAdView-Layouts finden Sie unter NativeAdView.xib.

NativeAdFactory registrieren

Jeder FLTNativeAdFactory muss in registerNativeAdFactory:factoryId:nativeAdFactory: mit einem factoryId, einer eindeutigen String-Kennzeichnung, registriert sein. factoryId wird später beim Instanziieren einer nativen Anzeige verwendet aus dem Dart-Code.

Eine FLTNativeAdFactory kann für jede eindeutige natives Anzeigenlayout, das in Ihrer App verwendet wird, oder ein einzelnes Layout kann alle Layouts unterstützen.

Nachdem Sie FLTNativeAdFactory erstellt haben, richten Sie AppDelegate so ein:

#import "FLTGoogleMobileAdsPlugin.h"
#import "NativeAdFactoryExample.h"

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
      didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  // Must be added after GeneratedPluginRegistrant registerWithRegistry:self];
  // is called.
  NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                          factoryId:@"adFactoryExample"
                                    nativeAdFactory:nativeAdFactory];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Anzeige laden

Nachdem Sie Ihren plattformspezifischen Code hinzugefügt haben, wechseln Sie zu Dart, um Anzeigen zu laden. Achten Sie darauf, dass factoryID mit der ID übereinstimmt, die Sie zuvor registriert haben.

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

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        // Factory ID registered by your native ad factory implementation.
        factoryId: 'adFactoryExample',
        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();
          },
        ),
        request: const AdRequest(),
        // Optional: Pass custom options to your native ad factory implementation.
        customOptions: {'custom-option-1', 'custom-value-1'}
    );
    _nativeAd.load();
  }
}

Ereignisse für native Anzeigen

Wenn Sie über Ereignisse informiert werden möchten, die sich auf die Interaktionen mit nativen Anzeigen beziehen, verwenden Sie das Attribut listener der Anzeige. Implementieren Sie dann NativeAdListener um Rückrufe 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 String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        // Factory ID registered by your native ad factory implementation.
        factoryId: 'adFactoryExample',
        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 AdRequest(),
        // Optional: Pass custom options to your native ad factory implementation.
        customOptions: {'custom-option-1', 'custom-value-1'}
    );
    _nativeAd.load();
        
  }
}

Displayanzeige

Zum Anzeigen eines NativeAd als Widget müssen Sie eine Instanz von AdWidget mit einer unterstützten Anzeige nach dem Aufruf von load(). Sie können das Widget vor dem load() wird aufgerufen, aber load() muss aufgerufen werden, bevor es dem Widget hinzugefügt werden kann Baum.

AdWidget erbt von der Flutter-Klasse Widget und kann wie jedes andere Widget verwendet werden. Unter iOS müssen Sie das Widget in einem Container mit einer angegebenen Breite und Höhe festlegen. Andernfalls wird Ihre Anzeige möglicherweise nicht geschaltet.

final Container adContainer = Container(
  alignment: Alignment.center,
  child: AdWidget adWidget = AdWidget(ad: _nativeAd!),
  width: WIDTH,
  height: HEIGHT,
);

Anzeige entfernen

A NativeAd müssen entsorgt werden, wenn der Zugriff darauf nicht mehr benötigt wird. Die Best Practice für wann dispose() nach der AdWidget aufgerufen wird, die der nativen Anzeige zugeordnet ist wird aus der Widget-Baumstruktur und in der AdListener.onAdFailedToLoad() entfernt Callback des Nutzers an.

Nächste Schritte

Weitere Informationen zu nativen Anzeigen finden Sie in unserer Anleitung zu nativen Anzeigen Playbook.
Weitere Informationen finden Sie in den Richtlinien für native Anzeigen.
Kunden-Erfolgsgeschichten ansehen: Fallstudie 1 Fallstudie 2.

Vollständiges Beispiel auf GitHub

Native Plattform