"بانر"

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

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

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

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

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

• /6499/example/banner

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

تحميل إعلان

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

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

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

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

أحجام البانر

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

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

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

final AdSize adSize = AdSize(300, 50);

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

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

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

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

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


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      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 من فئة التطبيق المصغَّرة في 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.