การเพิ่มโฆษณา AdMob ลงในแอป Flutter

1. บทนำ

สิ่งที่คุณจะสร้าง

Codelab นี้จะแนะนำวิธีเพิ่มโฆษณาแบนเนอร์ โฆษณาคั่นระหว่างหน้า และโฆษณาที่มีการให้รางวัลลงในแอปชื่อ Awesome Drawing Quiz ซึ่งเป็นเกมที่ให้ผู้เล่นทายชื่อภาพวาด

หากพบปัญหา (ข้อบกพร่องของโค้ด ข้อผิดพลาดทางไวยากรณ์ คำที่ไม่ชัดเจน) ขณะทำตาม Codelab นี้ โปรดรายงานปัญหาโดยคลิกลิงก์รายงานข้อผิดพลาดที่มุมซ้ายล่างของ Codelab

สิ่งที่คุณจะได้เรียนรู้

วิธีกำหนดค่าปลั๊กอิน Google Mobile Ads AdMob
วิธีติดตั้งใช้งานโฆษณาแบนเนอร์ โฆษณาคั่นระหว่างหน้า และโฆษณาที่มีการให้รางวัลในแอป Flutter

สิ่งที่คุณต้องมี

Android Studio 4.1 ขึ้นไป
Xcode 12 ขึ้นไป (สําหรับการพัฒนา iOS)

คุณจะให้คะแนนระดับประสบการณ์การใช้งาน AdMob เท่าใด

ผู้ฝึกหัด

ขั้นกลาง

ผู้ชำนาญ

คุณจะให้คะแนนระดับประสบการณ์การใช้งาน Flutter เท่าใด

ผู้ฝึกหัด

ขั้นกลาง

ผู้ชำนาญ

2. ตั้งค่าสภาพแวดล้อมในการพัฒนา Flutter

คุณต้องมีซอฟต์แวร์ 2 อย่างเพื่อทำแล็บนี้ให้เสร็จสมบูรณ์ ได้แก่ Flutter SDK และโปรแกรมแก้ไข

คุณเรียกใช้ Codelab ได้โดยใช้อุปกรณ์ต่อไปนี้

อุปกรณ์ Android หรือ iOS จริงที่เชื่อมต่อกับคอมพิวเตอร์และตั้งค่าเป็นโหมดนักพัฒนาแอป
โปรแกรมจำลอง iOS (ต้องติดตั้งเครื่องมือ Xcode)
Android Emulator (ต้องตั้งค่าใน Android Studio)
เบราว์เซอร์ (ต้องใช้ Chrome สำหรับการแก้ไขข้อบกพร่อง)
ในรูปแบบแอปพลิเคชันเดสก์ท็อป Windows, Linux หรือ macOS คุณต้องพัฒนาบนแพลตฟอร์มที่วางแผนจะใช้งาน ดังนั้น หากต้องการพัฒนาแอปเดสก์ท็อป Windows คุณต้องพัฒนาบน Windows เพื่อเข้าถึงห่วงโซ่การสร้างที่เหมาะสม มีข้อกำหนดเฉพาะของระบบปฏิบัติการที่อธิบายไว้โดยละเอียดใน docs.flutter.dev/desktop

ดาวน์โหลดรหัส

หลังจากดาวน์โหลดไฟล์ ZIP แล้ว ให้แตกเนื้อหาของไฟล์ คุณจะมีโฟลเดอร์ชื่อ admob-ads-in-flutter-master

หรือจะโคลนที่เก็บ GitHub จากบรรทัดคำสั่งก็ได้

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

ที่เก็บจะมี 2 โฟลเดอร์ ได้แก่

starter - โค้ดเริ่มต้นที่คุณจะสร้างใน Codelab นี้
complete - โค้ดที่เสร็จสมบูรณ์สำหรับ Codelab นี้

3. ตั้งค่าแอปและหน่วยโฆษณา AdMob

เนื่องจาก Flutter เป็น SDK แบบหลายแพลตฟอร์ม คุณจึงต้องเพิ่มแอปและหน่วยโฆษณาทั้งสำหรับ Android และ iOS ใน AdMob

ตั้งค่าสำหรับ Android

หากต้องการตั้งค่าสำหรับ Android คุณต้องเพิ่มแอป Android และสร้างหน่วยโฆษณา

เพิ่มแอป Android

ในคอนโซล AdMob ให้คลิกเพิ่มแอปจากเมนูแอป
เมื่อระบบถามว่าคุณได้เผยแพร่แอปบน Google Play หรือ App Store แล้วใช่ไหม ให้คลิกไม่
ป้อน Awesome Drawing Quiz ในช่องชื่อแอป แล้วเลือก Android เป็นแพลตฟอร์ม

คุณไม่จำเป็นต้องเปิดใช้เมตริกผู้ใช้เพื่อทำ Codelab นี้ให้เสร็จสมบูรณ์ อย่างไรก็ตาม เราขอแนะนำให้คุณทำเนื่องจากจะช่วยให้คุณเข้าใจพฤติกรรมของผู้ใช้ได้ละเอียดยิ่งขึ้น คลิกเพิ่มเพื่อทำกระบวนการให้เสร็จสมบูรณ์

สร้างหน่วยโฆษณา

วิธีเริ่มเพิ่มหน่วยโฆษณาลงใน AdMob

เลือก Awesome Drawing Quiz จากเมนูแอปในคอนโซล AdMob
คลิกเมนูหน่วยโฆษณา

แบนเนอร์

คลิกปุ่มเพิ่มหน่วยโฆษณา
เลือกแบนเนอร์เป็นรูปแบบ
ป้อน android-adq-banner ในช่องชื่อหน่วยโฆษณา
คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสิ้น

โฆษณาคั่นระหว่างหน้า

คลิกปุ่มเพิ่มหน่วยโฆษณา
เลือกโฆษณาคั่นระหว่างหน้าเป็นรูปแบบ
ป้อน android-adq-interstitial ในช่องชื่อหน่วยโฆษณา
คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสิ้น

โฆษณาที่มีการให้รางวัล

คลิกปุ่มเพิ่มหน่วยโฆษณา
เลือกได้รับรางวัลเป็นรูปแบบ
ป้อน android-adq-rewarded ในช่องชื่อหน่วยโฆษณา
ปล่อยให้การตั้งค่ารางวัลเป็นค่าเริ่มต้น
คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสิ้น

โดยปกติแล้ว หน่วยโฆษณาใหม่จะใช้เวลา 2-3 ชั่วโมงจึงจะแสดงโฆษณาได้

หากต้องการทดสอบลักษณะการทํางานของโฆษณาทันที ให้ใช้รหัสแอปทดสอบและรหัสหน่วยโฆษณาทดสอบที่ระบุไว้ในตารางรหัสแอป/รหัสหน่วยโฆษณา Android และรหัสแอป/รหัสหน่วยโฆษณา iOS

ตั้งค่าสำหรับ iOS

หากต้องการตั้งค่าสำหรับ iOS คุณต้องเพิ่มแอป iOS และสร้างหน่วยโฆษณา

เพิ่มแอป iOS

ในคอนโซล AdMob ให้คลิกเพิ่มแอปจากเมนูแอป
เมื่อระบบถามว่าคุณได้เผยแพร่แอปบน Google Play หรือ App Store แล้วใช่ไหม ให้คลิกไม่
ป้อน Awesome Drawing Quiz ในช่องชื่อแอป แล้วเลือก iOS เป็นแพลตฟอร์ม

คุณไม่จำเป็นต้องเปิดใช้เมตริกผู้ใช้เพื่อทำ Codelab นี้ให้เสร็จสมบูรณ์ อย่างไรก็ตาม เราขอแนะนำให้คุณทำเนื่องจากจะช่วยให้คุณเข้าใจพฤติกรรมของผู้ใช้ได้ละเอียดยิ่งขึ้น คลิกเพิ่มเพื่อทำกระบวนการให้เสร็จสมบูรณ์

สร้างหน่วยโฆษณา

วิธีเพิ่มหน่วยโฆษณา

เลือกแอป Awesome Drawing Quiz จากเมนูแอปในคอนโซล AdMob
คลิกเมนูหน่วยโฆษณา

แบนเนอร์

คลิกปุ่มเพิ่มหน่วยโฆษณา
เลือกแบนเนอร์เป็นรูปแบบ
ป้อน ios-adq-banner ในช่องชื่อหน่วยโฆษณา
คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสิ้น

โฆษณาคั่นระหว่างหน้า

คลิกปุ่มเพิ่มหน่วยโฆษณา
เลือกโฆษณาคั่นระหว่างหน้าเป็นรูปแบบ
ป้อน ios-adq-interstitial ในช่องชื่อหน่วยโฆษณา
คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสิ้น

โฆษณาที่มีการให้รางวัล

คลิกปุ่มเพิ่มหน่วยโฆษณา
เลือกได้รับรางวัลเป็นรูปแบบ
ป้อน ios-adq-rewarded ในช่องชื่อหน่วยโฆษณา
ปล่อยให้การตั้งค่ารางวัลเป็นค่าเริ่มต้น
คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสิ้น

โดยปกติแล้ว หน่วยโฆษณาใหม่จะใช้เวลา 2-3 ชั่วโมงจึงจะแสดงโฆษณาได้

หากต้องการทดสอบลักษณะการทํางานของโฆษณาทันที ให้ใช้รหัสแอปทดสอบและรหัสหน่วยโฆษณาทดสอบที่แสดงในตารางต่อไปนี้

ไม่บังคับ: ใช้แอปและหน่วยโฆษณาทดสอบของ AdMob

หากต้องการทำตาม Codelab แทนการสร้างแอปพลิเคชันและหน่วยโฆษณาใหม่ด้วยตนเอง คุณสามารถใช้รหัสแอป AdMob สำหรับทดสอบและรหัสหน่วยโฆษณาที่ระบุไว้ในตารางต่อไปนี้

รหัสแอป/รหัสหน่วยโฆษณา Android

รายการ	รหัสแอป/รหัสหน่วยโฆษณา
รหัสแอป AdMob	`ca-app-pub-3940256099942544~3347511713`
แบนเนอร์	`ca-app-pub-3940256099942544/6300978111`
โฆษณาคั่นระหว่างหน้า	`ca-app-pub-3940256099942544/1033173712`
ได้รับรางวัลแล้ว	`ca-app-pub-3940256099942544/5224354917`

รหัสแอป/รหัสหน่วยโฆษณา iOS

รายการ	รหัสแอป/รหัสหน่วยโฆษณา
รหัสแอป AdMob	`ca-app-pub-3940256099942544~1458002511`
แบนเนอร์	`ca-app-pub-3940256099942544/2934735716`
โฆษณาคั่นระหว่างหน้า	`ca-app-pub-3940256099942544/4411468910`
ได้รับรางวัลแล้ว	`ca-app-pub-3940256099942544/1712485313`

ดูข้อมูลเพิ่มเติมเกี่ยวกับโฆษณาทดสอบได้ที่เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์โฆษณาทดสอบ Android และโฆษณาทดสอบ iOS

4. เพิ่มปลั๊กอิน Flutter สำหรับ Google Mobile Ads

Flutter ใช้ปลั๊กอินเพื่อให้สิทธิ์เข้าถึงบริการเฉพาะแพลตฟอร์มที่หลากหลาย ปลั๊กอินช่วยให้คุณเข้าถึงบริการและ API ในแต่ละแพลตฟอร์มได้

ปลั๊กอิน google_mobile_ads รองรับการโหลดและแสดงโฆษณาแบนเนอร์ โฆษณาคั่นระหว่างหน้า โฆษณาที่มีการให้รางวัล และโฆษณาเนทีฟโดยใช้ AdMob API

เนื่องจาก Flutter เป็น SDK แบบหลายแพลตฟอร์ม ปลั๊กอิน google_mobile_ads จึงใช้ได้ทั้งกับ iOS และ Android ดังนั้น หากคุณเพิ่มปลั๊กอินลงในแอป Flutter ทั้งเวอร์ชัน Android และ iOS ของแอปโฆษณา AdMob ในบรรทัดก็จะใช้ปลั๊กอินนี้

เพิ่มปลั๊กอิน Google Mobile Ads เป็นการขึ้นต่อกัน

หากต้องการเข้าถึง AdMob API จากโปรเจ็กต์โฆษณาในบรรทัดของ AdMob ให้เพิ่ม google_mobile_ads เป็นการขึ้นต่อกันในไฟล์ pubspec.yaml ที่อยู่ในรูทของโปรเจ็กต์

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

...

คลิก Pub get เพื่อติดตั้งปลั๊กอินในโปรเจ็กต์ Awesome Drawing Quiz

อัปเดต AndroidManifest.xml (Android)

เปิดandroid/app/src/main/AndroidManifest.xmlไฟล์ใน Android Studio
เพิ่มรหัสแอป AdMob โดยเพิ่มแท็ก <meta-data> ที่มีชื่อ com.google.android.gms.ads.APPLICATION_ID เช่น หากรหัสแอป AdMob คือ ca-app-pub-3940256099942544~3347511713 คุณจะต้องเพิ่มบรรทัดต่อไปนี้ลงในไฟล์ 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>

อัปเดต Info.plist (iOS)

เปิดios/Runner/Info.plistไฟล์ใน Android Studio
เพิ่มGADApplicationIdentifierคีย์ที่มีค่าสตริงของรหัสแอป AdMob เช่น หากรหัสแอป AdMob คือ ca-app-pub-3940256099942544~1458002511 คุณจะต้องเพิ่มบรรทัดต่อไปนี้ลงในไฟล์ Info.plist

ios/Runner/Info.plist

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

5. เพิ่มคลาสตัวช่วยสำหรับโฆษณา

สร้างไฟล์ใหม่ชื่อ ad_helper.dart ในไดเรกทอรี lib จากนั้นให้ใช้คลาส AdHelper ซึ่งมีรหัสแอป AdMob และรหัสหน่วยโฆษณาสำหรับ Android และ iOS

ตรวจสอบว่าคุณได้แทนที่รหัสแอป AdMob (ca-app-pub-xxxxxx~yyyyy) และรหัสหน่วยโฆษณา (ca-app-pub-xxxxxxx/yyyyyyyy) ด้วยรหัสที่คุณสร้างไว้ในขั้นตอนก่อนหน้า

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');
    }
  }
}

ใช้โค้ดต่อไปนี้หากต้องการใช้รหัสแอป AdMob สำหรับทดสอบและรหัสหน่วยโฆษณาสําหรับทดสอบ

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. เริ่มต้นใช้งาน SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google

ก่อนที่จะโหลดโฆษณา คุณต้องเริ่มต้น SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เปิดไฟล์ lib/home_route.dart แล้วแก้ไข _initGoogleMobileAds() เพื่อเริ่มต้น SDK ก่อนที่จะโหลดหน้าแรก

โปรดทราบว่าคุณต้องเปลี่ยนประเภทการคืนค่าของเมธอด _initGoogleMobileAds() จาก Future<dynamic> เป็น Future<InitializationStatus> เพื่อรับผลการเริ่มต้น SDK หลังจากที่ดำเนินการเสร็จสมบูรณ์

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. เพิ่มโฆษณาแบนเนอร์

ในส่วนนี้ คุณจะแสดงโฆษณาแบนเนอร์ที่ด้านบนของหน้าจอเกม ดังที่แสดงในภาพหน้าจอด้านล่าง

เปิดไฟล์ lib/game_route.dart แล้วนำเข้า ad_manager.dart
นำเข้า ad_helper.dart และ google_mobile_ads.dart โดยเพิ่มบรรทัดต่อไปนี้

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 {
  ...
}

ในคลาส _GameRouteState ให้เพิ่มสมาชิกต่อไปนี้สำหรับโฆษณาแบนเนอร์

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}

ในเมธอด initState() ให้สร้างและโหลด BannerAd สำหรับแบนเนอร์ขนาด 320x50 (AdSize.banner) โปรดทราบว่ามีการกำหนดค่าเครื่องมือจัดการเหตุการณ์โฆษณาเพื่ออัปเดต UI (setState()) เมื่อโหลดโฆษณา

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();
}

แก้ไขเมธอด build() เพื่อแสดงโฆษณาแบนเนอร์เมื่อพร้อมใช้งาน

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!),
              ),
            ),
        ],
      ),
    ),
    ...
  );
}

ปล่อยทรัพยากรที่เชื่อมโยงกับออบเจ็กต์ BannerAd โดยเรียกใช้เมธอด BannerAd.dispose() ในเมธอด Callback dispose()

lib/game_route.dart

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

  ...

  super.dispose();
}

เท่านี้ก็เรียบร้อย เรียกใช้โปรเจ็กต์และเริ่มเกมใหม่ หลังจากโหลดโฆษณาแล้ว คุณจะเห็นโฆษณาแบนเนอร์ที่ด้านบนของหน้าจอ

8. เพิ่มโฆษณาคั่นระหว่างหน้า

ในส่วนนี้ คุณจะแสดงโฆษณาคั่นระหว่างหน้าหลังจากที่เกม (ทั้งหมด 5 ระดับ) จบลง

เปิดไฟล์ lib/game_route.dart
ในคลาส _GameRouteState ให้เพิ่มสมาชิกและเมธอดต่อไปนี้สำหรับโฆษณาคั่นกลาง

โปรดทราบว่ามีการกำหนดค่าเครื่องมือฟังเหตุการณ์โฆษณาเพื่อตรวจสอบว่าโฆษณาพร้อมหรือไม่ (onAdLoaded() และ onAdFailedToLoad()) และเพื่อแสดงหน้าจอหลักของแอปเมื่อปิดโฆษณา (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}');
        },
      ),
    );
  }

  ...
}

ในโค้ดแล็บนี้ โฆษณาคั่นระหว่างหน้าจะแสดงหลังจากที่ผู้ใช้ผ่านด่าน 5 ด่าน ขอโฆษณาเมื่อผู้ใช้ไปถึงระดับ 3 เพื่อลดคำขอโฆษณาที่ไม่จำเป็น

ในonNewLevel() ให้เพิ่มบรรทัดต่อไปนี้

lib/game_route.dart

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

  // TODO: Load an Interstitial Ad
  if (level >= 3 && _interstitialAd == null) {
    _loadInterstitialAd();
  }
}

เมื่อการแข่งขันจบลง กล่องโต้ตอบคะแนนการแข่งขันจะปรากฏขึ้น เมื่อผู้ใช้ปิดกล่องโต้ตอบ ระบบจะนำผู้ใช้ไปยังหน้าจอหลักของ Awesome Drawing Quiz

เนื่องจากโฆษณาคั่นระหว่างหน้าควรแสดงระหว่างการเปลี่ยนหน้าจอ เราจึงแสดงโฆษณาคั่นระหว่างหน้าเมื่อผู้ใช้คลิกปุ่มปิด

แก้ไขonGameOver()วิธีดังนี้

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();
              }
            },
          ),
        ],
      );
    },
  );
}

ปล่อยทรัพยากรที่เชื่อมโยงกับออบเจ็กต์ InterstitialAd โดยเรียกใช้เมธอด InterstitialAd.dispose() ในเมธอด Callback dispose()

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

เท่านี้ก็เรียบร้อย เรียกใช้โปรเจ็กต์และสร้างเกมให้เสร็จสมบูรณ์ หากโหลดโฆษณาคั่นระหว่างหน้าแล้ว คุณจะเห็นโฆษณาคั่นระหว่างหน้าเมื่อคลิกปุ่มปิดจากกล่องโต้ตอบคะแนน

9. เพิ่มโฆษณาที่มีการให้รางวัล

ในส่วนนี้ คุณจะเพิ่มโฆษณาที่มีการให้รางวัลซึ่งให้คำใบ้เพิ่มเติมแก่ผู้ใช้เป็นรางวัล

เปิดไฟล์ lib/game_route.dart
ใน_GameRouteState คลาส ให้เพิ่มสมาชิกสำหรับโฆษณาที่มีการให้รางวัล และใช้เมธอด _loadRewardedAd() โปรดทราบว่าระบบจะโหลดโฆษณาที่มีการให้รางวัลอีกรายการเมื่อปิดโฆษณา (onAdDismissedFullScreenContent) เพื่อแคชโฆษณาให้เร็วที่สุด

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}');
        },
      ),
    );
  }

  ...
}

เรียกใช้ _loadRewardedAd() จากเมธอด initState() เพื่อขอโฆษณาที่มีการให้รางวัลเมื่อเกมเริ่ม

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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


  ...
}

อนุญาตให้ผู้ใช้ดูโฆษณาที่มีการให้รางวัลโดยคลิกปุ่มการดำเนินการแบบลอย ปุ่มจะแสดงก็ต่อเมื่อผู้ใช้ยังไม่ได้ใช้คำใบ้ในระดับปัจจุบันและโหลดโฆษณาที่มีการให้รางวัลแล้ว

แก้ไขเมธอด _buildFloatingActionButton() ดังนี้เพื่อแสดงปุ่มลอย โปรดทราบว่าการกลับมา null จะซ่อนปุ่มจากหน้าจอ

โปรดทราบว่า onUserEarnedReward เป็นเหตุการณ์โฆษณาที่สำคัญที่สุดในโฆษณาที่มีการให้รางวัล โดยจะทริกเกอร์เมื่อผู้ใช้มีสิทธิ์รับรางวัล (เช่น ดูวิดีโอจนจบ)

ใน Codelab นี้ ระบบจะเรียกใช้เมธอด QuizManager.instance.useHint() จากการเรียกกลับ ซึ่งจะแสดงอักขระอีก 1 ตัวในสตริงคำใบ้ แอปจะโหลดโฆษณาที่มีการให้รางวัลซ้ำในonAdClosedการเรียกกลับเพื่อให้แน่ใจว่าโฆษณาพร้อมใช้งานโดยเร็วที่สุด

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;
}

ปล่อยทรัพยากรที่เชื่อมโยงกับออบเจ็กต์ RewardedAd โดยเรียกใช้เมธอด RewardedAd.dispose() ในเมธอด Callback dispose()

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

เท่านี้ก็เรียบร้อย เรียกใช้โปรเจ็กต์และเล่นเกม เมื่อโหลดโฆษณาที่มีการให้รางวัลแล้ว คุณจะเห็นปุ่มคำใบ้ที่ด้านล่างของหน้าจอ คลิกปุ่มคำใบ้เพื่อรับคำใบ้เพิ่มเติม

10. เสร็จเรียบร้อย

คุณทำ Codelab เสร็จแล้ว คุณดูโค้ดที่เสร็จสมบูรณ์สำหรับโค้ดแล็บนี้ได้ในโฟลเดอร์ complete

ดูวิธีติดตั้งใช้งานโฆษณาแบนเนอร์และโฆษณาเนทีฟในบรรทัดได้ที่ Codelab การเพิ่มโฆษณาแบนเนอร์และโฆษณาเนทีฟในบรรทัดของ AdMob ลงในแอป Flutter

ดูข้อมูลเพิ่มเติมได้ที่โค้ดแล็บ Flutter อื่นๆ