تبلیغات بومی با استفاده از اجزای رابط کاربری بومی پلتفرم - به عنوان مثال، یک View
در Android یا یک UIView
در iOS به کاربران ارائه می شود.
این راهنما به شما نحوه بارگیری، نمایش و سفارشی کردن تبلیغات بومی را با استفاده از کدهای پلتفرم خاص نشان می دهد.
پیش نیازها
- راهنمای شروع را کامل کنید.
- با گزینه های تبلیغات بومی آشنا شوید.
همیشه با تبلیغات آزمایشی تست کنید
هنگام ساخت و آزمایش برنامه های خود، مطمئن شوید که از تبلیغات آزمایشی به جای تبلیغات زنده و تولیدی استفاده می کنید. ساده ترین راه برای بارگیری تبلیغات آزمایشی استفاده از شناسه واحد آگهی آزمایشی اختصاصی ما برای تبلیغات بومی است:
اندروید
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
واحدهای آگهی آزمایشی به گونهای پیکربندی شدهاند که برای هر درخواستی، آگهیهای آزمایشی را برگردانند، بنابراین میتوانید هنگام کدنویسی، آزمایش و اشکالزدایی از آنها در برنامههای خود استفاده کنید—فقط مطمئن شوید که قبل از انتشار برنامه، آنها را با شناسههای واحد آگهی خود جایگزین کردهاید.
تنظیمات پلتفرم خاص
برای ایجاد تبلیغات بومی خود، باید کد مخصوص پلتفرم را برای iOS و Android بنویسید و سپس اجرای Dart خود را تغییر دهید تا از تغییرات کد بومی که ایجاد کرده اید استفاده کنید.
اندروید
افزونه را وارد کنید
اجرای Android افزونه Google Mobile Ads به کلاسی نیاز دارد که API NativeAdFactory
را اجرا کند. برای ارجاع به این API از پروژه Android خود، خطوط زیر را به 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 را پیاده سازی کنید
سپس کلاسی ایجاد کنید که NativeAdFactory
را پیاده سازی کند و متد 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<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
، به my_native_ad.xml مراجعه کنید.
NativeAdFactory خود را ثبت کنید
هنگام فراخوانی MainActivity.configureFlutterEngine(FlutterEngine)
هر پیاده سازی NativeAdFactory
باید با یک factoryId
، یک شناسه String
منحصر به فرد، ثبت شود. factoryId
بعداً هنگام نمونه سازی یک تبلیغ بومی از کد Dart استفاده می شود.
یک NativeAdFactory
را میتوان برای هر طرحبندی تبلیغات بومی منحصربهفردی که توسط برنامه شما استفاده میشود، پیادهسازی و ثبت کرد، یا یک طرحبندی واحد میتواند همه طرحبندیها را مدیریت کند.
توجه داشته باشید که هنگام ساخت با افزودنی به برنامه ، NativeAdFactory
نیز باید در cleanUpFlutterEngine(engine)
ثبت نشده باشد.
هنگامی که NativeAdFactoryExample
ایجاد کردید، MainActivity
خود را به صورت زیر تنظیم کنید:
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 را پیاده سازی کنید
پیادهسازی پلاگین Google Mobile Ads در iOS به کلاسی نیاز دارد که API FLTNativeAdFactory
را پیادهسازی کند. کلاسی ایجاد کنید که NativeAdFactory
را پیاده سازی کند و متد 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 <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
، NativeAdView.xib را ببینید.
NativeAdFactory خود را ثبت کنید
هر FLTNativeAdFactory
باید با یک factoryId
، یک شناسه String
منحصر به فرد، در registerNativeAdFactory:factoryId:nativeAdFactory:
ثبت شود. factoryId
بعداً هنگام نمونه سازی یک تبلیغ بومی از کد Dart استفاده می شود.
یک FLTNativeAdFactory
را میتوان برای هر طرحبندی تبلیغات بومی منحصربهفردی که توسط برنامه شما استفاده میشود، پیادهسازی و ثبت کرد، یا یک طرحبندی واحد میتواند همه طرحبندیها را مدیریت کند.
هنگامی که FLTNativeAdFactory
ایجاد کردید، AppDelegate
خود را به صورت زیر تنظیم کنید:
#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
بارگذاری آگهی
پس از اینکه کد مخصوص پلتفرم خود را اضافه کردید، برای بارگیری تبلیغات به Dart بروید. اطمینان حاصل کنید که factoryID
با شناسه ای که قبلاً ثبت کرده اید مطابقت دارد.
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();
}
}
رویدادهای تبلیغاتی بومی
برای اطلاع از رویدادهای مرتبط با تعاملات تبلیغاتی بومی، از ویژگی listener
آگهی استفاده کنید. سپس، NativeAdListener
برای دریافت تماس های رویداد تبلیغاتی پیاده سازی کنید.
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();
}
}
نمایش تبلیغ
برای نمایش NativeAd
به عنوان یک ویجت، باید یک AdWidget
با یک تبلیغ پشتیبانی شده پس از فراخوانی load()
نمونه سازی کنید. شما می توانید قبل از فراخوانی load()
ویجت را ایجاد کنید، اما load()
باید قبل از افزودن آن به درخت ویجت فراخوانی شود.
AdWidget
از کلاس Flutter's Widget
به ارث می رسد و می تواند مانند هر ویجت دیگری استفاده شود. در iOS، مطمئن شوید که ویجت را در ظرفی با عرض و ارتفاع مشخص قرار داده اید. در غیر این صورت ممکن است تبلیغ شما نمایش داده نشود.
final Container adContainer = Container(
alignment: Alignment.center,
child: AdWidget adWidget = AdWidget(ad: _nativeAd!),
width: WIDTH,
height: HEIGHT,
);
دفع آگهی
یک NativeAd
زمانی که دیگر به آن نیازی نیست باید دور ریخته شود. بهترین روش برای زمان فراخوانی dispose()
بعد از حذف AdWidget
مرتبط با تبلیغ بومی از درخت ویجت و در AdListener.onAdFailedToLoad()
است.
مراحل بعدی
- در کتاب راهنمای تبلیغات بومی ما درباره تبلیغات بومی بیشتر بیاموزید.
- خطمشیها و دستورالعملهای تبلیغات بومی را ببینید.
- چند داستان موفقیت مشتری را بررسی کنید: مطالعه موردی 1 ، مطالعه موردی 2 .