Banner

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

Panduan ini menunjukkan cara mengintegrasikan iklan banner dari AdMob ke dalam aplikasi Flutter. Selain cuplikan dan petunjuk kode, panduan ini juga menyertakan informasi tentang cara menentukan ukuran banner dengan benar.

Selalu uji dengan iklan percobaan

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

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

ca-app-pub-3940256099942544/6300978111

ca-app-pub-3940256099942544/2934735716

Unit iklan percobaan dikonfigurasi guna menampilkan iklan percobaan 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.

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

Ukuran spanduk

Tabel di bawah mencantumkan ukuran banner standar.

Untuk menentukan ukuran banner kustom, tetapkan AdSize pilihan Anda:

final AdSize adSize = AdSize(300, 50);

Peristiwa iklan banner

Melalui penggunaan BannerAdListener, Anda dapat memproses peristiwa siklus proses, seperti saat iklan dimuat. Contoh ini mengimplementasikan setiap metode dan mencatat pesan dalam log 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/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();
  }
}

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 widget hierarki.

AdWidget mewarisi dari class Widget Flutter dan dapat digunakan seperti class Widget lainnya . Di iOS, pastikan Anda menempatkan widget di widget dengan lebar dan tinggi. Jika tidak, iklan Anda mungkin tidak dapat ditampilkan. BannerAd dapat ditempatkan dalam penampung dengan ukuran yang sesuai 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 dibuang jika akses ke iklan 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 untuk 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 menggunakan jenis banner ini di Android 10 atau yang lebih baru. Banner posisi tetap seperti banner yang ditautkan tidak terpengaruh dan dapat digunakan dengan performa optimal di semua level Android API.

Contoh lengkap di GitHub

Banner