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