1. บทนำ
สิ่งที่คุณจะสร้าง
Codelab นี้จะแนะนำวิธีเพิ่มแบนเนอร์ โฆษณาคั่นระหว่างหน้า และโฆษณาที่มีการให้รางวัลลงในแอปชื่อแบบทดสอบการวาดภาพสุดเจ๋ง ซึ่งเป็นเกมที่ให้ผู้เล่นเดาชื่อภาพวาดได้
|
|
หากพบปัญหา (ข้อบกพร่องของโค้ด ข้อผิดพลาดด้านไวยากรณ์ การใช้คำไม่ชัดเจน) ขณะดำเนินการใน Codelab นี้ โปรดรายงานปัญหาโดยคลิกลิงก์รายงานข้อผิดพลาดที่มุมล่างซ้ายของ Codelab
สิ่งที่คุณจะได้เรียนรู้
- วิธีกำหนดค่าปลั๊กอิน AdMob สำหรับโฆษณาบนมือถือของ Google
- วิธีใช้แบนเนอร์ โฆษณาคั่นระหว่างหน้า และโฆษณาที่มีการให้รางวัลในแอป Flutter
สิ่งที่คุณต้องมี
- Android Studio 4.1 ขึ้นไป
- Xcode 12 ขึ้นไป (สำหรับการพัฒนา iOS)
คุณจะให้คะแนนประสบการณ์การใช้งาน AdMob ในระดับใด
โปรดให้คะแนนประสบการณ์การใช้งาน Flutter ของคุณ
2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ Flutter
ห้องทดลองนี้ต้องมีซอฟต์แวร์ 2 ประเภท ได้แก่ Flutter SDK และเครื่องมือแก้ไข
คุณเรียกใช้ Codelab ได้โดยใช้อุปกรณ์ต่อไปนี้
- อุปกรณ์ Android หรือ iOS ที่เชื่อมต่อกับคอมพิวเตอร์และตั้งค่าเป็นโหมดนักพัฒนาซอฟต์แวร์
- เครื่องมือจำลอง iOS (ต้องติดตั้งเครื่องมือ Xcode)
- โปรแกรมจำลอง Android (ต้องตั้งค่าใน 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 นี้- เสร็จสมบูรณ์ — โค้ดสำหรับ Codelab นี้เสร็จสมบูรณ์แล้ว
3. ตั้งค่าแอปและหน่วยโฆษณา AdMob
เนื่องจาก Flutter เป็น SDK หลายแพลตฟอร์ม คุณต้องเพิ่มแอปและหน่วยโฆษณาสําหรับทั้ง Android และ iOS ใน AdMob
ตั้งค่าสำหรับ Android
หากต้องการตั้งค่าสำหรับ Android คุณต้องเพิ่มแอป Android และสร้างหน่วยโฆษณา
เพิ่มแอป Android
- ในคอนโซล AdMob ให้คลิกเพิ่มแอปจากเมนูแอป
- เมื่อระบบถามว่าคุณได้เผยแพร่แอปใน Google Play หรือ App Store หรือยัง ให้คลิกไม่
- ป้อน
Awesome Drawing Quizในช่องชื่อแอป แล้วเลือกแพลตฟอร์มเป็น Android
- คุณไม่จำเป็นต้องเปิดใช้เมตริกผู้ใช้เพื่อดำเนินการ Codelab นี้ให้เสร็จสมบูรณ์ แต่เราขอแนะนําให้คุณทำเช่นนั้น เนื่องจากจะช่วยให้คุณเข้าใจพฤติกรรมของผู้ใช้ได้ละเอียดยิ่งขึ้น คลิกเพิ่มเพื่อดำเนินการให้เสร็จสมบูรณ์
สร้างหน่วยโฆษณา
วิธีเริ่มเพิ่มหน่วยโฆษณาลงใน AdMob
- เลือกแบบทดสอบการวาดภาพสุดเจ๋งจากเมนูแอปในคอนโซล AdMob
- คลิกเมนูหน่วยโฆษณา
แบนเนอร์
|
|
โฆษณาคั่นระหว่างหน้า
|
|
โฆษณาที่มีการให้รางวัล
|
|
โดยปกติแล้วหน่วยโฆษณาใหม่จะใช้เวลา 2-3 ชั่วโมงจึงจะแสดงโฆษณาได้
หากต้องการทดสอบลักษณะการทำงานของโฆษณาทันที ให้ใช้รหัสแอปทดสอบและรหัสหน่วยโฆษณาที่ระบุไว้ในรหัสแอป Android/รหัสหน่วยโฆษณา และรหัสแอป iOS/รหัสหน่วยโฆษณาในตาราง
ตั้งค่าสําหรับ iOS
หากต้องการตั้งค่าสำหรับ iOS คุณต้องเพิ่มแอป iOS และสร้างหน่วยโฆษณา
เพิ่มแอป iOS
- ในคอนโซล AdMob ให้คลิกเพิ่มแอปจากเมนูแอป
- เมื่อระบบถามว่าคุณได้เผยแพร่แอปใน Google Play หรือ App Store หรือยัง ให้คลิกไม่
- ป้อน
Awesome Drawing Quizในช่องชื่อแอป แล้วเลือก iOS เป็นแพลตฟอร์ม
- คุณไม่จำเป็นต้องเปิดใช้เมตริกผู้ใช้เพื่อดำเนินการ Codelab นี้ให้เสร็จสมบูรณ์ แต่เราขอแนะนําให้คุณทำเช่นนั้น เนื่องจากจะช่วยให้คุณเข้าใจพฤติกรรมของผู้ใช้ได้ละเอียดยิ่งขึ้น คลิกเพิ่มเพื่อดำเนินการให้เสร็จสมบูรณ์
สร้างหน่วยโฆษณา
วิธีเพิ่มหน่วยโฆษณา
- เลือกแอปแบบทดสอบการวาดภาพสุดเจ๋งจากเมนูแอปในคอนโซล AdMob
- คลิกเมนูหน่วยโฆษณา
แบนเนอร์
|
|
โฆษณาคั่นระหว่างหน้า
|
|
โฆษณาที่มีการให้รางวัล
|
|
โดยปกติแล้วหน่วยโฆษณาใหม่จะใช้เวลา 2-3 ชั่วโมงจึงจะแสดงโฆษณาได้
หากต้องการทดสอบลักษณะการทำงานของโฆษณาทันที ให้ใช้รหัสแอปทดสอบและรหัสหน่วยโฆษณาที่ระบุไว้ในตารางต่อไปนี้
ไม่บังคับ: ใช้แอปและหน่วยโฆษณาทดสอบของ AdMob
หากคุณต้องการใช้ Codelab แทนการสร้างแอปพลิเคชันและหน่วยโฆษณาใหม่ด้วยตนเอง คุณสามารถใช้รหัสแอป AdMob และรหัสหน่วยโฆษณาทดสอบในตารางต่อไปนี้
รหัสแอป Android/รหัสหน่วยโฆษณา
รายการ | รหัสแอป/รหัสหน่วยโฆษณา |
รหัสแอป AdMob |
|
แบนเนอร์ |
|
โฆษณาคั่นระหว่างหน้า |
|
ได้รับรางวัลแล้ว |
|
รหัสแอป iOS/รหัสหน่วยโฆษณา
รายการ | รหัสแอป/รหัสหน่วยโฆษณา |
รหัสแอป AdMob |
|
แบนเนอร์ |
|
โฆษณาคั่นระหว่างหน้า |
|
ได้รับรางวัลแล้ว |
|
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโฆษณาทดสอบ โปรดดูเอกสารสำหรับนักพัฒนาซอฟต์แวร์โฆษณาทดสอบ Android และโฆษณาทดสอบ iOS
4. เพิ่มปลั๊กอิน Flutter ของ Google Mobile Ads
Flutter ใช้ปลั๊กอินเพื่อเข้าถึงบริการเฉพาะแพลตฟอร์มที่หลากหลาย ปลั๊กอินช่วยให้คุณเข้าถึงบริการและ API ในแต่ละแพลตฟอร์มได้
ปลั๊กอิน google_mobile_ads รองรับการโหลดและการแสดงแบนเนอร์ โฆษณาคั่นระหว่างหน้า โฆษณาที่มีการให้รางวัล และโฆษณาเนทีฟโดยใช้ AdMob API
เนื่องจาก Flutter เป็น SDK หลายแพลตฟอร์ม ปลั๊กอิน google_mobile_ads จึงใช้งานได้สำหรับทั้ง iOS และ Android ดังนั้น หากคุณเพิ่มปลั๊กอินลงในแอป Flutter แอปโฆษณาแบบอินไลน์ของ AdMob ทั้งเวอร์ชัน Android และ iOS จะใช้ปลั๊กอินดังกล่าว
เพิ่มปลั๊กอินโฆษณาในอุปกรณ์เคลื่อนที่ของ Google เป็นทรัพยากร Dependency
หากต้องการเข้าถึง AdMob API จากโปรเจ็กต์โฆษณาในบรรทัดของ AdMob ให้เพิ่ม google_mobile_ads เป็นทรัพยากร Dependency ไปยังไฟล์ 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) โปรดทราบว่า Listener เหตุการณ์โฆษณามีการกำหนดค่าให้อัปเดต 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()ในเมธอด Callbackdispose()
lib/game_route.dart
@override
void dispose() {
// TODO: Dispose a BannerAd object
_bannerAd?.dispose();
...
super.dispose();
}
เท่านี้ก็เรียบร้อย ทำโปรเจ็กต์และเริ่มเกมใหม่ หลังจากที่โฆษณาโหลดแล้ว คุณจะเห็นโฆษณาแบนเนอร์ที่ด้านบนของหน้าจอ
8. เพิ่มโฆษณาคั่นระหว่างหน้า
ในส่วนนี้ คุณจะแสดงโฆษณาคั่นระหว่างหน้าหลังจากเล่นเกมจบ (ทั้งหมด 5 ระดับ)
- เปิดไฟล์
lib/game_route.dart - ในชั้นเรียน
_GameRouteStateให้เพิ่มสมาชิกและวิธีการต่อไปนี้สำหรับโฆษณาคั่นระหว่างหน้า
โปรดทราบว่า Listener เหตุการณ์โฆษณาจะมีการกำหนดค่าให้ตรวจสอบว่าโฆษณาพร้อมหรือไม่ (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}');
},
),
);
}
...
}
- ใน Codelab นี้ โฆษณาคั่นระหว่างหน้าจะแสดงหลังจากที่ผู้ใช้เล่นผ่าน 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();
}
}
- เมื่อการแข่งขันจบ กล่องโต้ตอบคะแนนการแข่งขันจะปรากฏขึ้น เมื่อผู้ใช้ปิดกล่องโต้ตอบ ระบบจะนำผู้ใช้ไปยังหน้าจอหลักของแบบทดสอบการวาดภาพสุดเจ๋ง
เนื่องจากโฆษณาคั่นระหว่างหน้าควรแสดงระหว่างการเปลี่ยนหน้าจอ เราจึงแสดงโฆษณาคั่นระหว่างหน้าเมื่อผู้ใช้คลิกปุ่มปิด
แก้ไขเมธอด 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()ในเมธอด Callbackdispose()
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() จาก Callback ซึ่งจะแสดงอักขระอีก 1 ตัวในสตริงคำแนะนำ แอปจะโหลดโฆษณาที่มีการให้รางวัลซ้ำใน Callback 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()ในเมธอด Callbackdispose()
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose a RewardedAd object
_rewardedAd?.dispose();
...
super.dispose();
}
เท่านี้ก็เรียบร้อย เรียกใช้โปรเจ็กต์และเล่นเกม เมื่อโฆษณาที่มีการให้รางวัลโหลดขึ้นมาแล้ว คุณจะเห็นปุ่มคำแนะนำที่ด้านล่างของหน้าจอ คลิกปุ่มคำแนะนำเพื่อรับคำแนะนำเพิ่มเติม
10. เสร็จเรียบร้อย
คุณทำ Codelab เสร็จสมบูรณ์แล้ว คุณดูโค้ดที่เสร็จสมบูรณ์ของ Codelab นี้ได้ในโฟลเดอร์ complete
ดู Codelab เกี่ยวกับการเพิ่มแบนเนอร์ AdMob และโฆษณาเนทีฟแบบอินไลน์ลงในแอป Flutter เพื่อดูวิธีติดตั้งโฆษณาแบนเนอร์และโฆษณาเนทีฟแบบอินไลน์
ลองดูข้อมูลเพิ่มเติมที่ Flutter Codelab