Biểu ngữ

Quảng cáo biểu ngữ chiếm một phần 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ị. Những quảng cáo này nằm 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.

Tài liệu hướng dẫn này trình bày cách tích hợp quảng cáo biểu ngữ của AdMob vào một ứng dụng Flutter. Ngoài các đoạn mã và thông tin hướng dẫn, bài viết này còn cung cấp thông tin về cách xác định kích thước biểu ngữ sao cho phù hợp.

Luôn kiểm tra 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ữ:

ca-app-pub-3940256099942544/6300978111

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 các đơn vị quảng cáo đó 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 nhớ thay thế các mã này bằng mã đơn vị quảng cáo của mình trước khi xuất bản ứng dụng.

Tải 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ữ

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

Để xác định kích thước biểu ngữ tuỳ chỉnh, hãy đặt AdSize mà bạn ưu tiê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 một quảng cáo được tải. Sau đây là ví dụ 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/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 tiện ích, bạn phải tạo 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 bạn 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!),
      ),
    ),
  )
}
...

Bạn phải loại bỏ quảng cáo khi không còn cần quyền truy cập vào quảng cáo đó. Phương pháp hay nhất về thời điểm gọi dispose() là 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! Giờ đây, ứ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 kém hiệu quả hơn chạy Android 9 trở xuống có thể có hiệu suất kém 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 sử dụng các loại biểu ngữ này trên Android 10 trở lên. Các biểu ngữ có vị trí cố định (chẳng hạn như biểu ngữ cố định) sẽ không bị ảnh hưởng và có thể dùng để đạt hiệu suất tối ưu ở mọi cấp độ API Android.

Ví dụ đầy đủ trên GitHub

Quảng cáo biểu ngữ