Quảng cáo biểu ngữ chiếm một vùng trong bố cục của ứng dụng, ở trên cùng hoặc dưới cùng của màn hình thiết bị. Những quảng cáo này lưu lại trên màn hình trong khi người dùng tương tác với ứng dụng, và có thể tự động làm mới sau một khoảng thời gian nhất định.
Hướng dẫn này giúp bạn bắt đầu sử dụng quảng cáo biểu ngữ thích ứng cố định. Biểu ngữ thích ứng cố định tối ưu hoá kích thước quảng cáo cho từng thiết bị bằng chiều rộng quảng cáo mà bạn chỉ định.
Quảng cáo biểu ngữ thích ứng cố định là quảng cáo có tỷ lệ khung hình cố định thay vì quảng cáo có kích thước cố định. Tỷ lệ khung hình tương tự như 320x50. Sau khi bạn chỉ định chiều rộng tối đa có thể, SDK quảng cáo trên thiết bị di động của Google sẽ trả về một quảng cáo có chiều cao tối ưu cho chiều rộng đó. Chiều cao tối ưu cho quảng cáo vẫn không đổi trong các yêu cầu quảng cáo khác nhau và nội dung xung quanh quảng cáo vẫn giữ nguyên khi quảng cáo làm mới.
Luôn thử nghiệm bằng quảng cáo thử nghiệm
Khi bạn 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 đang chạy trong thực tế. Chúng tôi có thể tạm ngưng tài khoản của bạn nếu bạn không làm như vậy.
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 dành riêng cho quảng cáo biểu ngữ:
Android
ca-app-pub-3940256099942544/9214589741
iOS
ca-app-pub-3940256099942544/2435281174
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à bạn có thể sử dụng các đơn vị quảng cáo này trong ứng dụng của mình khi lập trình, thử nghiệm và gỡ lỗi. Bạn chỉ cần đảm bảo rằng bạn sẽ thay thế các mã này bằng mã đơn vị quảng cáo riêng của mình trước khi xuất bản ứng dụng.
Lấy kích thước quảng cáo
Để yêu cầu một quảng cáo biểu ngữ có kích thước quảng cáo phù hợp, hãy làm theo các bước sau:
Lấy chiều rộng màn hình của thiết bị theo đơn vị pixel không phụ thuộc vào mật độ (dp) bằng cách sử dụng
MediaQuery.of(context). Nếu không muốn sử dụng chiều rộng toàn màn hình, bạn có thể đặt chiều rộng riêng.Sử dụng phương thức tĩnh thích hợp trên lớp
AdSizeđể lấy một đối tượngAdSize. Ví dụ: sử dụngAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)để lấy kích thước quảng cáo cho hướng hiện tại.
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
Tải một quảng cáo
Sau đây là ví dụ về một đoạn mã tạo quảng cáo biểu ngữ:
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/9214589741'
: 'ca-app-pub-3940256099942544/2435281174';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: size,
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();
}
}
Sự kiện quảng cáo biểu ngữ
Khi sử dụng BannerAdListener, bạn có thể theo dõi các sự kiện trong vòng đời của quảng cáo, chẳng hạn như
khi người dùng tải một quảng cáo. Sau đây là ví dụ về cách triển khai từng phương thức và ghi nhật ký thông báo vào bảng điều khiển:
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/9214589741'
: 'ca-app-pub-3940256099942544/2435281174';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: size,
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();
}
}
Làm mới quảng cáo
Nếu đã định cấu hình đơn vị quảng cáo để làm mới, thì bạn không cần yêu cầu một quảng cáo khác khi quảng cáo không tải được. SDK Quảng cáo của Google trên thiết bị di động tuân thủ mọi tốc độ làm mới mà bạn đã chỉ định trong giao diện người dùng AdMob. Nếu chưa kích hoạt tính năng làm mới, hãy đưa ra yêu cầu mới. Để biết thêm thông tin về tính năng làm mới đơn vị quảng cáo, chẳng hạn như cách đặt tốc độ làm mới, hãy xem bài viết Sử dụng tính năng tự động làm mới cho quảng cáo biểu ngữ.
Hiển thị quảng cáo biểu ngữ
Để hiển thị BannerAd dưới dạng một tiện ích, bạn phải tạo AdWidget với 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 phải gọi load() trước khi thêm tiện ích đó vào cây tiện ích.
AdWidget kế thừa từ lớp Tiện ích của Flutter và có thể được sử dụng như bất kỳ tiện ích nào khác. Trên iOS, hãy nhớ đặt tiện ích này trong một tiện ích đã được chỉ định 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ị. Bạn có thể đặt BannerAd trong một vùng chứa có kích thước phù hợp với quảng cáo:
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!),
),
),
)
}
Quảng cáo phải được xử lý khi không cần truy cập vào quảng cáo đó nữa. Bạn nên gọi dispose() sau khi AdWidget bị xoá khỏi cây tiện ích hoặc trong lệnh gọi lại BannerAdListener.onAdFailedToLoad().
Vậy là xong! Bây giờ, ứng dụng của bạn đã sẵn sàng hiển thị quảng cáo biểu ngữ.
Giới hạn cuộn trên Android 9 trở xuống
Chúng tôi nhận thấy một số thiết bị cũ hoặc có hiệu suất thấp chạy Android 9 trở xuống có thể có hiệu suất không tối ưu khi hiển thị quảng cáo biểu ngữ trong dòng trong các khung hiển thị có thể cuộn. Bạn chỉ nên sử dụng các loại biểu ngữ này trên Android 10 trở lên. Các biểu ngữ ở vị trí cố định (chẳng hạn như biểu ngữ cố định) không bị ảnh hưởng và có thể được dùng với hiệu suất tối ưu trên mọi cấp độ API Android.
Ví dụ hoàn chỉnh trên GitHub
Hãy xem ví dụ đầy đủ về việc tích hợp biểu ngữ được đề cập trong trang này trong banner_example.
Tìm hiểu về các loại biểu ngữ khác
Làm quen với các loại biểu ngữ khác được xác định trong phần này cho ứng dụng Flutter của bạn.
Biểu ngữ thích ứng cùng dòng
Biểu ngữ thích ứng cùng dòng có chiều cao thay đổi và là biểu ngữ lớn hơn, cao hơn so với biểu ngữ thích ứng cố định. Bạn nên dùng biểu ngữ thích ứng cùng dòng thay vì quảng cáo biểu ngữ thích ứng cố định cho những ứng dụng đặt quảng cáo biểu ngữ trong nội dung có thể cuộn. Để biết thêm thông tin chi tiết, hãy xem biểu ngữ thích ứng nội tuyến.
Biểu ngữ có thể thu gọn
Quảng cáo biểu ngữ có thể thu gọn là quảng cáo biểu ngữ ban đầu xuất hiện dưới dạng một lớp phủ lớn hơn, kèm theo một nút để thu gọn quảng cáo về kích thước nhỏ hơn. Hãy cân nhắc sử dụng biểu ngữ này để tối ưu hoá thêm hiệu suất. Để biết thêm thông tin, hãy xem quảng cáo biểu ngữ có thể thu gọn.