Mẫu gốc là chế độ xem mã hoàn chỉnh cho quảng cáo gốc của bạn, được thiết kế để mang lại hiệu quả cao và có thể dễ dàng sửa đổi. Với các mẫu gốc, trình bổ trợ cung cấp các bố cục tạo sẵn cho Android và iOS cũng như có thể tuỳ chỉnh kiểu của thành phần gốc bằng cách sử dụng Dart API.
Hướng dẫn này trình bày cách sử dụng API Dart để cách điệu cơ bản lượt xem nền tảng và hiển thị quảng cáo.
Điều kiện tiên quyết
- Flutter phiên bản 2.4.0 trở lên.
- Xem hết Hướng dẫn bắt đầu sử dụng.
- Làm quen với các lựa chọn cho quảng cáo gốc.
Luôn thử nghiệm bằng quảng cáo thử nghiệm
Khi tạo và thử nghiệm ứng dụng, hãy nhớ sử dụng quảng cáo thử nghiệm thay vì quảng cáo thực tế. Cách dễ nhất để tải quảng cáo thử nghiệm là sử dụng mã đơn vị quảng cáo thử nghiệm cho quảng cáo gốc:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Các đơn vị quảng cáo thử nghiệm được định cấu hình để trả về quảng cáo thử nghiệm cho mọi yêu cầu, vì vậy, bạn có thể dùng chúng trong ứng dụng của mình khi lập trình, thử nghiệm và gỡ lỗi—chỉ cần đảm bảo bạn thay thế chúng bằng ID đơn vị quảng cáo của riêng mình trước xuất bản ứng dụng của bạn.
Tải quảng cáo
Ví dụ sau đây tải một quảng cáo gốc bằng cách sử dụng quảng cáo gốc có kích thước medium
mẫu:
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();
}
}
Xem
NativeTemplateStyle
và
NativeTemplateTextStyle
để biết các lựa chọn tạo kiểu có sẵn.
Tuỳ chỉnh quảng cáo
Khi tuỳ chỉnh quảng cáo gốc bằng các mẫu gốc, cấu hình giao diện người dùng của quảng cáo
sẽ nằm trong lớp NativeTemplateStyle
, cho phép bạn tạo kiểu cho toàn bộ
quảng cáo gốc trong mã Dart.
Kích thước mẫu
Mẫu quảng cáo gốc Flutter có hai loại: TemplateType.small
và
TemplateType.medium
. Mẫu nhỏ rất lý tưởng cho TableView
hoặc
GridView
, đối với quảng cáo trong nguồn cấp dữ liệu hoặc bất kỳ vị trí nào mà bạn cần một chế độ xem quảng cáo hình chữ nhật mỏng. Chiến lược phát hành đĩa đơn
mẫu trung bình chiếm từ 50% đến 3/4 lượt xem trang, tức là
lý tưởng cho trang đích hoặc trang màn hình chờ.
Nhỏ | |
---|---|
Android |
iOS |
Phương tiện | |
Android |
iOS |
Sự kiện quảng cáo gốc
Để nhận thông báo về những sự kiện có liên quan đến lượt tương tác với quảng cáo gốc, hãy sử dụng
listener
thuộc tính của quảng cáo. Sau đó, hãy triển khai
NativeAdListener
để nhận lệnh gọi lại sự kiện quảng cáo.
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();
}
}
Quảng cáo hiển thị hình ảnh
Để hiển thị NativeAd
dưới dạng một tiện ích, bạn phải tạo thực thể cho một
AdWidget
bằng một quảng cáo được hỗ trợ sau khi gọi load()
. Bạn có thể tạo tiện ích trước khi
gọi load()
, nhưng load()
phải được gọi trước khi thêm nó vào tiện ích
cây xanh.
AdWidget
kế thừa từ lớp Widget
của Flutter và có thể được sử dụng như bất kỳ lớp nào khác
tiện ích. Trên iOS, hãy nhớ đặt tiện ích này trong vùng chứa có
chiều rộng và chiều cao. Nếu không, quảng cáo của bạn có thể sẽ không hiển thị.
// 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!),
);
Vứt bỏ quảng cáo
Đáp
NativeAd
phải được vứt bỏ khi không cần truy cập vào sản phẩm nữa. Phương pháp hay nhất để
thời điểm gọi dispose()
sau AdWidget
được liên kết với quảng cáo gốc
sẽ bị xoá khỏi cây tiện ích và trong AdListener.onAdFailedToLoad()
.
Các bước tiếp theo
- Tìm hiểu thêm về quảng cáo gốc trong quảng cáo gốc của chúng tôi cẩm nang.
- Xem chính sách về quảng cáo gốc và nguyên tắc.
- Xem một số câu chuyện thành công của khách hàng: Nghiên cứu điển hình 1! nghiên cứu điển hình 2.