Quảng cáo biểu ngữ

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.

Bài viết này sẽ hướng dẫn cách tích hợp quảng cáo biểu ngữ từ AdMob vào một ứng dụng Flutter. Ngoài các đoạn mã và nội dung hướng dẫn, bài viết này còn trình bày cách xác định kích thước biểu ngữ cho phù hợp.

Luôn kiểm tra bằng quảng cáo thử nghiệm

Khi tạo và thử nghiệm ứng dụng, hãy đảm bảo rằng bạn sử dụng quảng cáo thử nghiệm thay vì quảng cáo đang chạy thực tế. Chúng tôi sẽ tạm ngưng tài khoản của bạn nếu bạn không sử dụng quảng cáo thử nghiệm.

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ữ:

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.

Tạo quảng cáo

BannerAd yêu cầu phải có adUnitId, AdSize, AdRequestBannerAdListener. Sau đây là ví dụ về một đoạn mã tạo quảng cáo biểu ngữ:

final BannerAd myBanner = BannerAd(
  adUnitId: '<ad unit ID>',
  size: AdSize.banner,
  request: AdRequest(),
  listener: BannerAdListener(),
);

Dưới đây là bảng liệt kê các kích thước biểu ngữ chuẩn.

Kích thước đo bằng dp (RxC) Nội dung 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 Hình chữ nhật dài leaderboard
Chiều rộng màn hình x 32|50|90 Biểu ngữ thông minh Sử dụng getSmartBanner(Orientation)

Để xác định kích thước biểu ngữ tùy chỉnh, hãy đặt AdSize mà bạn muốn:

final AdSize adSize = AdSize(300, 50);

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:

final BannerAdListener listener = BannerAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
);

Tải quảng cáo

Sau khi BannerAd được tạo, load() phải được gọi trước khi có thể hiển thị trên màn hình:

myBanner.load();

Hiển thị quảng cáo

Để 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.

final AdWidget adWidget = AdWidget(ad: myBanner);

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:

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: myBanner.size.width.toDouble(),
  height: myBanner.size.height.toDouble(),
);

Sau khi gọi load(), quảng cáo phải gọi dispose() khi quyền truy cập vào quảng cáo đó không còn cần thiết nữa. Bạn nên gọi dispose() sau khi AdWidget bị xóa khỏi cây tiện ích hoặc trong lệnh gọi lại AdListener.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ữ.