Quảng cáo biểu ngữ chiếm một vị trí trong bố cục của ứng dụng, ở trên cùng hoặc dưới cùng màn hình thiết bị. Quảng cáo biểu ngữ vẫn hiển thị 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 trình bày cách tích hợp quảng cáo biểu ngữ từ AdMob vào Ứng dụng Flutter. Ngoài các đoạn mã và hướng dẫn, thẻ này còn bao gồm thông tin về cách xác định kích thước biểu ngữ cho phù hợp.
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ế. 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 biểu ngữ:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
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 chúng trong ứng dụng của riêng mình khi lập trình, thử nghiệm và gỡ lỗi. Bạn chỉ cần nhớ thay thế các mã này bằng mã đơn vị quảng cáo của riêng mình trước khi xuất bản .
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/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(); } }
Kích thước biểu ngữ
Bảng bên dưới liệt kê các kích thước biểu ngữ chuẩn.
Kích thước tính bằng dp (RxC) | Mô tả | Hằng số AdSize |
---|---|---|
320x50 | Biểu ngữ chuẩn | banner
|
320x100 | Biểu ngữ lớn | largeBanner
|
320x250 | Hình chữ nhật Trung bình | mediumRectangle
|
468x60 | Biểu ngữ có kích thước đầy đủ | fullBanner
|
728x90 | Bảng dẫn | leaderboard
|
Chiều rộng đã cung cấp x Chiều cao thích ứng | Biểu ngữ thích ứng | Không áp dụng |
Để xác định kích thước biểu ngữ tuỳ chỉnh, hãy đặt AdSize
mà bạn muốn:
final AdSize adSize = AdSize(300, 50);
Sự kiện của 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, chẳng hạn như
khi quảng cáo được tải. Ví dụ này triển khai từng phương thức và ghi lại một 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/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(); } }
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 thực thể cho 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 Tiện ích của Flutter và có thể sử dụng như bất kỳ lớp nào khác
tiện ích. Trên iOS, hãy đảm bảo bạn đặt tiện ích này trong một tiện ích 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ị. Một BannerAd
có thể được đặt trong 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!), ), ), ) } ...
Bạn phải loại bỏ quảng cáo khi không cần truy cập vào quảng cáo đó nữa. Phương pháp hay nhất
thời điểm gọi dispose()
là sau khi AdWidget
bị xoá khỏi
cây tiện ích hoặc trong 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 biết rằng một số thiết bị cũ hoặc thấp hơn chạy Android 9 hoặc sớm hơn có thể có hiệu suất dưới mức tối ưu khi hiển thị quảng cáo biểu ngữ cùng dòng trong chế độ xem cuộn. Bạn chỉ nên bằng cách sử dụng các loại biểu ngữ này trên Android 10 trở lên. Biểu ngữ có vị trí cố định như vì biểu ngữ cố định sẽ không bị ảnh hưởng và có thể được sử dụng với hiệu suất tối ưu trên tất cả cấp độ API Android.