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

תבניות מותאמות הן צפיות מלאות בקוד של המודעות המותאמות, והן מיועדות לביצוע שינויים ולשינוי קל. באמצעות תבניות מקוריות, הפלאגין מספק מותאמות אישית ל-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, וכך אפשר לעצב מודעה מותאמת בקוד Drt.

גודלי תבניות

יש שני סוגים של תבניות למודעות מותאמות של 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() קריאה חוזרת.

השלבים הבאים

הקישור המלא ב-GitHub

תבניות מותאמות