תבניות מותאמות הן תצוגות של השלמת קוד במודעות המותאמות שלך, והן מיועדות לביצוע שינויים ולשינוי קל. באמצעות תבניות מקוריות, הפלאגין מספק מותאמות אישית ל-Android ול-iOS, ואפשר להתאים אישית את הסגנון נכסים מותאמים באמצעות Drt API.
במדריך הזה נדגים איך להשתמש ב-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
, וכך אפשר לעצב
מודעה מותאמת בקוד Dat.
גודלי תבניות
יש שני סוגים של תבניות למודעות מותאמות של Flutter: TemplateType.small
ו
TemplateType.medium
. התבנית הקטנה היא אידיאלית לTableView
או
GridView
, במודעות בגוף הפיד או בכל מקום שבו יש צורך בתצוגה מלבנית דקה.
תבנית בינונית אמורה להיות תצוגת דף של חצי עד שלושה רבעונים,
אידיאלי לדפי נחיתה או לדפי פתיחה.
קטן | |
---|---|
![]() Android |
![]() iOS |
בינונית | |
![]() Android |
![]() iOS |
אירועים של מודעות מותאמות
כדי לקבל התראות על אירועים שקשורים לאינטראקציות עם המודעות המותאמות, צריך להשתמש ב
listener
מאפיין של המודעה. לאחר מכן, מטמיעים
NativeAdListener
כדי לקבל קריאות חוזרות (callback) מאירועי מודעות.
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()
קריאה חוזרת.
השלבים הבאים
- מידע נוסף על מודעות מותאמות זמין במודעות המותאמות שלנו את ה-Playbook.
- אפשר לעיין במדיניות בנושא מודעות מותאמות הנחיות.
- ריכזנו בשבילכם כמה סיפורי הצלחה של לקוחות: מקרה לדוגמה 1, מקרה לדוגמה 2.