Template native adalah tampilan lengkap kode untuk iklan native Anda, yang dirancang untuk implementasi dan mudah dimodifikasi. Dengan template native, plugin ini menyediakan tata letak bawaan Android dan iOS untuk Anda, dan Anda bisa menyesuaikan gaya aset native menggunakan Dart API.
Panduan ini menunjukkan cara menggunakan Dart API untuk memberi sentuhan gaya pada tampilan platform dan untuk merender iklan.
Prasyarat
- Flutter 2.4.0 atau yang lebih tinggi.
- Selesaikan Panduan memulai.
- Pelajari opsi iklan native.
Selalu uji dengan iklan percobaan
Saat membuat dan menguji aplikasi, pastikan Anda menggunakan iklan percobaan, bukan iklan produksi secara langsung. Cara termudah untuk memuat iklan percobaan adalah dengan menggunakan ID unit iklan percobaan untuk iklan native:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Unit iklan percobaan dikonfigurasi guna menampilkan iklan percobaan untuk setiap permintaan, jadi Anda dapat menggunakannya di aplikasi Anda sendiri saat melakukan {i>coding<i}, menguji, dan proses debug—cukup pastikan Anda menggantinya dengan ID unit iklan Anda sendiri sebelum memublikasikan aplikasi Anda.
Muat iklan
Contoh berikut memuat iklan native menggunakan native berukuran medium
{i>template<i}:
class NativeExampleState extends State<NativeExample> {
NativeAd? nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final String _adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/2247696110'
: 'ca-app-pub-3940256099942544/3986624511';
/// Loads a native ad.
void loadAd() {
_nativeAd = NativeAd(
adUnitId: _adUnitId,
listener: NativeAdListener(
onAdLoaded: (ad) {
debugPrint('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
debugPrint('$NativeAd failed to load: $error');
ad.dispose();
},
),
request: const AdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
Lihat
NativeTemplateStyle
dan
NativeTemplateTextStyle
untuk opsi gaya yang tersedia.
Sesuaikan iklan
Saat menyesuaikan iklan native menggunakan template native, konfigurasi UI iklan Anda
akan aktif di class NativeTemplateStyle, sehingga Anda dapat menata gaya seluruh
iklan native dalam kode Dart.
Ukuran template
Template iklan native Flutter tersedia dalam dua jenis: TemplateType.small dan
TemplateType.medium. Template kecil ini ideal untuk TableView atau
GridView, untuk iklan dalam feed atau di mana pun Anda memerlukan tampilan iklan persegi panjang tipis. Tujuan
berarti template medium adalah setengah hingga tiga perempat tampilan halaman,
ideal untuk halaman landing atau pembuka.
| Kecil | |
|---|---|
 Android |
 iOS |
| Sedang | |
 Android |
 iOS |
Peristiwa iklan native
Agar diberi tahu tentang peristiwa yang terkait dengan interaksi iklan native, gunakan
listener
iklan. Kemudian, implementasikan
NativeAdListener
untuk menerima callback peristiwa iklan.
class NativeExampleState extends State<NativeExample> {
NativeAd? _nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final String _adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/2247696110'
: 'ca-app-pub-3940256099942544/3986624511';
/// Loads a native ad.
void loadAd() {
_nativeAd = NativeAd(
adUnitId: _adUnitId,
listener: NativeAdListener(
onAdLoaded: (ad) {
print('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
print('$NativeAd failedToLoad: $error');
ad.dispose();
},
// Called when a click is recorded for a NativeAd.
onAdClicked: (ad) {},
// Called when an impression occurs on the ad.
onAdImpression: (ad) {},
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (ad) {},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (ad) {},
// For iOS only. Called before dismissing a full screen view
onAdWillDismissScreen: (ad) {},
// Called when an ad receives revenue value.
onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
),
request: const AdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
Iklan Display
Untuk menampilkan NativeAd 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 lainnya
. Di iOS, pastikan Anda menempatkan widget dalam container dengan
lebar dan tinggi. Jika tidak, iklan Anda mungkin tidak dapat ditampilkan.
// Small template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 90, // minimum recommended height
maxWidth: 400,
maxHeight: 200,
),
child: AdWidget(ad: _nativeAd!),
);
// Medium template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 320, // minimum recommended height
maxWidth: 400,
maxHeight: 400,
),
child: AdWidget(ad: _nativeAd!),
);
Buang iklan
J
NativeAd
harus dibuang jika akses
ke data tersebut tidak lagi diperlukan. Praktik terbaik untuk
kapan harus memanggil dispose() adalah setelah AdWidget yang dikaitkan dengan iklan native
dihapus dari hierarki widget dan di AdListener.onAdFailedToLoad()
.
Langkah berikutnya
- Pelajari lebih lanjut iklan native di iklan native kami playbook yang sesuai.
- Lihat kebijakan iklan Native dan pedoman kami.
- Lihat beberapa kisah sukses pelanggan: Studi kasus 1, studi kasus 2.