תבניות מותאמות הן תצוגות של השלמת קוד במודעות המותאמות שלכם. התבניות האלה מיועדות להטמעה מהירה ולשינוי בקלות. כשמשתמשים בתבניות מותאמות, הפלאגין מספק פריסות מוכנות מראש ל-Android ול-iOS, ואפשר להתאים אישית את הסגנון של הנכסים המקוריים באמצעות Dart 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
, וכך אפשר לעצב מודעה מותאמת שלמה בקוד של Drt.
גודלי תבניות
יש שני סוגים של תבניות של מודעות מותאמות ב-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
שמשויך למודעה המקורית מוסר מעץ הווידג'טים, ובפונקציית ה-callback AdListener.onAdFailedToLoad()
.
השלבים הבאים
- מידע נוסף על מודעות מותאמות זמין במדריך שלנו למודעות מותאמות.
- מדיניות והנחיות בנושא מודעות מותאמות
- כדאי לעיין בסיפורי הצלחה של לקוחות: מקרה לדוגמה 1, מקרה לדוגמה 2.