תבניות מקוריות ב-Dart

תבניות מותאמות הן תצוגות של קטעי קוד שהושלמו במודעות המותאמות, שמיועדות להטמעה מהירה ולשינוי קל. בעזרת תבניות מותאמות, הפלאגין מספק פריסות מוכנות מראש ל-Android ול-iOS, ותוכלו להתאים אישית את הסגנון של הנכסים המותאמים באמצעות Dart API.

המדריך מדגים איך להשתמש ב-Dart API כדי לסגנן את התצוגות הבסיסיות של הפלטפורמה ולהציג את המודעה.

דרישות מוקדמות

• Flutter 2.4.0 ומעלה.

• מבצעים את ההוראות במדריך לתחילת העבודה.
• מומלץ לקרוא את המאמר על אפשרויות של מודעות מותאמות.

ביצוע בדיקות באופן קבוע באמצעות מודעות בדיקה

כשאתם יוצרים ובודקים את האפליקציות שלכם, הקפידו להשתמש במודעות בדיקה ולא במודעות פעילות בשלב ההפקה. הדרך הקלה ביותר לטעון מודעות לבדיקה היא להשתמש במזהה הייעודי של יחידת מודעות לבדיקה עבור מודעות מותאמות:

• /6499/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 = '/6499/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.

גדלים של תבניות

יש שני סוגים של תבניות של מודעות מותאמות רציפות: 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 _adUnitId = '/6499/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().