Ta strona została przetłumaczona przez Cloud Translation API.

Konfiguracje natywne na Androida i iOS

Reklamy natywne są prezentowane użytkownikom za pomocą komponentów interfejsu platformę, np. View na urządzeniu z Androidem lub UIView iOS.

Z tego przewodnika dowiesz się, jak wczytywać, wyświetlać i dostosowywać reklamy natywne za pomocą kodu na daną platformę.

Wymagania wstępne

Zapoznaj się z przewodnikiem dla początkujących.
Zapoznaj się z opcjami reklam natywnych.

Zawsze korzystaj z reklam testowych

Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie reklam, aktywne reklamy. Najłatwiejszym sposobem wczytywania reklam testowych jest użycie naszego specjalnego identyfikator testowej jednostki reklamowej dla reklam natywnych:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

Testowe jednostki reklamowe są skonfigurowane tak, aby zwracać reklamy testowe dla każdego żądania, możesz używać ich we własnych aplikacjach podczas kodowania, testowania i debugowania – pamiętaj tylko, aby zastąpić je własnymi identyfikatorami jednostek reklamowych publikowanie aplikacji.

Konfiguracje na poziomie platformy

Aby utworzyć reklamy natywne, musisz napisać kod platformy przeznaczony na iOS i Androidzie, a potem zmodyfikować implementację Dart, aby na wykorzystanie wprowadzonych przez Ciebie zmian w kodzie natywnym.

Android

Importowanie wtyczki

Implementacja wtyczki do reklam mobilnych Google na Androida wymaga klasy implementacji NativeAdFactory API. Aby odwołać się do tego interfejsu API z projektu Androida, dodaj atrybut do pliku settings.gradle:

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
}

Wdróż NativeAdFactory

Następnie utwórz klasę, która implementuje funkcję NativeAdFactory i zastępuje metody createNativeAd().

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

Przykład konfigurowania układu NativeAdView znajdziesz tutaj: my_native_ad.xml.

Rejestrowanie reklamy NativeAdFactory

Każda implementacja NativeAdFactory musi być zarejestrowana w factoryId, unikalny identyfikator String podczas połączenia MainActivity.configureFlutterEngine(FlutterEngine) factoryId będzie używany później podczas tworzenia reklamy natywnej za pomocą kodu Dart.

NativeAdFactory można wdrożyć i zarejestrować dla każdego unikalnego układu reklamy natywnej używanego przez aplikację. Można też użyć jednego elementu do obsługi wszystkich układów.

Pamiętaj, że podczas kompilowania za pomocą funkcji dodawania do aplikacji należy też odrejestrować pakiet NativeAdFactory w pliku cleanUpFlutterEngine(engine).

Po utworzeniu NativeAdFactoryExample skonfiguruj MainActivity jako następujące:

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

Implementacja klasy NativeAdFactory

Implementacja wtyczki reklam mobilnych Google na iOS wymaga klasy implementującej interfejs FLTNativeAdFactoryAPI. Utwórz klasę, która implementuje interfejs NativeAdFactory, i zaimplementuj metodę createNativeAd().

#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

Przykład konfigurowania układu GADNativeAdView znajdziesz tutaj: NativeAdView.xib.

Rejestrowanie reklamy NativeAdFactory

Każdy FLTNativeAdFactory musi być zarejestrowany w factoryId, unikalnym Identyfikator typu String w: registerNativeAdFactory:factoryId:nativeAdFactory:. factoryId zostanie użyte później podczas inicjowania reklamy natywnej. z Dart Code.

FLTNativeAdFactory można zaimplementować i zarejestrować dla każdego unikalnego układ reklamy natywnej używany przez Twoją aplikację lub pojedynczy układ, który obsługuje wszystkie układy.

Po utworzeniu FLTNativeAdFactory skonfiguruj AppDelegate jako następujące:

#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

Wczytaj reklamę

Po dodaniu kodu platformy skorzystaj z Dart, aby wczytać reklamy. Marka sprawdź, czy wartość factoryID jest zgodna z zarejestrowanym wcześniej identyfikatorem.

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

Zdarzenia reklamy natywnej

Aby otrzymywać powiadomienia o zdarzeniach związanych z interakcjami z reklamami natywnymi, skorzystaj z funkcji listener właściwości reklamy. Następnie zaimplementuj funkcję NativeAdListener aby otrzymywać wywołania zwrotne zdarzeń reklamowych.

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

Reklama displayowa

Aby wyświetlić NativeAd jako widżet, musisz utworzyć instancję AdWidget. z obsługiwaną reklamą po wywołaniu load(). Widżet możesz utworzyć przed wywołuję load(), ale przed dodaniem go do widżetu trzeba wywołać funkcję load() drzewo.

Pole AdWidget dziedziczy z klasy Widget Flutter i może być używana jak każda inna widżet. Na iOS upewnij się, że widżet znajduje się w kontenerze o określonej szerokości i wysokości. W przeciwnym razie reklama może się nie wyświetlić.

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

Usuń reklamę

O NativeAd można je usunąć, gdy dostęp do nich nie jest już potrzebny. Sprawdzoną metodą wywołania funkcji dispose() jest wywołanie jej po usunięciu z drzewa widżetu elementu AdWidget powiązanego z reklamą natywną oraz w funkcji wywołania zwrotnego AdListener.onAdFailedToLoad().

Dalsze kroki

Więcej informacji o reklamach natywnych znajdziesz w naszej reklamie natywnej
Zapoznaj się z zasadami dotyczącymi reklam natywnych oraz wytycznych.
Zapoznaj się z historiami sukcesu klientów: studium przypadku 1, studium przypadku 2.

Pełny przykład w GitHub

Platforma natywna