بنر

تبلیغات بنری یک نقطه را در طرح‌بندی برنامه اشغال می‌کنند، چه در بالا یا پایین صفحه دستگاه. در حالی که کاربران در حال تعامل با برنامه هستند، روی صفحه می مانند و می توانند پس از مدت زمان مشخصی به طور خودکار بازخوانی شوند.

این راهنما نحوه ادغام تبلیغات بنری از AdMob را در یک برنامه Flutter نشان می دهد. علاوه بر تکه‌های کد و دستورالعمل‌ها، اطلاعاتی در مورد اندازه‌بندی صحیح بنرها نیز دارد.

همیشه با تبلیغات آزمایشی تست کنید

هنگام ساخت و آزمایش برنامه های خود، مطمئن شوید که از تبلیغات آزمایشی به جای تبلیغات زنده و تولیدی استفاده می کنید. عدم انجام این کار می تواند منجر به تعلیق حساب شما شود.

ساده ترین راه برای بارگیری تبلیغات آزمایشی استفاده از شناسه واحد آگهی آزمایشی اختصاصی ما برای بنرها است:

ca-app-pub-3940256099942544/6300978111

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();
  }
}

اندازه های بنر

جدول زیر اندازه های استاندارد بنر را فهرست می کند.

برای تعریف اندازه بنر سفارشی، 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's Widget به ارث می رسد و می تواند مانند هر ویجت دیگری استفاده شود. در 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 9 یا جدیدتر ممکن است هنگام نمایش تبلیغات بنر درون‌خط در نماهای پیمایشی ، عملکردی کمتر از حد مطلوب داشته باشند. توصیه می کنیم فقط از این نوع بنرها در اندروید 10 یا جدیدتر استفاده کنید. بنرهای موقعیت ثابت مانند بنرهای لنگردار تحت تأثیر قرار نمی گیرند و می توانند با عملکرد مطلوب در تمام سطوح API Android استفاده شوند.

مثال کامل در GitHub

بنر ،

تبلیغات بنری یک نقطه را در طرح‌بندی برنامه اشغال می‌کنند، چه در بالا یا پایین صفحه دستگاه. در حالی که کاربران در حال تعامل با برنامه هستند، روی صفحه می مانند و می توانند پس از مدت زمان مشخصی به طور خودکار بازخوانی شوند.

این راهنما نحوه ادغام تبلیغات بنری از AdMob را در یک برنامه Flutter نشان می دهد. علاوه بر تکه‌های کد و دستورالعمل‌ها، اطلاعاتی در مورد اندازه‌بندی صحیح بنرها نیز دارد.

همیشه با تبلیغات آزمایشی تست کنید

هنگام ساخت و آزمایش برنامه های خود، مطمئن شوید که از تبلیغات آزمایشی به جای تبلیغات زنده و تولیدی استفاده می کنید. عدم انجام این کار می تواند منجر به تعلیق حساب شما شود.

ساده ترین راه برای بارگیری تبلیغات آزمایشی استفاده از شناسه واحد آگهی آزمایشی اختصاصی ما برای بنرها است:

ca-app-pub-3940256099942544/6300978111

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();
  }
}

اندازه های بنر

جدول زیر اندازه های استاندارد بنر را فهرست می کند.

برای تعریف اندازه بنر سفارشی، 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's Widget به ارث می رسد و می تواند مانند هر ویجت دیگری استفاده شود. در 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 9 یا جدیدتر ممکن است هنگام نمایش تبلیغات بنر درون‌خط در نماهای پیمایشی ، عملکردی کمتر از حد مطلوب داشته باشند. توصیه می کنیم فقط از این نوع بنرها در اندروید 10 یا جدیدتر استفاده کنید. بنرهای موقعیت ثابت مانند بنرهای لنگردار تحت تأثیر قرار نمی گیرند و می توانند با عملکرد مطلوب در تمام سطوح API Android استفاده شوند.

مثال کامل در GitHub

بنر