Banner

Pilih platform: Android iOS Unity Flutter

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

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

Iklan banner adaptif yang di-anchor adalah iklan rasio aspek 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 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 lakukan pengujian dengan iklan percobaan

Saat membuat 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 membuat kode, menguji, dan men-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(),
);
main.dart

Memuat iklan

Contoh berikut memuat iklan banner:

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

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  BannerAd(
    adUnitId: _adUnitId,
    request: const AdRequest(),
    size: size,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        // Called when an ad is successfully received.
        debugPrint("Ad was loaded.");
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        // Called when an ad request failed.
        debugPrint("Ad failed to load with error: $err");
        ad.dispose();
      },
    ),
  ).load();
}
main.dart

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

onAdOpened: (Ad ad) {
  // Called when an ad opens an overlay that covers the screen.
  debugPrint("Ad was opened.");
},
onAdClosed: (Ad ad) {
  // Called when an ad removes an overlay that covers the screen.
  debugPrint("Ad was closed.");
},
onAdImpression: (Ad ad) {
  // Called when an impression occurs on the ad.
  debugPrint("Ad recorded an impression.");
},
onAdClicked: (Ad ad) {
  // Called when an a click event occurs on the ad.
  debugPrint("Ad was clicked.");
},
onAdWillDismissScreen: (Ad ad) {
  // iOS only. Called before dismissing a full screen view.
  debugPrint("Ad will be dismissed.");
},
main.dart

Memperbarui iklan

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

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 diwarisi dari class Widget Flutter dan dapat digunakan seperti widget lainnya. Di iOS, pastikan Anda menempatkan widget di 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!),
      ),
    ),
  ),
main.dart

Iklan harus dihapus saat akses ke iklan tidak lagi diperlukan. Praktik terbaik untuk waktu pemanggilan dispose() adalah setelah AdWidget dihapus dari hierarki widget atau di callback BannerAdListener.onAdFailedToLoad().

Selesai. Aplikasi Anda kini siap menampilkan iklan banner.

Batasan men-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 yang dapat di-scroll. Sebaiknya hanya gunakan jenis banner ini di Android 10 atau yang lebih baru. Banner posisi tetap seperti banner yang di-anchor tidak terpengaruh dan dapat digunakan dengan performa optimal di semua level API Android.

Contoh lengkap di GitHub

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

Mempelajari jenis banner lainnya

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

Banner adaptif inline

Banner adaptif inline memiliki tinggi variabel dan merupakan banner yang lebih besar dan lebih tinggi dibandingkan dengan banner adaptif anchor. Banner adaptif inline direkomendasikan daripada 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. Sebaiknya gunakan banner ini untuk mengoptimalkan performa Anda lebih lanjut. Untuk mengetahui detail selengkapnya, lihat iklan banner yang dapat diciutkan.