بانر

تشغل إعلانات البانر مساحة ضمن تصميم التطبيق، إما في أعلى شاشة الجهاز أو أسفلها. وتظل معروضة على الشاشة أثناء تفاعل المستخدمين مع التطبيق، ويمكنها إعادة تحميلها تلقائيًا بعد فترة زمنية معيّنة.

يساعدك هذا الدليل على بدء استخدام إعلانات البانر الثابتة التكيُّفية. تعمل إعلانات البانر التكيُّفية الثابتة على تحسين حجم الإعلان لكل جهاز باستخدام عرض إعلان تحدّده.

إعلانات البانر التكيّفية الثابتة هي إعلانات بنِسب عرض إلى ارتفاع ثابتة بدلاً من إعلانات بحجم ثابت. تكون نسبة العرض إلى الارتفاع مشابهة لنسبة 320×50. بعد تحديد العرض الكامل المتاح، تعرِض حزمة SDK لإعلانات Google على الأجهزة الجوّالة إعلانًا بالارتفاع الأمثل لذلك العرض. يظل الارتفاع الأمثل للإعلان ثابتًا في جميع طلبات الإعلانات المختلفة، ويبقى المحتوى المحيط بالإعلان في مكانه عند إعادة تحميله.

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

عند إنشاء تطبيقاتك واختبارها، احرص على استخدام إعلانات اختبارية بدلاً من الإعلانات المنشورة. وقد يؤدي عدم تنفيذ ذلك إلى تعليق حسابك.

إنّ أسهل طريقة لتحميل الإعلانات الاختبارية هي استخدام رقم تعريف الوحدة الإعلانية الاختبارية المخصّص لإعلانات البنر:

/21775744923/example/adaptive-banner

يتم إعداد الوحدات الإعلانية الاختبارية لعرض إعلانات اختبارية لكل طلب، و يمكنك استخدامها في تطبيقاتك أثناء الترميز والاختبار وتصحيح الأخطاء. ما عليك سوى استبدالها بأرقام تعريف وحداتك الإعلانية قبل نشر تطبيقك.

الحصول على حجم الإعلان

لطلب إعلان بانر بالحجم الصحيح، اتّبِع الخطوات التالية:

1. يمكنك الحصول على عرض شاشة الجهاز بوحدات بكسل مستقلة الكثافة (dp) باستخدام MediaQuery.of(context). إذا كنت لا تريد استخدام عرض الشاشة بالكامل، يمكنك ضبط العرض الذي تريده.

2. استخدِم الطريقة الثابتة المناسبة في فئة AdSize للحصول على AdSize كائن. على سبيل المثال، استخدِم AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) للحصول على حجم الإعلان للاتجاه الحالي.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate());

تحميل إعلان

ينشئ المثال التالي مثيلًا لإعلان بانر:

class BannerExampleState extends State<BannerExample>{
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-banner';

  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: size,
      listener: AdManagerBannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

أحداث إعلانات البانر

من خلال استخدام AdManagerBannerAdListener، يمكنك الاستماع إلى أحداث دورة النشاط، مثل عند تحميل إعلان. ينفِّذ هذا المثال كل طريقة ويُسجِّل رسالة في وحدة التحكّم:

class BannerExampleState extends State<BannerExample> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-banner';


  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: size,
      listener: AdManagerBannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

عرض إعلان بانر

لعرض AdManagerBannerAd كأداة، عليك إنشاء مثيل AdWidget مع إعلان متوافق بعد استدعاء load(). يمكنك إنشاء التطبيق المصغّر قبل استدعاء load()، ولكن يجب استدعاء load() قبل إضافته إلى شجرة التطبيقات المصغّرة.

يكتسِب AdWidget فئة Widget في Flutter ويمكن استخدامه مثل أي أداة أخرى. على نظام التشغيل iOS، تأكَّد من وضع الأداة في تطبيق مصغّر بعرض وارتفاع محدّدين. وإلا قد لا يتم عرض إعلانك. يمكن وضع AdManagerBannerAd في حاوية بحجم يتطابق مع الإعلان:

if (_bannerAd != null) {
  Align(
    alignment: Alignment.bottomCenter,
    child: SafeArea(
      child: SizedBox(
        width: _bannerAd!.size.width.toDouble(),
        height: _bannerAd!.size.height.toDouble(),
        child: AdWidget(ad: _bannerAd!),
      ),
    ),
  )
}

يجب التخلص من الإعلان عندما لا يعود الوصول إليه ضروريًا. إنّ أفضل الممارسات لتحديد وقت استدعاء dispose() هي إما بعد إزالة AdWidget من شجرة التطبيقات المصغّرة أو في AdManagerBannerAdListener.onAdFailedToLoad() الاستدعاء.

هذا كل شيء! أصبح تطبيقك جاهزًا الآن لعرض إعلانات البانر.

قيود الانتقال على Android 9 والإصدارات الأقدم

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

التعرّف على أنواع البانر الأخرى

تعرَّف على الأنواع الأخرى من إعلانات البانر المحدّدة في هذا القسم لتطبيقك المكتوب بلغة Flutter.

إعلانات البانر التكيُّفية المضمّنة

تتميّز إعلانات البانر التكيُّفية المضمّنة بارتفاع متغيّر وإعلانات بانر أكبر وأطول مقارنةً بإعلانات البانر التكيُّفية الثابتة. ننصح باستخدام إعلانات البانر التكيّفية المضمّنة بدلاً من إعلانات البانر التكيّفية الثابتة في التطبيقات التي تضع إعلانات البانر في محتوى قابل للتمرير. لمزيد من التفاصيل، يُرجى الاطّلاع على إعلانات البانر التكيُّفية المضمّنة.

إعلانات البانر القابلة للتصغير

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