Thêm quảng cáo AdMob vào ứng dụng Flutter

1. Giới thiệu

Sản phẩm bạn sẽ tạo ra

Lớp học lập trình này sẽ hướng dẫn bạn cách thêm biểu ngữ, quảng cáo xen kẽ và quảng cáo có tặng thưởng vào ứng dụng có tên là Bài kiểm tra bản vẽ tuyệt vời, một trò chơi cho phép người chơi đoán tên của bản vẽ.

Nếu bạn gặp vấn đề (lỗi trong đoạn mã, lỗi ngữ pháp, từ ngữ không rõ ràng) khi thực hiện lớp học lập trình này, vui lòng báo cáo vấn đề bằng cách nhấp vào đường liên kết Báo cáo lỗi ở góc dưới bên trái lớp học lập trình.

Kiến thức bạn sẽ học được

  • Cách định cấu hình trình bổ trợ AdMob cho quảng cáo trên thiết bị di động của Google
  • Cách triển khai quảng cáo biểu ngữ, quảng cáo xen kẽ và quảng cáo có tặng thưởng trong ứng dụng Flutter

Bạn cần có

  • Android Studio 4.1 trở lên
  • Xcode 12 trở lên (để phát triển iOS)

Bạn đánh giá mức độ trải nghiệm của mình với AdMob như thế nào?

Người mới tập Trung cấp Thành thạo

Bạn đánh giá thế nào về mức độ trải nghiệm của mình với Flutter?

Người mới tập Trung cấp Thành thạo

2. Thiết lập môi trường phát triển Flutter

Bạn cần có 2 phần mềm để hoàn thành phòng thí nghiệm này – Flutter SDK và trình chỉnh sửa.

Bạn có thể chạy lớp học lập trình bằng bất kỳ thiết bị nào sau đây:

  • Một thiết bị Android hoặc iOS thực kết nối với máy tính của bạn và đặt ở Chế độ nhà phát triển.
  • Trình mô phỏng iOS (yêu cầu cài đặt công cụ Xcode).
  • Trình mô phỏng Android (yêu cầu thiết lập trong Android Studio).
  • Trình duyệt (cần có Chrome để gỡ lỗi).
  • Dưới dạng ứng dụng Windows, Linux hoặc macOS. Bạn phải phát triển trên nền tảng mà bạn dự định triển khai. Vì vậy, nếu muốn phát triển một ứng dụng Windows dành cho máy tính, bạn phải phát triển trên Windows để truy cập vào chuỗi bản dựng phù hợp. Có các yêu cầu cụ thể theo hệ điều hành được đề cập chi tiết trên docs.flutter.dev/desktop.

Tải mã xuống

Sau khi bạn tải tệp zip xuống, hãy giải nén nội dung của tệp. Bạn sẽ có một thư mục có tên admob-ads-in-flutter-master.

Ngoài ra, bạn có thể sao chép kho lưu trữ GitHub từ dòng lệnh:

$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter

Kho lưu trữ chứa hai thư mục:

  • android_studio_folder.pngstarter – Đoạn mã khởi đầu mà bạn sẽ tạo trong lớp học lập trình này.
  • android_studio_folder.pngcomplete — Đã hoàn tất mã cho lớp học lập trình này.

3. Thiết lập ứng dụng và đơn vị quảng cáo AdMob

Vì Flutter là một SDK đa nền tảng, nên bạn cần thêm một ứng dụng và đơn vị quảng cáo cho cả Android và iOS trong AdMob.

Thiết lập cho Android

Để thiết lập cho Android, bạn cần thêm một ứng dụng Android và tạo đơn vị quảng cáo.

Thêm ứng dụng Android

  1. Trong Bảng điều khiển của AdMob, hãy nhấp vào THÊM ỨNG DỤNG trên trình đơn Ứng dụng.
  2. Khi được hỏi Bạn đã xuất bản ứng dụng trên Google Play hoặc App Store chưa?, hãy nhấp vào KHÔNG.
  3. Nhập Awesome Drawing Quiz vào trường tên ứng dụng rồi chọn Android làm nền tảng.

ddafee37a6f92229.png

  1. Bạn không cần bật chỉ số người dùng để hoàn thành lớp học lập trình này. Tuy nhiên, bạn nên làm như vậy vì việc này giúp bạn hiểu rõ hơn hành vi của người dùng. Nhấp vào THÊM để hoàn tất quy trình này.

b918bf44362813a9.png

Tạo đơn vị quảng cáo

Cách bắt đầu thêm đơn vị quảng cáo vào AdMob:

  1. Chọn Câu đố về bản vẽ tuyệt vời từ trình đơn Ứng dụng trong bảng điều khiển AdMob.
  2. Nhấp vào trình đơn Đơn vị quảng cáo.

Quảng cáo biểu ngữ

  1. Nhấp vào nút THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn định dạng là Biểu ngữ.
  3. Nhập android-adq-banner vào trường Tên đơn vị quảng cáo.
  4. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Quảng cáo xen kẽ

  1. Nhấp vào nút THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn định dạng là Quảng cáo xen kẽ.
  3. Nhập android-adq-interstitial vào trường Tên đơn vị quảng cáo.
  4. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Có tặng thưởng

  1. Nhấp vào nút THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn định dạng là Có tặng thưởng.
  3. Nhập android-adq-rewarded vào trường Tên đơn vị quảng cáo.
  4. Giữ nguyên chế độ mặc định là Cài đặt phần thưởng.
  5. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Thường phải mất vài giờ để một đơn vị quảng cáo mới có thể phân phát quảng cáo.

Nếu bạn muốn thử nghiệm hành vi của quảng cáo ngay lập tức, hãy sử dụng mã ứng dụng thử nghiệm và mã đơn vị quảng cáo được liệt kê trong bảng Mã ứng dụng Android/Mã đơn vị quảng cáo và bảng Mã ứng dụng/Mã đơn vị quảng cáo dành cho iOS.

Thiết lập cho iOS

Để thiết lập quảng cáo cho iOS, bạn cần thêm một ứng dụng iOS và tạo đơn vị quảng cáo.

Thêm ứng dụng iOS

  1. Trong Bảng điều khiển của AdMob, hãy nhấp vào THÊM ỨNG DỤNG trên trình đơn Ứng dụng.
  2. Khi được hỏi Bạn đã xuất bản ứng dụng trên Google Play hoặc App Store chưa?, hãy nhấp vào KHÔNG.
  3. Nhập Awesome Drawing Quiz vào trường tên ứng dụng rồi chọn iOS làm nền tảng.

93e7f9f114232402.pngS

  1. Bạn không cần bật chỉ số người dùng để hoàn thành lớp học lập trình này. Tuy nhiên, bạn nên làm như vậy vì việc này giúp bạn hiểu rõ hơn hành vi của người dùng. Nhấp vào THÊM để hoàn tất quy trình này.

b918bf44362813a9.png

Tạo đơn vị quảng cáo

Cách thêm đơn vị quảng cáo:

  1. Chọn ứng dụng Câu đố về bản vẽ tuyệt vời từ trình đơn Ứng dụng trong bảng điều khiển AdMob.
  2. Nhấp vào trình đơn Đơn vị quảng cáo.

Quảng cáo biểu ngữ

  1. Nhấp vào nút THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn định dạng là Biểu ngữ.
  3. Nhập ios-adq-banner vào trường Tên đơn vị quảng cáo.
  4. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Quảng cáo xen kẽ

  1. Nhấp vào nút THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn định dạng là Quảng cáo xen kẽ.
  3. Nhập ios-adq-interstitial vào trường Tên đơn vị quảng cáo.
  4. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Có tặng thưởng

  1. Nhấp vào nút THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn định dạng là Có tặng thưởng.
  3. Nhập ios-adq-rewarded vào trường Tên đơn vị quảng cáo.
  4. Giữ nguyên chế độ mặc định là Cài đặt phần thưởng.
  5. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Thường phải mất vài giờ để một đơn vị quảng cáo mới có thể phân phát quảng cáo.

Nếu bạn muốn thử nghiệm hành vi của quảng cáo ngay lập tức, hãy sử dụng mã ứng dụng thử nghiệm và mã đơn vị quảng cáo được liệt kê trong bảng sau.

Không bắt buộc: Dùng ứng dụng và đơn vị quảng cáo AdMob thử nghiệm

Nếu muốn theo dõi lớp học lập trình thay vì tự tạo một ứng dụng và đơn vị quảng cáo mới, bạn có thể sử dụng mã ứng dụng AdMob thử nghiệm và mã đơn vị quảng cáo được liệt kê trong các bảng sau.

Mã ứng dụng Android/Mã đơn vị quảng cáo

Item

mã ứng dụng/mã đơn vị quảng cáo

Mã ứng dụng AdMob

ca-app-pub-3940256099942544~3347511713

Biểu ngữ

ca-app-pub-3940256099942544/6300978111

Quảng cáo xen kẽ

ca-app-pub-3940256099942544/1033173712

Được thưởng

ca-app-pub-3940256099942544/5224354917

Mã ứng dụng iOS/Mã đơn vị quảng cáo

Item

mã ứng dụng/mã đơn vị quảng cáo

Mã ứng dụng AdMob

ca-app-pub-3940256099942544~1458002511

Biểu ngữ

ca-app-pub-3940256099942544/2934735716

Quảng cáo xen kẽ

ca-app-pub-3940256099942544/4411468910

Được thưởng

ca-app-pub-3940256099942544/1712485313

Để biết thêm thông tin về quảng cáo thử nghiệm, hãy tham khảo tài liệu dành cho nhà phát triển về quảng cáo thử nghiệm trên Android và quảng cáo thử nghiệm trên iOS.

4. Thêm trình bổ trợ Flutter dành cho Quảng cáo trên thiết bị di động của Google

Flutter sử dụng trình bổ trợ để cung cấp quyền truy cập vào nhiều dịch vụ dành riêng cho nền tảng. Trình bổ trợ cho phép bạn truy cập vào các dịch vụ và API trên từng nền tảng.

Trình bổ trợ google_mobile_ads hỗ trợ tải và hiển thị quảng cáo biểu ngữ, quảng cáo xen kẽ, quảng cáo có tặng thưởng và quảng cáo gốc bằng cách sử dụng API AdMob.

Vì Flutter là một SDK đa nền tảng, nên bạn có thể sử dụng trình bổ trợ google_mobile_ads cho cả iOS và Android. Vì vậy, nếu bạn thêm trình bổ trợ vào ứng dụng Flutter, thì trình bổ trợ này sẽ được sử dụng trên cả phiên bản Android và iOS của ứng dụng quảng cáo cùng dòng AdMob.

Thêm trình bổ trợ Quảng cáo của Google trên thiết bị di động làm phần phụ thuộc

Để truy cập vào API AdMob từ dự án quảng cáo nội tuyến AdMob, hãy thêm google_mobile_ads làm phần phụ thuộc vào tệp pubspec.yaml nằm ở gốc dự án.

pubspec.yaml

...
environment:
  # TODO: Update the minimum sdk version to 2.12.0 to support null safety.
  sdk: ">=2.17.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^3.0.1

  # TODO: Add google_mobile_ads as a dependency
  google_mobile_ads: ^1.2.0

...

Nhấp vào Pub get để cài đặt trình bổ trợ trong dự án Awesome Drawing Images.

9ce73858eedbd8fc.png

Cập nhật AndroidManifest.xml (Android)

  1. Mở tệp android/app/src/main/AndroidManifest.xml trong Android Studio.
  2. Thêm mã ứng dụng AdMob bằng cách thêm thẻ <meta-data> có tên com.google.android.gms.ads.APPLICATION_ID. Ví dụ: nếu mã ứng dụng AdMob của bạn là ca-app-pub-3940256099942544~3347511713, thì bạn cần thêm các dòng sau vào tệp AndroidManifest.xml.

AndroidManifest.xml

<manifest>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>

</manifest>

Cập nhật Info.plist (iOS)

  1. Mở tệp ios/Runner/Info.plist trong Android Studio.
  2. Thêm khoá GADApplicationIdentifier bằng giá trị chuỗi của mã ứng dụng AdMob. Ví dụ: nếu mã ứng dụng AdMob của bạn là ca-app-pub-3940256099942544~1458002511, thì bạn cần thêm các dòng sau vào tệp Info.plist.

ios/Runner/Info.plist

...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...

5. Thêm một lớp trợ giúp cho quảng cáo

Tạo một tệp mới có tên ad_helper.dart trong thư mục lib. Sau đó, hãy triển khai lớp AdHelper. Lớp này cung cấp mã ứng dụng AdMob và mã đơn vị quảng cáo cho Android và iOS.

Hãy nhớ thay thế mã ứng dụng AdMob (ca-app-pub-xxxxxx~yyyyy) và mã đơn vị quảng cáo (ca-app-pub-xxxxxxx/yyyyyyyy) bằng những mã mà bạn đã tạo trong bước trước đó.

lib/ad_helper.dart

import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return '<YOUR_ANDROID_BANNER_AD_UNIT_ID>';
    } else if (Platform.isIOS) {
      return '<YOUR_IOS_BANNER_AD_UNIT_ID>';
    } else {
      throw UnsupportedError('Unsupported platform');
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return '<YOUR_ANDROID_INTERSTITIAL_AD_UNIT_ID>';
    } else if (Platform.isIOS) {
      return '<YOUR_IOS_INTERSTITIAL_AD_UNIT_ID>';
    } else {
      throw UnsupportedError('Unsupported platform');
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return '<YOUR_ANDROID_REWARDED_AD_UNIT_ID>';
    } else if (Platform.isIOS) {
      return '<YOUR_IOS_REWARDED_AD_UNIT_ID>';
    } else {
      throw UnsupportedError('Unsupported platform');
    }
  }
}

Hãy sử dụng đoạn mã sau nếu bạn muốn sử dụng mã ứng dụng AdMob thử nghiệm và mã đơn vị quảng cáo thử nghiệm.

lib/ad_helper.dart

import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    } else {
      throw new UnsupportedError('Unsupported platform');
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/1033173712";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4411468910";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/5224354917";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/1712485313";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

6. Chạy SDK Quảng cáo của Google trên thiết bị di động

Trước khi tải quảng cáo, bạn cần khởi chạy SDK Quảng cáo của Google trên thiết bị di động. Mở tệp lib/home_route.dart và sửa đổi _initGoogleMobileAds() để khởi chạy SDK trước khi trang chủ được tải.

Lưu ý rằng bạn cần thay đổi loại dữ liệu trả về của phương thức _initGoogleMobileAds() từ Future<dynamic> thành Future<InitializationStatus> để nhận kết quả khởi chạy SDK sau khi hoàn tất.

home_route.dart

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

import 'package:flutter/material.dart';

...

class HomeRoute extends StatelessWidget {

  ...

  Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }
}

7. Thêm quảng cáo biểu ngữ

Trong phần này, bạn sẽ hiển thị quảng cáo biểu ngữ ở đầu màn hình trò chơi, như trong ảnh chụp màn hình sau đây.

276b4cfa283ea6c7.png.

  1. Mở tệp lib/game_route.dart rồi nhập ad_manager.dart
  2. Nhập ad_helper.dart và google_mobile_ads.dart bằng cách thêm các dòng sau:

lib/game_route.dart

...

// TODO: Import ad_helper.dart
import 'package:awesome_drawing_quiz/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class GameRoute extends StatefulWidget {
  ...
}
  1. Trong lớp _GameRouteState, hãy thêm các thành viên sau cho quảng cáo biểu ngữ.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. Trong phương thức initState(), hãy tạo và tải một BannerAd cho biểu ngữ 320x50 (AdSize.banner). Xin lưu ý rằng trình nghe sự kiện quảng cáo được định cấu hình để cập nhật giao diện người dùng (setState()) khi quảng cáo được tải .

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Load a banner ad
  BannerAd(
    adUnitId: AdHelper.bannerAdUnitId,
    request: AdRequest(),
    size: AdSize.banner,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        print('Failed to load a banner ad: ${err.message}');
        ad.dispose();
      },
    ),
  ).load();
}
  1. Sửa đổi phương thức build() để hiển thị quảng cáo biểu ngữ (nếu có).

lib/game_route.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: SafeArea(
      child: Stack(
        children: [
          Center(
            ...
          ),
          // TODO: Display a banner when ready
          if (_bannerAd != null)
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                width: _bannerAd!.size.width.toDouble(),
                height: _bannerAd!.size.height.toDouble(),
                child: AdWidget(ad: _bannerAd!),
              ),
            ),
        ],
      ),
    ),
    ...
  );
}
  1. Giải phóng tài nguyên liên kết với đối tượng BannerAd bằng cách gọi phương thức BannerAd.dispose() trong phương thức gọi lại dispose().

lib/game_route.dart

@override
void dispose() {
  // TODO: Dispose a BannerAd object
  _bannerAd?.dispose();

  ...

  super.dispose();
}

Vậy là xong! Chạy dự án và bắt đầu một trò chơi mới. Sau khi tải quảng cáo, bạn sẽ thấy một quảng cáo biểu ngữ ở đầu màn hình.

276b4cfa283ea6c7.png.

8. Thêm quảng cáo xen kẽ

Trong phần này, bạn hiển thị quảng cáo xen kẽ sau khi trò chơi (tổng cộng 5 cấp) kết thúc.

  1. Mở tệp lib/game_route.dart
  2. Trong lớp _GameRouteState, hãy thêm các thành phần và phương thức sau cho quảng cáo xen kẽ.

Xin lưu ý rằng trình nghe sự kiện quảng cáo được định cấu hình để kiểm tra xem quảng cáo đã sẵn sàng hay chưa (onAdLoaded() và onAdFailedToLoad()) và để hiển thị màn hình chính của ứng dụng khi quảng cáo đóng (onAdDismissedFullScreenContent())

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _interstitialAd
 InterstitialAd? _interstitialAd;

  // TODO: Implement _loadInterstitialAd()
  void _loadInterstitialAd() {
    InterstitialAd.load(
      adUnitId: AdHelper.interstitialAdUnitId,
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) {
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              _moveToHome();
            },
          );

          setState(() {
            _interstitialAd = ad;
          });
        },
        onAdFailedToLoad: (err) {
          print('Failed to load an interstitial ad: ${err.message}');
        },
      ),
    );
  }

  ...
}
  1. Trong lớp học lập trình này, một quảng cáo xen kẽ sẽ xuất hiện sau khi người dùng hoàn thành 5 cấp độ. Để giảm thiểu các yêu cầu quảng cáo không cần thiết, hãy yêu cầu quảng cáo khi người dùng đạt đến cấp 3.

Trong phương thức onNewLevel(), hãy thêm các dòng sau.

lib/game_route.dart

@override
void onNewLevel(int level, Drawing drawing, String clue) {
  ...

  // TODO: Load an Interstitial Ad
  if (level >= 3 && _interstitialAd == null) {
    _loadInterstitialAd();
  }
}
  1. Khi một trò chơi kết thúc, hộp thoại điểm số trò chơi sẽ xuất hiện. Khi người dùng đóng hộp thoại, họ sẽ được chuyển hướng đến màn hình chính của Bài kiểm tra về bản vẽ tuyệt vời.

Do quảng cáo xen kẽ cần xuất hiện giữa các lần chuyển màn hình, nên chúng tôi sẽ hiển thị quảng cáo xen kẽ khi người dùng nhấp vào nút ĐÓNG.

Sửa đổi phương thức onGameOver() như sau.

lib/game_route.dart

@override
void onGameOver(int correctAnswers) {
  showDialog(
    context: _scaffoldKey.currentContext,
    builder: (context) {
      return AlertDialog(
        title: Text('Game over!'),
        content: Text('Score: $correctAnswers/5'),
        actions: [
          FlatButton(
            child: Text('close'.toUpperCase()),
            onPressed: () {

              // TODO: Display an Interstitial Ad
              if (_interstitialAd != null) {
                _interstitialAd?.show();
              } else {
                _moveToHome();
              }
            },
          ),
        ],
      );
    },
  );
}
  1. Giải phóng tài nguyên liên kết với đối tượng InterstitialAd bằng cách gọi phương thức InterstitialAd.dispose() trong phương thức gọi lại dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose an InterstitialAd object
  _interstitialAd?.dispose();

  ...

  super.dispose();
}

Vậy là xong! Chạy dự án và hoàn tất trò chơi. Nếu tải quảng cáo xen kẽ, bạn sẽ thấy quảng cáo xen kẽ sau khi nhấp vào nút ĐÓNG từ hộp thoại điểm số.

c546e438c405e941.gif

9. Thêm quảng cáo có tặng thưởng

Trong phần này, bạn sẽ thêm một quảng cáo có tặng thưởng, gợi ý cho người dùng thêm như một phần thưởng.

  1. Mở tệp lib/game_route.dart
  2. Trong lớp _GameRouteState, hãy thêm các thành viên cho quảng cáo có tặng thưởng và triển khai phương thức _loadRewardedAd(). Xin lưu ý rằng hệ thống sẽ tải một quảng cáo có tặng thưởng khác khi bạn đóng quảng cáo (onAdDismissedFullScreenContent) để lưu quảng cáo vào bộ nhớ đệm sớm nhất có thể.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _rewardedAd
  RewardedAd? _rewardedAd;

  // TODO: Implement _loadRewardedAd()
  void _loadRewardedAd() {
    RewardedAd.load(
      adUnitId: AdHelper.rewardedAdUnitId,
      request: AdRequest(),
      rewardedAdLoadCallback: RewardedAdLoadCallback(
        onAdLoaded: (ad) {
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              setState(() {
                ad.dispose();
                _rewardedAd = null;
              });
              _loadRewardedAd();
            },
          );

          setState(() {
            _rewardedAd = ad;
          });
        },
        onAdFailedToLoad: (err) {
          print('Failed to load a rewarded ad: ${err.message}');
        },
      ),
    );
  }

  ...
}
  1. Gọi _loadRewardedAd() từ phương thức initState() để yêu cầu quảng cáo có tặng thưởng khi trò chơi bắt đầu.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

    // COMPLETE: Load a Rewarded Ad
    _loadRewardedAd();
  }


  ...
}
  1. Cho phép người dùng xem quảng cáo có tặng thưởng bằng cách nhấp vào nút hành động nổi. Nút này chỉ hiển thị nếu người dùng chưa sử dụng gợi ý ở cấp hiện tại và quảng cáo có tặng thưởng được tải.

Sửa đổi phương thức _buildFloatingActionButton() như sau để hiển thị nút hành động nổi. Lưu ý rằng thao tác trả về null sẽ ẩn nút này khỏi màn hình.

Xin lưu ý rằng onUserEarnedReward là sự kiện quảng cáo quan trọng nhất trong một quảng cáo có tặng thưởng. Nó được kích hoạt khi người dùng đủ điều kiện nhận phần thưởng (ví dụ: xem xong một video).

Trong lớp học lập trình này, phương thức QuizManager.instance.useHint() được gọi từ lệnh gọi lại. Thao tác này cho thấy thêm một ký tự nữa trong chuỗi gợi ý. Ứng dụng sẽ tải lại một quảng cáo có tặng thưởng trong lệnh gọi lại onAdClosed để đảm bảo quảng cáo sẵn sàng sớm nhất có thể.

lib/game_route.dart

Widget? _buildFloatingActionButton() {
  // TODO: Return a FloatingActionButton if a rewarded ad is available
  return (!QuizManager.instance.isHintUsed && _rewardedAd != null)
      ? FloatingActionButton.extended(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Need a hint?'),
                  content: Text('Watch an Ad to get a hint!'),
                  actions: [
                    TextButton(
                      child: Text('cancel'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    TextButton(
                      child: Text('ok'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                        _rewardedAd?.show(
                          onUserEarnedReward: (_, reward) {
                            QuizManager.instance.useHint();
                          },
                        );
                      },
                    ),
                  ],
                );
              },
            );
          },
          label: Text('Hint'),
          icon: Icon(Icons.card_giftcard),
        )
      : null;
}
  1. Giải phóng tài nguyên liên kết với đối tượng RewardedAd bằng cách gọi phương thức RewardedAd.dispose() trong phương thức gọi lại dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose a RewardedAd object
  _rewardedAd?.dispose();

  ...

  super.dispose();
}

Vậy là xong! Chạy dự án và chơi trò chơi. Sau khi tải quảng cáo có tặng thưởng, bạn sẽ thấy nút gợi ý ở cuối màn hình. Nhấp vào nút Gợi ý để nhận thêm gợi ý.

4a114d243ae3e71d.gif

10. Đã xong!

Bạn đã hoàn tất lớp học lập trình. Bạn có thể tìm thấy mã đã hoàn tất cho lớp học lập trình này trong thư mục android_studio_folder.pngcomplete.

Để tìm hiểu cách triển khai quảng cáo biểu ngữ và quảng cáo gốc cùng dòng, hãy tham khảo lớp học lập trình Thêm biểu ngữ AdMob và quảng cáo gốc cùng dòng vào ứng dụng Flutter.

Để tìm hiểu thêm, hãy thử tham gia các lớp học lập trình khác về Flutter.