Doğal reklamlar, kullanıcılara sunulan kullanıcı arayüzü bileşenlerini
bir web sitesi, örneğin bir
Android cihazda View
veya
şurada UIView
var:
iOS.
Bu kılavuzda, yerel reklamları kullanarak yerel reklamları nasıl yükleyeceğinizi, görüntüleyeceğinizi ve özelleştireceğinizi kullanabilirsiniz.
Ö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, uygulamalarınızın yanı sıra üretim reklamlarıdır. Test reklamlarını yüklemenin en kolay yolu, doğal reklamlar için test reklam birimi kimliği:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Test reklam birimleri her istek için test reklamları döndürecek şekilde yapılandırılır. Bu yüzden, kod yazma, test ve tamamlama aşamalarında bunları kendi uygulamalarınızda hata ayıklamadan önce bunları kendi reklam birimi kimliklerinizle değiştirdiğinizden en iyi uygulamaları paylaşacağız.
Platforma özel kurulumlar
Doğal reklamlarınızı oluşturmak istiyorsanız iOS için platforma özel kod yazmanız gerekir ve ardından Dart uygulamanızda değişiklik yaparak en iyi uygulamaları paylaşacağız.
Android
Eklentiyi içe aktarma
Google Mobile Ads eklentisinin Android uygulaması için bir sınıf gerekir
bunu uygulamak
NativeAdFactory
API'ye gidin. Android projenizden bu API'ye referans vermek için
settings.gradle dosyanıza şu satırları 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
Sonra, NativeAdFactory
ve geçersiz kılmaları uygulayan bir sınıf oluşturun
createNativeAd()
yöntemini kullanır.
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ırma örneği için my_native_ad.xml sayfasına bakın.
NativeAdFactory'nizi kaydedin
Her NativeAdFactory
uygulamasının bir
Arama sırasında benzersiz String
tanımlayıcısı factoryId
MainActivity.configureFlutterEngine(FlutterEngine)
. factoryId
olacak
daha sonra Dart kodundan doğal reklam başlatırken kullanılır.
Her benzersiz yerel için bir NativeAdFactory
uygulanabilir ve kaydedilebilir
veya tek bir reklam düzeni tüm düzenleri yönetebilir.
Proje oluştururken
uygulamaya ekle
NativeAdFactory
adlı kullanıcının kaydının da iptal edilmesi gerekiyor
cleanUpFlutterEngine(engine)
.
NativeAdFactoryExample
oluşturduktan sonra MainActivity
cihazınızı şu şekilde ayarlayın:
şöyle olur:
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 uygulaması için bir sınıf gerekir
bunu uygulamak
FLTNativeAdFactory
API'ye gidin. NativeAdFactory
uygulayan bir sınıf oluşturun ve
createNativeAd()
yöntemini çağırın.
#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 sayfasına bakın.
NativeAdFactory'nizi kaydedin
Her bir FLTNativeAdFactory
öğenin bir factoryId
, benzersiz bir
registerNativeAdFactory:factoryId:nativeAdFactory:
grubunda String
tanımlayıcı.
factoryId
, daha sonra doğal reklam başlatılırken kullanılır
Google Analytics 4'te tarama yapar.
Her benzersiz öğe için FLTNativeAdFactory
uygulanabilir ve kaydedilebilir
veya tek bir reklam düzeni tüm düzenleri işleyebilir.
FLTNativeAdFactory
oluşturduktan sonra AppDelegate
cihazınızı şu şekilde ayarlayın:
şöyle olur:
#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 özgü kodunuzu ekledikten sonra reklamları yüklemek için Dart'ı kullanın. Marka
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
Doğal reklam etkileşimleriyle ilgili etkinlikler hakkında bildirim almak için şunu kullanın:
listener
özelliğini kullanın. Daha sonra
NativeAdListener
almak için bu seçeneği belirleyin.
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
NativeAd
öğesini widget olarak görüntülemek için bir örnek göstermeniz gerekir
AdWidget
load()
çağırdıktan sonra desteklenen bir reklamla. Widget'ı, oluşturma işleminden önce
load()
aranıyor, ancak widget'a eklenmeden önce load()
çağrılmalıdır
ağacı.
AdWidget
, Flutter'ın Widget
sınıfından devralır ve başkaları gibi kullanılabilir
widget'ını tıklayın. iOS'te, widget'ı belirtilen bir kapsayıcıya yerleştirdiğinizden emin olun.
ve yüksekliği belirtmelisiniz. Aksi takdirde, reklamınız gösterilmeyebilir.
final Container adContainer = Container(
alignment: Alignment.center,
child: AdWidget adWidget = AdWidget(ad: _nativeAd!),
width: WIDTH,
height: HEIGHT,
);
Reklamı iptal et
CEVAP
NativeAd
artık erişim gerekli olmadığında imha edilmelidir. En iyi uygulama,
dispose()
, yerel reklamla ilişkilendirilmiş AdWidget
öğesinden sonra ne zaman çağrılır?
öğesi, widget ağacından ve AdListener.onAdFailedToLoad()
bölümünden kaldırılır
geri arama.
Sonraki adımlar
- Yerel reklamımızda doğal reklamlar hakkında daha fazla bilgi edinin başucu kitabını inceleyin.
- Yerel reklam politikaları ve yönergelerimize bakın.
- Bazı müşteri başarı öykülerine göz atın: Örnek olay 1, örnek olay 2.