Mit Ihrem Feedback können Sie die Google Mobile Ads SDK-Roadmap mitgestalten. Nehmen Sie an der jährlichen Umfrage zum Google Mobile Ads SDK für 2023 teil, die bis zum 5. Mai 2023 endet.

Nativ

Native Anzeigen sind Anzeigenassets, die den Nutzern über native UI-Komponenten präsentiert werden. Sie werden unter Verwendung der gleichen Ansichtsarten dargestellt, mit denen Sie bereits Ihre Layouts erstellen, und können an das visuelle Design der Umgebung angepasst werden, in der sie leben. In Bezug auf die Programmierung bedeutet das, dass Ihre App beim Laden einer nativen Anzeige ein NativeAd-Objekt erhält, das ihre Assets enthält. Die App und nicht das Google Mobile Ads SDK ist dann für die Auslieferung verantwortlich.

Ganz allgemein lässt sich sagen, dass die Implementierung von nativen Anzeigen aus zwei Teilen besteht: dem Laden einer Anzeige über das SDK und dem Ausliefern von Anzeigeninhalten in dieser App. In diesem Leitfaden wird beschrieben, wie Sie native Anzeigen mit dem SDK laden können.

Plattformeinrichtung

Native Anzeigen werden Nutzern über UI-Komponenten präsentiert, die nativ auf der Plattform sind, z. B. View (Android) oder UIView (iOS).

Da bei nativen Anzeigen für eine Plattform native UI-Komponenten erforderlich sind, ist für Android und iOS eine zusätzliche Einrichtung erforderlich:

Android

Die Android-Implementierung des Google Mobile Ads-Plug-ins erfordert eine Klasse, mit der ein NativeAdFactory implementiert wird. Wenn Sie von Ihrem Android-Projekt auf diese API verweisen möchten, fügen Sie Ihrem 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
}

Ein NativeAdFactory enthält eine Methode, die ein NativeAd und benutzerdefinierte Optionen annimmt und ein NativeAdView zurückgibt. Das NativeAdView wird in Ihrer App angezeigt.

Sie können dies in Ihrer MainActivity.java implementieren oder eine separate Klasse im selben Verzeichnis wie MainActivity.java erstellen:

package my.app.path;

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;

class NativeAdFactoryExample implements NativeAdFactory {
  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    // Create NativeAdView
  }
}

Jeder NativeAdFactory muss mit einer factoryId-eindeutigen String-ID in MainActivity.configureFlutterEngine(FlutterEngine) registriert sein. Ein NativeAdFactory kann für jedes native Anzeigenlayout implementiert und registriert werden, das von deiner App verwendet wird, oder ein einzelnes kann alle Layouts verarbeiten.

NativeAdFactory sollte auch in cleanUpFlutterEngine(engine) nicht registriert sein, wenn Sie Builds mit Add-to-App erstellen.

MainActivity.java sollte in etwa so aussehen:

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");
  }
}

Beim Erstellen von NativeAd in Dart muss die factoryId mit der übereinstimmen, die zum Hinzufügen der Factory zu GoogleMobileAdsPlugin verwendet wurde. Im obigen Code-Snippet ist adFactoryExample der Name von factoryId. Hier ein Beispiel für NativeAdFactory:

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/tree/master/packages/google_mobile_ads/example/android/app/src/main/res/layout
 */
class NativeAdFactoryExample implements NativeAdFactory {
  private final LayoutInflater layoutInflater;

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

  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    final NativeAdView adView =
        (NativeAdView) layoutInflater.inflate(R.layout.my_native_ad, null);
    final TextView headlineView = adView.findViewById(R.id.ad_headline);
    final TextView bodyView = adView.findViewById(R.id.ad_body);

    headlineView.setText(nativeAd.getHeadline());
    bodyView.setText(nativeAd.getBody());

    adView.setBackgroundColor(Color.YELLOW);

    adView.setNativeAd(nativeAd);
    adView.setBodyView(bodyView);
    adView.setHeadlineView(headlineView);
    return adView;
  }
}

iOS

Für die iOS-Implementierung des Google Mobile Ads-Plug-ins ist eine Klasse erforderlich, in der ein FLTNativeAdFactory implementiert ist. FLTNativeAdFactory enthält eine Methode, die eine GADNativeAd und benutzerdefinierte Optionen annimmt und eine GADNativeAdView zurückgibt. GADNativeAdView wird in der App angezeigt.

Das FLTNativeAdFactory-Protokoll kann von AppDelegate implementiert werden oder es kann eine separate Klasse erstellt werden:

/* AppDelegate.m */
#import "FLTGoogleMobileAdsPlugin.h"
@interface NativeAdFactoryExample : NSObject<FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create GADNativeAdView
}
@end

Jeder FLTNativeAdFactory muss mit einer factoryId (einer eindeutigen String-ID) in registerNativeAdFactory:factoryId:nativeAdFactory: registriert sein.

Für jedes eindeutige native Anzeigenlayout, das von deiner App verwendet wird, kann ein FLTNativeAdFactory implementiert und registriert werden. Ein einzelnes Layout kann alle Layouts verarbeiten. Dazu wird FLTGoogleMobileAdsPlugin.h importiert und registerNativeAdFactory:factoryId:nativeAdFactory: mit einer FlutterPluginRegistry (eine eindeutige Kennung für die Factory) und der Factory selbst aufgerufen. Die Factory muss auch hinzugefügt werden, nachdem GeneratedPluginRegistrant registerWithRegistry:self]; aufgerufen wurde.

Wenn die Aktion in AppDelegate.m ausgeführt wird, sollte sie ungefähr so aussehen:

#import "FLTGoogleMobileAdsPlugin.h"

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

  NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                          factoryId:@"adFactoryExample"
                                    nativeAdFactory:nativeAdFactory];

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

Beim Erstellen von NativeAd in Dart muss die factoryID mit der übereinstimmen, die zum Hinzufügen der Factory zu FLTGoogleMobileAdsPlugin verwendet wurde. Im obigen Code-Snippet ist adFactoryExample der Name von factoryID. Hier ein Beispiel für FLTNativeAdFactory:

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

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

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  adView.nativeAd = nativeAd;

  // 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;

  return adView;
}
@end

Immer mit Testanzeigen testen

Verwenden Sie beim Erstellen und Testen Ihrer Apps Testanzeigen statt Live-Produktionsanzeigen. Andernfalls kann Ihr Konto gesperrt werden.

Am einfachsten laden Sie die Testanzeigen über unsere spezielle Testanzeigen-ID für native Anzeigen:

Die Testanzeigenblöcke sind so konfiguriert, dass für jede Anfrage Testanzeigen zurückgegeben werden. Sie können sie dann beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Ersetzen Sie sie vor dem Veröffentlichen Ihrer App einfach durch Ihre eigenen Anzeigenblock-IDs.

Anzeige instanziieren

Für NativeAd sind adUnitId, factoryId, AdRequest und NativeAdListener erforderlich.Im folgenden Beispiel wird eine native Anzeige instanziiert:

final NativeAd myNative = NativeAd(
  adUnitId: '<ad unit id>',
  factoryId: 'adFactoryExample',
  request: AdRequest(),
  listener: NativeAdListener(),
);

Werks-ID

factoryId muss mit der übereinstimmen, die zum Hinzufügen der Factory zu GoogleMobileAdsPlugin (Android) und/oder FLTGoogleMobileAdsPlugin (iOS) verwendet wurde. Derselbe factoryId kann von beiden Plattformen verwendet werden oder jeder kann einen eigenen haben.

Ereignisse für native Anzeigen

Mit NativeAdListener können Sie Lebenszyklusereignisse erfassen, z. B. wenn eine Anzeige geladen wird. Im folgenden Beispiel wird jede Methode implementiert und es wird eine Nachricht in der Konsole protokolliert:

final NativeAdListener listener = NativeAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
 // Called when a click is recorded for a NativeAd.
 onNativeAdClicked: (NativeAd ad) => print('Ad clicked.'),
);

Anzeige laden

Nachdem eine NativeAd instanziiert wurde, muss load() aufgerufen werden, bevor sie auf dem Bildschirm angezeigt werden kann.

myNative.load();

Displayanzeige

Wenn NativeAd als Widget angezeigt werden soll, müssen Sie nach dem Aufrufen von load() eine AdWidget mit einer unterstützten Anzeige instanziieren. Du kannst das Widget vor dem Aufruf von load() erstellen, aber load() muss aufgerufen werden, bevor du es dem Widget-Baum hinzufügst.

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget übernimmt die Klasse Widget von Flutter und kann wie jedes andere Widget verwendet werden. Auf iOS-Geräten muss das Widget in einem Container mit einer bestimmten Breite und Höhe platziert werden. Andernfalls wird Ihre Anzeige möglicherweise nicht ausgeliefert.

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: 500,
  height: 500,
);

Sobald eine Anzeige load() aufgerufen hat, muss sie dispose() aufrufen, wenn der Zugriff darauf nicht mehr erforderlich ist. Die Best Practice für den Aufruf von dispose() ist entweder nach dem Entfernen von AdWidget aus dem Widget-Baum oder im AdListener.onAdFailedToLoad-Callback.

Fertig! In Ihrer App können jetzt native Anzeigen ausgeliefert werden.

Weitere Informationen