Banner

Iklan banner mengisi suatu tempat dalam tata letak aplikasi, baik di atas ataupun di bawah layar perangkat. Iklan banner tetap ditampilkan di layar saat pengguna berinteraksi dengan aplikasi, dan dapat dimuat ulang secara otomatis setelah jangka waktu tertentu.

Panduan ini membantu Anda memulai iklan banner adaptif dengan anchor. Banner adaptif anchor mengoptimalkan ukuran iklan untuk setiap perangkat menggunakan lebar iklan yang Anda tentukan.

Iklan banner adaptif yang disematkan adalah iklan dengan rasio lebar tinggi tetap, bukan iklan ukuran tetap. Rasio aspeknya mirip dengan 320x50. Setelah Anda menentukan lebar penuh yang tersedia, Google Mobile Ads SDK akan menampilkan iklan dengan tinggi yang optimal untuk lebar tersebut. Tinggi optimal untuk iklan tetap konstan di berbagai permintaan iklan, dan konten di sekitar iklan tetap berada di tempatnya saat iklan dimuat ulang.

Selalu uji dengan iklan percobaan

Saat mem-build dan menguji aplikasi, pastikan Anda menggunakan iklan percobaan, bukan iklan produksi langsung. Jika Anda tidak melakukannya, akun Anda dapat ditangguhkan.

Cara termudah untuk memuat iklan percobaan adalah dengan menggunakan ID unit iklan percobaan khusus kami untuk banner:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

Unit iklan pengujian dikonfigurasi untuk menampilkan iklan pengujian untuk setiap permintaan, dan Anda bebas menggunakannya di aplikasi Anda sendiri saat melakukan coding, pengujian, dan proses debug. Pastikan Anda menggantinya dengan ID unit iklan Anda sendiri sebelum memublikasikan aplikasi.

Mendapatkan ukuran iklan

Untuk meminta iklan banner dengan ukuran iklan yang benar, ikuti langkah-langkah berikut:

1. Dapatkan lebar layar perangkat dalam piksel kepadatan mandiri (dp) menggunakan MediaQuery.of(context). Jika tidak ingin menggunakan lebar layar penuh, Anda dapat menetapkan lebar sendiri.

2. Gunakan metode statis yang sesuai pada class AdSize untuk mendapatkan objek AdSize. Misalnya, gunakan AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) untuk mendapatkan ukuran iklan untuk orientasi saat ini.

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

Memuat iklan

Contoh berikut membuat instance iklan banner:

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

Peristiwa iklan banner

Melalui penggunaan BannerAdListener, Anda dapat memproses peristiwa siklus proses, seperti saat iklan dimuat. Contoh ini mengimplementasikan setiap metode dan mencatat pesan ke konsol:

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

Memperbarui iklan

Jika mengonfigurasi unit iklan untuk dimuat ulang, Anda tidak perlu meminta iklan lain saat iklan gagal dimuat. Google Mobile Ads SDK mengikuti kecepatan refresh apa pun yang Anda tentukan di UI AdMob. Jika Anda belum mengaktifkan refresh, buat permintaan baru. Untuk mengetahui detail selengkapnya tentang pembaruan unit iklan, seperti menetapkan kecepatan refresh, lihat Menggunakan pembaruan otomatis untuk iklan Banner.

Catatan: Saat menetapkan kecepatan refresh di UI AdMob, pemuatan ulang otomatis hanya terjadi jika banner terlihat di layar.

Menampilkan iklan banner

Untuk menampilkan BannerAd sebagai widget, Anda harus membuat instance AdWidget dengan iklan yang didukung setelah memanggil load(). Anda dapat membuat widget sebelum memanggil load(), tetapi load() harus dipanggil sebelum menambahkannya ke hierarki widget.

AdWidget mewarisi dari class Widget Flutter dan dapat digunakan seperti widget lainnya. Di iOS, pastikan Anda menempatkan widget dalam widget dengan lebar dan tinggi yang ditentukan. Jika tidak, iklan Anda mungkin tidak ditampilkan. BannerAd dapat ditempatkan dalam penampung dengan ukuran yang cocok dengan iklan:

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

Iklan harus dihapus jika akses ke iklan tersebut tidak lagi diperlukan. Praktik terbaik untuk waktu memanggil dispose() adalah setelah AdWidget dihapus dari hierarki widget atau dalam callback BannerAdListener.onAdFailedToLoad().

Selesai. Aplikasi Anda sekarang siap menampilkan iklan banner.

Batasan scroll di Android 9 dan yang lebih lama

Kami menyadari bahwa beberapa perangkat lama atau yang kurang canggih yang menjalankan Android 9 atau yang lebih lama mungkin memiliki performa yang kurang optimal saat menampilkan iklan banner inline dalam tampilan scroll. Sebaiknya hanya gunakan jenis banner ini di Android 10 atau yang lebih baru. Banner posisi tetap seperti banner berjangkar tidak terpengaruh dan dapat digunakan dengan performa optimal di semua level Android API.

Contoh lengkap di GitHub

Lihat contoh lengkap integrasi banner yang dibahas di halaman ini di banner_example.

Pelajari jenis banner lainnya

Pelajari jenis banner lain yang ditentukan di bagian ini untuk aplikasi Flutter Anda.

Banner adaptif inline

Banner adaptif inline memiliki tinggi variabel dan lebih besar serta lebih tinggi dibandingkan dengan banner adaptif anchor. Banner adaptif inline direkomendasikan dibandingkan iklan banner adaptif anchor untuk aplikasi yang menempatkan iklan banner di konten yang dapat di-scroll. Untuk mengetahui detail selengkapnya, lihat banner adaptif inline.

Banner yang dapat diciutkan

Iklan banner yang dapat diciutkan adalah iklan banner yang awalnya ditampilkan sebagai overlay yang lebih besar, dengan tombol untuk menciutkan iklan ke ukuran yang lebih kecil. Pertimbangkan untuk menggunakan banner ini untuk mengoptimalkan performa Anda lebih lanjut. Untuk detail selengkapnya, lihat iklan banner yang dapat diciutkan.