بانر

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

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

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

إعلانات البانر التكيّفية الثابتة هي إعلانات بنسبة عرض إلى ارتفاع ثابتة بدلاً من الإعلانات ذات الحجم الثابت. نسبة العرض إلى الارتفاع مشابهة لـ 320x50. بعد تحديد العرض الكامل المتاح، تعرض حزمة تطوير البرامج (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 أو إصدار أقدم قد يكون أداؤها دون المستوى المطلوب عند عرض إعلانات بانر مضمّنة في طرق العرض القابلة للتمرير. ننصحك باستخدام هذه الأنواع من البانرات على الإصدار 10 من نظام التشغيل Android أو الإصدارات الأحدث فقط. لا تتأثر إعلانات البانر ذات الموضع الثابت، مثل إعلانات البانر الثابتة، ويمكن استخدامها بأداء مثالي على جميع مستويات واجهة برمجة التطبيقات في Android.

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

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

مزيد من المعلومات عن أنواع البانرات الأخرى

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

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

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

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

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