Banner

Banner reklamlar, uygulama düzeninde cihaz ekranının üst veya alt kısmında belirli bir alanı kaplar. Kullanıcılar uygulamayla etkileşim kurarken banner reklam ekranda kalmaya devam eder ve belirli bir süre sonra otomatik olarak yenilenebilir.

Bu kılavuzda, sabit uyarlanabilir banner reklamları kullanmaya başlamanız için gerekli bilgiler verilmektedir. Sabit uyarlanabilir banner'lar, belirttiğiniz bir reklam genişliğini kullanarak reklam boyutunu her cihaz için optimize eder.

Sabit uyarlanabilir banner reklamlar, sabit boyutlu reklamlar yerine sabit en boy oranına sahip reklamlardır. En boy oranı 320x50'e benzer. Kullanılabilir tam genişliği belirttikten sonra Google Mobile Ads SDK'sı, bu genişlik için optimum yüksekliğe sahip bir reklam döndürür. Reklam için optimum yükseklik, farklı reklam isteklerinde sabit kalır ve reklam yenilendiğinde reklamı çevreleyen içerik yerinde kalır.

Her zaman test reklamlarıyla test yapın

Uygulamalarınızı oluşturup test ederken yayındaki üretim reklamları yerine test reklamları kullandığınızdan emin olun. Aksi takdirde hesabınız askıya alınabilir.

Test reklamları yüklemenin en kolay yolu, banner'lar için özel test reklam birimi kimliğimizi kullanmaktır:

Yapay Zeka

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

Test reklam birimleri, her istek için test reklamları döndürecek şekilde yapılandırılmıştır. Kodlama, test etme ve hata ayıklama sırasında bunları kendi uygulamalarınızda kullanabilirsiniz. Uygulamanızı yayınlamadan önce bunları kendi reklam birimi kimliklerinizle değiştirdiğinizden emin olun.

Reklam boyutunu alma

Doğru reklam boyutuna sahip bir banner reklam istemek için aşağıdaki adımları uygulayın:

  1. MediaQuery.of(context) kullanarak cihazın ekranının yoğunluktan bağımsız piksel (dp) cinsinden genişliğini alın. Tam ekran genişliğini kullanmak istemiyorsanız kendi genişliğinizi ayarlayabilirsiniz.

  2. AdSize nesnesi almak için AdSize sınıfındaki uygun statik yöntemi kullanın. Örneğin, geçerli yönde reklam boyutunu almak için AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) değerini kullanın.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate());

Reklam yükleme

Aşağıdaki örnekte bir banner reklam oluşturulmaktadır:

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'ü kullanarak yaşam döngüsü etkinliklerini (ör. bir reklamın yüklenmesi) dinleyebilirsiniz. Bu örnekte her yöntem uygulanmakta ve konsola bir mesaj kaydedilmektedir:

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

Banner reklam gösterme

Bir BannerAd'ü widget olarak görüntülemek için load()'yi çağırdıktan sonra desteklenen bir reklamla bir AdWidget örneği oluşturmanız gerekir. Widget'ı load() çağrısından önce oluşturabilirsiniz, ancak widget ağacına eklemeden önce load() çağrılmalıdır.

AdWidget, Flutter'ın Widget sınıfından devralır ve diğer widget'lar gibi kullanılabilir. iOS'te widget'ı, belirtilen genişlik ve yüksekliğe sahip bir widget'a yerleştirdiğinizden emin olun. Aksi takdirde, reklamınız gösterilmeyebilir. BannerAd, reklamla eşleşen boyuta sahip bir kapsayıcıya yerleştirilebilir:

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!),
      ),
    ),
  )
}

Bir reklama erişime artık ihtiyaç duyulmadığında reklamın kaldırılması gerekir. dispose()'ü ne zaman çağıracağınız konusunda en iyi uygulama, AdWidget widget ağacından kaldırıldıktan sonra veya BannerAdListener.onAdFailedToLoad() geri çağırma işlevinde çağırmaktır.

İşte bu kadar. Uygulamanız artık banner reklam göstermeye hazırdır.

Android 9 ve önceki sürümlerde kaydırma sınırlaması

Android 9 veya önceki sürümleri çalıştıran bazı eski ya da daha az güçlü cihazların, kaydırma görünümlerinde satır içi banner reklamlar görüntülerken düşük bir performansa sahip olabileceğinin farkındayız. Bu tür banner'ları yalnızca Android 10 veya sonraki sürümlerde kullanmanızı öneririz. Sabit konum banner'ları (ör. sabitlenmiş banner'lar) bu durumdan etkilenmez ve tüm Android API düzeylerinde optimum performansla kullanılabilir.

GitHub'daki tam örnek

Bu sayfada ele alınan banner entegrasyonunun tam örneğini banner_example'da görebilirsiniz.

Diğer banner türleri hakkında bilgi edinme

Flutter uygulamanız için bu bölümde tanımlanan diğer banner türleri hakkında bilgi edinin.

Satır içi uyarlanabilir banner'lar

Satır içi uyarlanabilir banner'lar değişken yüksekliğe sahiptir ve sabit uyarlanabilir banner'lara kıyasla daha geniş ve daha uzundur. Satır içi uyarlanabilir banner'lar, kaydırılabilir içeriğe banner reklam yerleştiren uygulamalar için sabit uyarlanabilir banner reklamların yerine önerilir. Daha fazla bilgi için satır içi uyarlanabilir banner'lar bölümüne bakın.

Daraltılabilir banner'lar

Daraltılabilir banner reklamlar, başlangıçta daha büyük bir yer paylaşımı olarak sunulan ve reklamı daha küçük bir boyuta daraltmaya yarayan bir düğme içeren banner reklamlardır. Performansınızı daha da optimize etmek için bu banner'ı kullanmayı düşünebilirsiniz. Daha fazla bilgi için daraltılabilir banner reklamlar bölümünü inceleyin.