الگوهای بومی در دارت

الگوهای بومی نماهایی با کد کامل برای تبلیغات بومی شما هستند که برای پیاده سازی سریع و اصلاح آسان طراحی شده اند. با قالب‌های بومی، این افزونه طرح‌بندی‌های اندروید و iOS از پیش ساخته شده را برای شما فراهم می‌کند و می‌توانید سبک دارایی‌های بومی را با استفاده از Dart API سفارشی کنید.

این راهنما نشان می دهد که چگونه از Dart API برای سبک سازی نماهای پلتفرم زیربنایی و ارائه آگهی استفاده کنید.

پیش نیازها

• فلوتر 2.4.0 یا بالاتر.

• راهنمای شروع را کامل کنید.
• با گزینه های تبلیغات بومی آشنا شوید.

همیشه با تبلیغات آزمایشی تست کنید

هنگام ساخت و آزمایش برنامه های خود، مطمئن شوید که از تبلیغات آزمایشی به جای تبلیغات زنده و تولیدی استفاده می کنید. ساده ترین راه برای بارگیری تبلیغات آزمایشی استفاده از شناسه واحد آگهی آزمایشی اختصاصی ما برای تبلیغات بومی است:

• /21775744923/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 = '/21775744923/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 قرار می‌گیرد و به شما امکان می‌دهد کل یک آگهی بومی را در کد دارت استایل دهید.

اندازه های قالب

الگوهای تبلیغات بومی Flutter در دو نوع موجود است: TemplateType.small و TemplateType.medium . الگوی کوچک برای TableView یا GridView ، برای تبلیغات درون فید یا هر جایی که به یک نمای تبلیغاتی مستطیلی نازک نیاز دارید ایده آل است. قالب متوسط ​​برای نمایش صفحه نیم تا سه چهارم طراحی شده است که برای صفحات فرود یا چلپ چلوپ ایده آل است.

کوچک
اندروید	iOS
متوسط
اندروید	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 _adUnitId = '/21775744923/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 از کلاس Flutter's Widget به ارث می رسد و می تواند مانند هر ویجت دیگری استفاده شود. در 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() است.