Yerel reklamlar, platforma özgü kullanıcı arayüzü bileşenleri (ör. Android'de View
veya iOS'te UIView
) kullanılarak kullanıcılara sunulur.
Bu kılavuzda, platforma özel kod kullanarak yerel reklamları nasıl yükleyeceğiniz, görüntüleyeceğiniz ve özelleştireceğiniz gösterilmektedir.
Ön koşullar
- Başlangıç kılavuzunu tamamlayın.
- Yerel reklam seçenekleri hakkında bilgi edinin.
Her zaman test reklamlarıyla test etme
Uygulamalarınızı oluştururken ve test ederken canlı, üretim reklamları yerine test reklamlarını kullandığınızdan emin olun. Test reklamlarını yüklemenin en kolay yolu, yerel reklamlar için özel test reklam birimi kimliğimizi kullanmaktır:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Test reklam birimleri her istek için test reklamı döndürecek şekilde yapılandırılır. Böylece bunları kodlama, test ve hata ayıklama sırasında kendi uygulamalarınızda kullanabilirsiniz. Uygulamanızı yayınlamadan önce bunları kendi reklam birimi kimliklerinizle değiştirdiğinizden emin olmanız yeterlidir.
Platforma özel kurulumlar
Yerel reklamlarınızı oluşturmak üzere iOS ve Android için platforma özel kod yazmanız ve ardından Dart uygulamanızı, yaptığınız yerel kod değişikliklerini kullanacak şekilde değiştirmeniz gerekir.
Android
Eklentiyi içe aktarın
Google Mobile Ads eklentisinin Android uygulaması için NativeAdFactory
API'yi uygulayan bir sınıf gerekir. Android projenizden bu API'ye referans vermek için aşağıdaki satırları settings.gradle dosyanıza ekleyin:
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'yi Uygulama
Daha sonra, NativeAdFactory
yöntemini uygulayan ve createNativeAd()
yöntemini geçersiz kılan bir sınıf oluşturun.
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<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;
}
}
NativeAdView
düzeninizi yapılandırmayla ilgili bir örnek için my_native_ad.xml sayfasına bakın.
NativeAdFactory'nizi kaydedin
Her NativeAdFactory
uygulamasının, MainActivity.configureFlutterEngine(FlutterEngine)
çağrısı yapılırken benzersiz bir String
tanımlayıcısı olan factoryId
ile kaydedilmesi gerekir. factoryId
, daha sonra Dart kodundan doğal reklam başlatırken kullanılır.
Uygulamanız tarafından kullanılan her benzersiz yerel reklam düzeni için bir NativeAdFactory
uygulanıp kaydedilebilir veya tek bir düzen tüm düzenleri işleyebilir.
Uygulamaya ekle ile derleme yaparken NativeAdFactory
öğesinin de cleanUpFlutterEngine(engine)
'deki kaydının iptal edilmesi gerektiğini unutmayın.
NativeAdFactoryExample
oluşturduktan sonra MainActivity
kurulumunu aşağıdaki gibi yapın:
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'yi Uygulama
Google Mobile Ads eklentisinin iOS'te uygulanması, FLTNativeAdFactory
API'yi uygulayan bir sınıf gerektirir. NativeAdFactory
yöntemini ve createNativeAd()
yöntemini uygulayan bir sınıf oluşturun.
#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 <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
GADNativeAdView
düzeninizi yapılandırmayla ilgili bir örnek için NativeAdView.xib dosyasına bakın.
NativeAdFactory'nizi kaydedin
Her FLTNativeAdFactory
, registerNativeAdFactory:factoryId:nativeAdFactory:
içinde benzersiz bir String
tanımlayıcı olan factoryId
ile kayıtlı olmalıdır.
factoryId
, daha sonra Dart kodundan yerel reklam örneği açılırken kullanılacaktır.
Uygulamanız tarafından kullanılan her benzersiz yerel reklam düzeni için bir FLTNativeAdFactory
uygulanıp kaydedilebilir veya tek bir düzen tüm düzenleri işleyebilir.
FLTNativeAdFactory
oluşturduktan sonra AppDelegate
kurulumunu aşağıdaki gibi yapın:
#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
Reklam yükle
Platforma özel kodunuzu ekledikten sonra reklamları yüklemek için Dart'ı kullanın. factoryID
değerinin daha önce kaydettiğiniz kimlikle eşleştiğinden emin olun.
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();
}
}
Yerel reklam etkinlikleri
Yerel reklam etkileşimleriyle ilgili etkinlikler hakkında bildirim almak için reklamın listener
özelliğini kullanın. Ardından, reklam etkinliği geri çağırmaları almak için NativeAdListener
uygulayın.
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();
}
}
Görüntülü reklam
Bir NativeAd
öğesini widget olarak görüntülemek için load()
çağrısından sonra desteklenen bir reklamla bir AdWidget
örneği oluşturmanız gerekir. Widget'ı load()
çağrısı yapmadan önce oluşturabilirsiniz, ancak widget ağacına eklenmeden önce load()
çağrılmalıdır.
AdWidget
, Flutter'ın Widget
sınıfından devralır ve diğer herhangi bir widget gibi kullanılabilir. iOS'te, widget'ı belirli bir genişlik ve yüksekliğe sahip bir kapsayıcıya yerleştirdiğinizden emin olun. Aksi takdirde, reklamınız görüntülenmeyebilir.
final Container adContainer = Container(
alignment: Alignment.center,
child: AdWidget adWidget = AdWidget(ad: _nativeAd!),
width: WIDTH,
height: HEIGHT,
);
Reklamı kaldır
Artık erişim gerekli olmadığında NativeAd
imha edilmelidir. dispose()
çağrısının ne zaman yapılacağına ilişkin en iyi uygulama, yerel reklamla ilişkili AdWidget
öğesinin widget ağacından ve AdListener.onAdFailedToLoad()
geri çağırmasından kaldırılmasından sonra olmasıdır.
Sonraki adımlar
- Yerel reklam başucu kitabımızda yerel reklamlar hakkında daha fazla bilgi edinin.
- Yerel reklam politikaları ve yönergelerini inceleyin.
- Bazı müşteri başarı hikayelerine göz atın: Örnek olay 1, örnek olay 2.