"بانر"

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

يوضّح هذا الدليل كيفية دمج إعلانات البانر من AdMob في تطبيق Flutter. وإلى جانب مقتطفات الرموز والتعليمات، يتضمّن الدليل أيضًا معلومات حول تحديد حجم إعلانات البانر بشكلٍ صحيح.

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

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

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

Android

ca-app-pub-3940256099942544/6300978111

iOS

ca-app-pub-3940256099942544/2934735716

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

تحميل إعلان

يقدم المثال التالي مثيلاً لإعلان بانر:

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/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      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();
  }
}

أحجام البانر

يسرد الجدول التالي الأحجام القياسية لإعلان البانر.

الحجم وحدات بكسل مستقلة الكثافة (عرض × ارتفاع)	الوصف	حجم الإعلان الثابت
320x50	بانر عادي	banner
320×100	بانر كبير	largeBanner
320×250	مستطيل متوسط	mediumRectangle
468×60	بانر بالحجم الكامل	fullBanner
728×90	ليدربورد	leaderboard
العرض المعروض × الارتفاع التكيُّفي	إعلان بانر تكيُّفي	لا ينطبق

لتحديد حجم بانر مخصّص، عليك ضبط قيمة AdSize المفضّلة لديك:

final AdSize adSize = AdSize(300, 50);

تنبيه: يؤدي ضبط عرض إعلان بانر أكبر من عرض شاشة الجهاز إلى حدوث سلوك غير متوقّع في التنسيق.

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

من خلال استخدام 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/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      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();
  }
}

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

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

يكتسِب AdWidget من فئة التطبيقات المصغّرة في 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().

أكملت هذه الخطوة. تطبيقك جاهز الآن لعرض إعلانات البانر.

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

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

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

إعلان بانر