بانر

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

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

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

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

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

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

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

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

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

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

  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>{
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

  /// 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 = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // 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('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

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

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


  /// 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 = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // 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('BannerAd 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();
  }
}

إعادة تحميل إعلان

إذا أعددت وحدتك الإعلانية لإعادة التحميل، لن تحتاج إلى طلب إعلان آخر عند تعذُّر تحميل الإعلان. تلتزم حزمة "SDK لإعلانات Google على الأجهزة الجوّالة" بأيّ معدّل تحديث حدّدته في واجهة مستخدم AdMob. إذا لم تكن قد فعّلت ميزة الصعق الكهربي، قدِّم طلبًا جديدًا. لمزيد من التفاصيل حول إعادة تحميل الوحدات الإعلانية، مثل ضبط معدّل إعادة التحميل، اطّلِع على ضبط خيار إعادة التحميل التلقائية لإعلانات البانر.

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

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

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

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 من شجرة التطبيقات المصغّرة أو في BannerAdListener.onAdFailedToLoad() الاستدعاء.

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

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

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

مثال كامل على GitHub

يمكنك الاطّلاع على مثال كامل لدمج البانر الذي تمت الإشارة إليه في هذه الصفحة فيملف برمجي بعنوان banner_example.

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

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

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

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

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

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