نماذج الإعلانات المدمجة مع المحتوى هي طرق عرض مكتملة للرمز لإعلاناتك المدمجة مع المحتوى، وهي مصمّمة لزيادة سرعة وتنفيذه وسهولة التعديل. باستخدام النماذج الأصلية، يوفر المكون الإضافي تخطيطات Android وiOS المنشأة مسبقًا من أجلك، ويمكنك تخصيص نمط مواد العرض الأصلية باستخدام واجهة برمجة تطبيقات Dart.
يوضح هذا الدليل كيفية استخدام Dart API لتصميم منصة المشاهدة وعرض الإعلان
المتطلبات الأساسية
- Flutter 2.4.0 أو إصدار أحدث
- أكمِل دليل البدء.
- اطّلع على خيارات الإعلانات المدمجة مع المحتوى.
الاختبار دائمًا باستخدام الإعلانات الاختبارية
عند إنشاء تطبيقاتك واختبارها، احرص على استخدام إعلانات تجريبية بدلاً من إعلانات بث مباشر وتتمثل أسهل طريقة لتحميل الإعلانات الاختبارية في استخدام اختبار معرّف الوحدة الإعلانية للإعلانات المدمجة مع المحتوى:
Android
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
، ما يتيح لك تصميم
إعلان مدمج مع المحتوى في رمز Dart.
أحجام النماذج
يتوفّر نوعان من نماذج الإعلانات المدمجة مع المحتوى من Flutter هما: TemplateType.small
TemplateType.medium
يُعد النموذج الصغير مثاليًا لـ TableView
أو
GridView
، للإعلانات ضمن الخلاصة أو في أي مكان تحتاج فيه إلى عرض إعلان مستطيل رفيع. تشير رسالة الأشكال البيانية
والمتوسط المتوسط يعني أن عرض الصفحة من نصف إلى ثلاثة أرباع، وهو
وهي مثالية للصفحات المقصودة أو البداية.
صغير | |
---|---|
![]() Android |
![]() iOS |
الوسيط | |
![]() Android |
![]() 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
من فئة Widget
في Flutter ويمكن استخدامها مثل أي فئة أخرى.
التطبيق المصغّر. على نظام التشغيل 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.