תבניות מותאמות הן תצוגות של מודעות מותאמות עם קוד מלא, שנועדו להטמעה מהירה ולשינוי קל. בעזרת תבניות מותאמות, הפלאגין מספק לכם פריסות מוכנות מראש ל-Android ול-iOS, ואפשר להתאים אישית את הסגנון של הנכסים המותאמים באמצעות Drt API.
במדריך הזה נדגים איך להשתמש ב-Dart API כדי לעצב את התצוגות של הפלטפורמה הבסיסיות ולעבד את המודעה.
דרישות מוקדמות
- Flutter מגרסה 2.4.0 ואילך.
- קוראים את המדריך לתחילת העבודה.
- מומלץ לקרוא על האפשרויות של מודעות מותאמות.
תמיד כדאי לבדוק באמצעות מודעות בדיקה
כשאתם מפתחים ובודקים את האפליקציות, חשוב להשתמש במודעות בדיקה במקום במודעות פעילות בסביבת הייצור. הדרך הקלה ביותר לטעון מודעות לבדיקה היא להשתמש במזהה הייעודי של יחידת המודעות לבדיקה של מודעות מותאמות:
/21775744923/example/native
יחידות המודעות לבדיקה מוגדרות כך שיחזירו מודעות בדיקה לכל בקשה, כך שתוכלו להשתמש בהן באפליקציות שלכם במהלך תכנות, בדיקות וניפוי באגים. רק הקפידו להחליף אותן במזהים של יחידות המודעות לפני פרסום האפליקציה.
טעינת מודעה
בדוגמה הבאה נטען מודעה מותאמת באמצעות התבנית המותאמת בגודל medium
:
class NativeExampleState extends State<NativeExample> {
NativeAd? nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final _adUnitId = '/21775744923/example/native';
/// 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 AdManagerAdRequest(),
// 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 _adUnitId = '/21775744923/example/native';
/// 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 AdManagerAdRequest(),
// 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
שמשויך למודעה המותאמת מעץ הווידג'ט ובקריאה החוזרת (callback) של AdListener.onAdFailedToLoad()
.