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

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

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

پیش نیازها

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

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

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

اندروید 

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

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

الگوهای تبلیغات بومی 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 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 از کلاس 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() است.

مراحل بعدی

مثال کامل در GitHub

الگوهای بومی