Reklamy natywne to zasoby reklam wyświetlane użytkownikom za pomocą komponentów interfejsu natywnych na platformie. Są wyświetlane w tych samych widokach, w których tworzysz już układy, i mogą być sformatowane pod kątem wyglądu i sposobu obsługi interfejsu. Zgodnie z zasadami kodowania po załadowaniu reklamy natywnej aplikacja otrzymuje obiekt reklamy natywnej, który zawiera swoje zasoby, a za wyświetlanie reklam odpowiada aplikacja (a nie pakiet SDK do reklam mobilnych Google).
Ogólnie rzecz biorąc, skuteczne reklamy natywne składają się z 2 etapów: wczytywania reklamy za pomocą pakietu SDK i wyświetlania treści reklamy w aplikacji. Ten przewodnik dotyczy korzystania z pakietu SDK do wczytywania reklam natywnych.
Konfiguracja platformy
Reklamy natywne są wyświetlane użytkownikom za pomocą komponentów UI natywnych na platformie (np. View
w Androidzie i UIView
w iOS).
Reklamy natywne wymagają komponentów interfejsu natywnych na platformie, dlatego ta funkcja wymaga dodatkowej konfiguracji na Androida i iOS:
Android
Implementacja wtyczki Google Ads na Androida wymaga klasy, która używa NativeAdFactory
. Aby odwołać się do tego interfejsu API z projektu na Androida, dodaj te wiersze do 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 }
NativeAdFactory
zawiera metodę, która przyjmuje metodę NativeAd
i zwraca wartość NativeAdView
. Element NativeAdView
jest wyświetlany w aplikacji.
Możesz go zaimplementować w MainActivity.java
lub utworzyć oddzielną klasę w tym samym katalogu co MainActivity.java
:
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 } }
Każdy NativeAdFactory
musi być zarejestrowany z factoryId
unikalnym identyfikatorem String
, w MainActivity.configureFlutterEngine(FlutterEngine)
A
NativeAdFactory
może być zaimplementowany i zarejestrowany dla każdego unikalnego układu reklamy natywnej używanego przez Twoją aplikację albo jeden może obsługiwać wszystkie układy.
Urządzenie NativeAdFactory
powinno być też wyrejestrowane w lokalizacji cleanUpFlutterEngine(engine)
podczas tworzenia kreacji za pomocą funkcji dodaj do aplikacji.
MainActivity.java
powinien wyglądać podobnie do tego:
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"); } }
Podczas tworzenia NativeAd
w Dart factoryId
musi być zgodny z tym, który został użyty do dodania fabryki do GoogleMobileAdsPlugin
. W powyższym fragmencie kodu adFactoryExample
jest nazwą elementu factoryId
. Oto przykład właściwości 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
Instalacja wtyczki do reklam mobilnych Google na iOS wymaga klasy, która implementuje FLTNativeAdFactory
. FLTNativeAdFactory
zawiera metodę, która przyjmuje metodę GADNativeAd
i opcje niestandardowe. Zwraca GADNativeAdView
. Pole GADNativeAdView
jest wyświetlane w aplikacji.
Protokół FLTNativeAdFactory
może zaimplementować AppDelegate
lub można utworzyć osobną klasę:
/* AppDelegate.m */ #import "FLTGoogleMobileAdsPlugin.h" @interface NativeAdFactoryExample : NSObject<FLTNativeAdFactory> @end @implementation NativeAdFactoryExample - (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd customOptions:(NSDictionary *)customOptions { // Create GADNativeAdView } @end
Każdy rejestr FLTNativeAdFactory
musi być zarejestrowany za pomocą factoryId
(unikalnego identyfikatora String
) w: registerNativeAdFactory:factoryId:nativeAdFactory:
.
Tag FLTNativeAdFactory
można zaimplementować i zarejestrować w każdym unikalnym układzie reklamy natywnej wykorzystywanym przez aplikację. Jeden system może obsługiwać wszystkie układy. W tym celu importuje tag FLTGoogleMobileAdsPlugin.h
i wywołuje metodę registerNativeAdFactory:factoryId:nativeAdFactory:
z unikalnym identyfikatorem fabryki (FlutterPluginRegistry
). Do fabryki należy dodać po wywołaniu
GeneratedPluginRegistrant registerWithRegistry:self];
.
Adres powinien wyglądać mniej więcej tak: AppDelegate.m
#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
Podczas tworzenia NativeAd
w Dart factoryID
musi być zgodny z tym, który został użyty do dodania fabryki do FLTGoogleMobileAdsPlugin
. W powyższym fragmencie kodu adFactoryExample
jest nazwą elementu factoryID
. Oto przykład właściwości 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
Zawsze testuj z reklamami testowymi
Tworząc i testując aplikacje, upewnij się, że używasz reklam testowych zamiast produkcyjnych. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.
Najłatwiejszym sposobem wczytywania reklam testowych jest użycie specjalnego identyfikatora jednostki testowej na potrzeby reklam natywnych:
Testowe jednostki reklamowe są skonfigurowane tak, by zwracać reklamy testowe dla każdego żądania. Możesz ich używać we własnych aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj, aby zastąpić je własnymi jednostkami reklamowymi, zanim opublikujesz aplikację.
Utwórz instancję reklamy
NativeAd
wymaga adUnitId
, factoryId
, AdRequest
i NativeAdListener
.Ten przykład pokazuje instancję reklamy natywnej:
final NativeAd myNative = NativeAd(
adUnitId: '<ad unit id>',
factoryId: 'adFactoryExample',
request: AdRequest(),
listener: NativeAdListener(),
);
Identyfikator fabryki
factoryId
musi być taki sam jak ten dodany w przypadku GoogleMobileAdsPlugin
na urządzeniu z Androidem lub FLTGoogleMobileAdsPlugin
na iOS.
Z tej samej właściwości factoryId
mogą korzystać obie platformy, a każda z nich może mieć własną.
Zdarzenia reklam natywnych
Dzięki tagowi NativeAdListener
możesz wykrywać zdarzenia cyklu życia, np. gdy reklama się wczytuje. Poniższy przykład implementuje każdą metodę i rejestruje komunikat w konsoli:
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.'),
);
Załaduj reklamę
Po wywołaniu elementu NativeAd
musisz wywołać metodę load()
, aby mogła się wyświetlić na ekranie.
myNative.load();
Reklama displayowa
Aby wyświetlić element NativeAd
jako widżet, po wywołaniu elementu load()
musisz utworzyć instancję AdWidget
z obsługiwaną reklamą. Możesz utworzyć widżet przed wywołaniem strony load()
, ale musisz najpierw wywołać metodę load()
, zanim dodasz ją do drzewa widżetu.
final AdWidget adWidget = AdWidget(ad: myBanner);
Element AdWidget
dziedziczy z klasy Widget
Flutter i może być używany jak każdy inny widżet. W systemie iOS umieść widżet w kontenerze o określonej szerokości i wysokości. W przeciwnym razie reklama może się nie wyświetlać.
final Container adContainer = Container(
alignment: Alignment.center,
child: adWidget,
width: 500,
height: 500,
);
Gdy reklama wywołuje metodę load()
, musi wywołać metodę dispose()
, gdy dostęp do niej nie jest już potrzebny. Sprawdzoną metodą wywołania dispose()
jest usunięcie elementu AdWidget
z drzewa widżetów lub wywołania zwrotnego AdListener.onAdFailedToLoad
.
Dobrze. Możesz już wyświetlać reklamy natywne w swojej aplikacji.
Dalsze kroki
- Więcej informacji o reklamach natywnych znajdziesz w naszym przewodniku po reklamach natywnych.
- Zapoznaj się z zasadami i wytycznymi dotyczącymi reklam natywnych, aby zaimplementować reklamy natywne.
- Zapoznaj się z pewnymi historiami sukcesu klientów: Studium przypadku 1, Studium przypadku 2.