الگوهای بومی نماهایی با کد کامل برای تبلیغات بومی شما هستند که برای پیاده سازی سریع و اصلاح آسان طراحی شده اند. با قالبهای بومی، این افزونه طرحبندیهای اندروید و iOS از پیش ساخته شده را برای شما فراهم میکند و میتوانید سبک داراییهای بومی را با استفاده از Dart API سفارشی کنید.
این راهنما نشان می دهد که چگونه از Dart API برای سبک سازی نماهای پلتفرم زیربنایی و ارائه آگهی استفاده کنید.
پیش نیازها
- فلاتر 2.4.0 یا بالاتر.
- راهنمای شروع را کامل کنید.
- با گزینه های تبلیغات بومی آشنا شوید.
همیشه با تبلیغات آزمایشی تست کنید
هنگام ساخت و آزمایش برنامه های خود، مطمئن شوید که از تبلیغات آزمایشی به جای تبلیغات زنده و تولیدی استفاده می کنید. ساده ترین راه برای بارگیری تبلیغات آزمایشی استفاده از شناسه واحد آگهی آزمایشی اختصاصی ما برای تبلیغات بومی است:
اندروید
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
واحدهای آگهی آزمایشی به گونهای پیکربندی شدهاند که برای هر درخواستی، آگهیهای آزمایشی را برگردانند، بنابراین میتوانید هنگام کدنویسی، آزمایش و اشکالزدایی از آنها در برنامههای خود استفاده کنید—فقط مطمئن شوید که قبل از انتشار برنامه، آنها را با شناسههای واحد آگهی خود جایگزین کردهاید.
بارگذاری آگهی
مثال زیر یک تبلیغ بومی را با استفاده از قالب بومی با اندازه medium
بارگیری می کند:
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,
listener: NativeAdListener(
onAdLoaded: (ad) {
debugPrint('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
debugPrint('$NativeAd failed to load: $error');
ad.dispose();
},
),
request: const AdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
برای گزینه های استایل موجود به NativeTemplateStyle
و NativeTemplateTextStyle
مراجعه کنید.
سفارشی کردن آگهی
وقتی یک تبلیغ بومی را با استفاده از الگوهای بومی سفارشی میکنید، پیکربندی رابط کاربری تبلیغ شما در کلاس NativeTemplateStyle
قرار میگیرد و به شما امکان میدهد کل یک آگهی بومی را در کد دارت استایل دهید.
اندازه های قالب
الگوهای تبلیغات بومی Flutter در دو نوع موجود است: TemplateType.small
و TemplateType.medium
. الگوی کوچک برای TableView
یا GridView
، برای تبلیغات درون فید یا هر جایی که به یک نمای تبلیغاتی مستطیلی نازک نیاز دارید ایده آل است. قالب متوسط برای نمایش صفحه نیم تا سه چهارم طراحی شده است که برای صفحات فرود یا چلپ چلوپ ایده آل است.
کوچک | |
---|---|
اندروید | iOS |
متوسط | |
اندروید | iOS |
رویدادهای تبلیغاتی بومی
برای اطلاع از رویدادهای مرتبط با تعاملات تبلیغاتی بومی، از ویژگی 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,
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(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
نمایش تبلیغ
برای نمایش NativeAd
به عنوان یک ویجت، باید یک AdWidget
را با یک تبلیغ پشتیبانی شده پس از فراخوانی load()
نمونه سازی کنید. شما می توانید قبل از فراخوانی load()
ویجت را ایجاد کنید، اما load()
باید قبل از افزودن آن به درخت ویجت فراخوانی شود.
AdWidget
از کلاس Flutter's Widget
به ارث می رسد و می تواند مانند هر ویجت دیگری استفاده شود. در iOS، مطمئن شوید که ویجت را در ظرفی با عرض و ارتفاع مشخص قرار داده اید. در غیر این صورت ممکن است تبلیغ شما نمایش داده نشود.
// Small template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 90, // minimum recommended height
maxWidth: 400,
maxHeight: 200,
),
child: AdWidget(ad: _nativeAd!),
);
// Medium template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 320, // minimum recommended height
maxWidth: 400,
maxHeight: 400,
),
child: AdWidget(ad: _nativeAd!),
);
دفع آگهی
یک NativeAd
زمانی که دیگر به آن نیازی نیست باید دور ریخته شود. بهترین روش برای زمان فراخوانی dispose()
بعد از حذف AdWidget
مرتبط با تبلیغ بومی از درخت ویجت و در AdListener.onAdFailedToLoad()
است.
مراحل بعدی
- در کتاب راهنمای تبلیغات بومی ما درباره تبلیغات بومی بیشتر بیاموزید.
- خطمشیها و دستورالعملهای تبلیغات بومی را ببینید.
- چند داستان موفقیت مشتری را بررسی کنید: مطالعه موردی 1 ، مطالعه موردی 2 .