Quảng cáo xen kẽ

Quảng cáo xen kẽ là quảng cáo toàn màn hình, che phủ giao diện của ứng dụng lưu trữ. Quảng cáo này thường xuất hiện ở các điểm chuyển tiếp tự nhiên trong quy trình hoạt động của ứng dụng, chẳng hạn như giữa các hoạt động hoặc trong thời gian tạm dừng giữa các cấp độ của trò chơi. Khi một ứng dụng hiển thị quảng cáo xen kẽ, người dùng có thể chọn nhấn vào quảng cáo và tiếp tục chuyển đến trang đích của quảng cáo đó hoặc đóng quảng cáo và quay lại ứng dụng.

Hướng dẫn này giải thích cách tích hợp quảng cáo xen kẽ vào một ứng dụng Flutter.

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 xen kẽ:

Android

ca-app-pub-3940256099942544/1033173712

iOS

ca-app-pub-3940256099942544/4411468910

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, chạy thử nghiệm và gỡ lỗi. Bạn chỉ cần nhớ thay thế 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 một quảng cáo

Ví dụ sau đây tải một quảng cáo xen kẽ:

InterstitialAd.load(
  adUnitId: "_adUnitId",
  request: const AdRequest(),
  adLoadCallback: InterstitialAdLoadCallback(
    onAdLoaded: (InterstitialAd ad) {
      // Called when an ad is successfully received.
      debugPrint('Ad was loaded.');
      // Keep a reference to the ad so you can show it later.
      _interstitialAd = ad;
    },
    onAdFailedToLoad: (LoadAdError error) {
      // Called when an ad request failed.
      debugPrint('Ad failed to load with error: $error');
    },
  ),
);

Thay thế _adUnitId bằng mã đơn vị quảng cáo của riêng bạn.

Sự kiện quảng cáo xen kẽ

Thông qua việc sử dụng FullScreenContentCallback, 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 hiển thị hoặc bị loại bỏ. Đặt InterstitialAd.fullScreenContentCallback trước khi hiển thị quảng cáo để nhận thông báo về những sự kiện này. Ví dụ này triển khai từng phương thức:

ad.fullScreenContentCallback = FullScreenContentCallback(
  onAdShowedFullScreenContent: (ad) {
    // Called when the ad showed the full screen content.
    debugPrint('Ad showed full screen content.');
  },
  onAdFailedToShowFullScreenContent: (ad, err) {
    // Called when the ad failed to show full screen content.
    debugPrint('Ad failed to show full screen content with error: $err');
    // Dispose the ad here to free resources.
    ad.dispose();
  },
  onAdDismissedFullScreenContent: (ad) {
    // Called when the ad dismissed full screen content.
    debugPrint('Ad was dismissed.');
    // Dispose the ad here to free resources.
    ad.dispose();
  },
  onAdImpression: (ad) {
    // Called when an impression occurs on the ad.
    debugPrint('Ad recorded an impression.');
  },
  onAdClicked: (ad) {
    // Called when a click is recorded for an ad.
    debugPrint('Ad was clicked.');
  },
);

Hiển thị quảng cáo xen kẽ

InterstitialAd xuất hiện dưới dạng Overlay ở trên cùng của mọi nội dung ứng dụng và được đặt tĩnh; do đó, bạn không thể thêm vào cây tiện ích Flutter. Bạn có thể chọn thời điểm hiển thị quảng cáo bằng cách gọi show().

_interstitialAd?.show();

Sau khi show() được gọi, Ad hiển thị theo cách này sẽ không thể bị loại bỏ theo phương thức lập trình và yêu cầu hoạt động đầu vào của người dùng. InterstitialAd chỉ có thể xuất hiện một lần. Các lệnh gọi tiếp theo để hiện sẽ kích hoạt onAdFailedToShowFullScreenContent.

Bạn phải loại bỏ một 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 để gọi dispose() là trong các lệnh gọi lại FullScreenContentCallback.onAdDismissedFullScreenContent và FullScreenContentCallback.onAdFailedToShowFullScreenContent.

Vậy là xong! Ứng dụng của bạn hiện đã sẵn sàng hiển thị quảng cáo xen kẽ.

Các bước tiếp theo

Ví dụ hoàn chỉnh trên GitHub

Để xem ví dụ đầy đủ, hãy xem bản minh hoạ API.