Iklan banner menempati suatu tempat dalam tata letak aplikasi, baik di bagian atas maupun bawah layar perangkat. Iklan tetap berada di layar saat pengguna berinteraksi dengan aplikasi, dan dapat otomatis dimuat ulang setelah jangka waktu tertentu.
Panduan ini menunjukkan cara mengintegrasikan iklan banner dari AdMob ke aplikasi Flutter. Selain cuplikan kode dan petunjuk, panduan ini juga berisi informasi tentang ukuran banner dengan benar.
Selalu uji 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 menggunakan ID unit iklan pengujian khusus kami untuk banner:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
Unit iklan pengujian dikonfigurasi untuk menampilkan iklan percobaan untuk setiap permintaan, dan Anda bebas menggunakannya di aplikasi Anda sendiri saat melakukan coding, pengujian, serta proses debug. Cukup 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.
Ukuran dalam dp (LxT) | Deskripsi | Konstanta AdSize |
---|---|---|
320x50 | Spanduk Standar | banner
|
320x100 | Banner Besar | largeBanner
|
320x250 | Persegi Panjang Sedang | mediumRectangle
|
468x60 | Banner Ukuran Penuh | fullBanner
|
728x90 | Papan peringkat | leaderboard
|
Lebar yang disediakan x Tinggi adaptif | Banner adaptif | T/A |
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 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 hierarki widget.
AdWidget
mewarisi 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 tidak dapat ditayangkan. 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 dibuang jika aksesnya tidak lagi diperlukan. Praktik terbaik
untuk 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 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 anchor tidak terpengaruh dan dapat digunakan dengan performa optimal di semua API level Android.