النماذج الأصلية في Dart

نماذج الإعلانات المدمجة مع المحتوى هي طرق عرض مكتملة للرمز لإعلاناتك المدمجة مع المحتوى، وهي مصمّمة لزيادة سرعة وتنفيذه وسهولة التعديل. باستخدام النماذج الأصلية، يوفر المكون الإضافي تخطيطات Android وiOS المنشأة مسبقًا من أجلك، ويمكنك تخصيص نمط مواد العرض الأصلية باستخدام واجهة برمجة تطبيقات Dart.

يوضح هذا الدليل كيفية استخدام 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.

أحجام النماذج

يتوفّر نوعان من نماذج الإعلانات المدمجة مع المحتوى من Flutter هما: TemplateType.small TemplateType.medium يُعد النموذج الصغير مثاليًا لـ TableView أو GridView، للإعلانات ضمن الخلاصة أو في أي مكان تحتاج فيه إلى عرض إعلان مستطيل رفيع. تشير رسالة الأشكال البيانية والمتوسط المتوسط يعني أن عرض الصفحة من نصف إلى ثلاثة أرباع، وهو وهي مثالية للصفحات المقصودة أو البداية.

صغير

نظام التشغيل Android
iOS
الوسيط

نظام التشغيل Android
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 من فئة 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

نماذج مدمجة مع المحتوى