تنسيقات الإعلانات الأنيقة باستخدام النماذج الأصلية

اختيار النظام الأساسي: Android iOS Flutter

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

يوضّح هذا الدليل كيفية استخدام واجهة برمجة تطبيقات Dart لتحديد نمط طرق عرض النظام الأساسي الأساسية وعرض الإعلان.

المتطلبات الأساسية

قبل المتابعة، يُرجى تنفيذ ما يلي:

  • الإصدار 2.4.0 من Flutter أو إصدار أحدث

الاختبار دائمًا باستخدام الإعلانات الاختبارية

عند إنشاء تطبيقاتك واختبارها، احرص على استخدام الإعلانات الاختبارية بدلاً من الإعلانات الفعلية. أسهل طريقة لتحميل الإعلانات الاختبارية هي استخدام رقم تعريف الوحدة الإعلانية الاختبارية المخصّص لـ "الإعلانات المدمجة مع المحتوى":

  • /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، ما يتيح لك تحديد نمط إعلان مدمج مع المحتوى بالكامل في رمز 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 _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 تستمد من فئة 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().