คู่มือนี้จัดทําขึ้นสําหรับผู้เผยแพร่โฆษณาที่ต้องการสร้างรายได้จากแอป Flutter
ขั้นตอนแรกของการแสดงโฆษณา AdMob และการสร้างรายได้คือการรวม SDK โฆษณาบนอุปกรณ์เคลื่อนที่ของ Google เข้ากับแอป Flutter ซึ่งคุณจะต้องดําเนินการที่นี่ เมื่อการผสานรวมเสร็จสิ้นแล้ว คุณจะเลือกรูปแบบโฆษณาเพื่อดูขั้นตอนการใช้งานอย่างละเอียดได้
ปัจจุบัน SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google สําหรับ Flutter รองรับการโหลดและการแสดงโฆษณาแบนเนอร์ โฆษณาคั่นระหว่างหน้า (เต็มหน้าจอ) โฆษณาเนทีฟ และโฆษณาที่มีการให้รางวัล
สิ่งที่ต้องดำเนินการก่อน
- Flutter 1.22.0 ขึ้นไป
- แอนดรอยด์
- Android Studio 3.2 ขึ้นไป
- กําหนดเป้าหมาย Android API ระดับ 20 ขึ้นไป
- ตั้งค่า
compileSdkVersion
เป็น 28 ขึ้นไป
- iOS
- Xcode เวอร์ชันล่าสุดที่มีเครื่องมือบรรทัดคําสั่งที่เปิดใช้
- แนะนํา: สร้างบัญชี AdMob และลงทะเบียนแอป Android และ/หรือ iOS
นําเข้า SDK โฆษณาบนอุปกรณ์เคลื่อนที่
- รวม Google Mobile Ads SDK for Flutter plugin ในโครงการ Flutter
การตั้งค่าเฉพาะแพลตฟอร์ม
Android
อัปเดต AndroidManifest.xml
ต้องใส่รหัสแอป AdMob ใน AndroidManifest.xml
ไม่เช่นนั้นจะทําให้แอปเปิดแอปขัดข้อง
เพิ่มรหัสแอป AdMob (ระบุใน UI ของ AdMob)
ไปยังไฟล์ android/app/src/main/AndroidManifest.xml
ของแอปโดยเพิ่มแท็ก <meta-data>
ด้วยชื่อ
com.google.android.gms.ads.APPLICATION_ID
คุณสามารถดูรหัสแอปของคุณได้ใน UI ของ AdMob สําหรับ android:value
ให้ใส่รหัสแอป AdMob ของคุณเองในเครื่องหมายคําพูดดังนี้
<manifest> <application> <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 --> <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/> <application> <manifest>
ใช้ value
เดียวกันเมื่อคุณเริ่มต้นปลั๊กอินในโค้ด Dart
ไปที่คู่มือ Android เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการกําหนดค่า
AndroidManifest.xml
และการตั้งค่ารหัสแอป
iOS
อัปเดต Info.plist
ในไฟล์ ios/Runner/Info.plist
ของแอป ให้เพิ่มคีย์ GADApplicationIdentifier
ที่มีค่าสตริงเป็นรหัสแอป AdMob (ระบุไว้ใน UI ของ AdMob) ดังนี้
<key>GADApplicationIdentifier</key> <string>ca-app-pub-################~##########</string>
คุณต้องส่งผ่านค่าเดียวกันเมื่อเริ่มต้นปลั๊กอินในโค้ด Dart
ไปที่คําแนะนําสําหรับ iOS เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการกําหนดค่า Info.plist
และการตั้งค่ารหัสแอป
เริ่มต้น SDK โฆษณาบนอุปกรณ์เคลื่อนที่
ก่อนที่จะโหลดโฆษณา ให้แอปเริ่มต้น SDK โฆษณาในอุปกรณ์เคลื่อนที่ด้วยการเรียก MobileAds.instance.initialize()
ซึ่งจะเริ่มต้น SDK และแสดงผล Future
ที่เสร็จสมบูรณ์เมื่อเริ่มต้นเสร็จสมบูรณ์ (หรือหลังจากหมดเวลา 30 วินาที) ซึ่งต้องทําเพียงครั้งเดียวเท่านั้น หากเป็นไปได้ ก่อนที่จะเรียกใช้แอป
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
// Load ads.
}
}
เลือกรูปแบบโฆษณา
มีการนําเข้า SDK โฆษณาบนอุปกรณ์เคลื่อนที่แล้ว และคุณพร้อมที่จะใช้โฆษณา AdMob มีรูปแบบโฆษณาต่างๆ มากมายให้คุณเลือกรูปแบบที่เหมาะกับประสบการณ์ของผู้ใช้แอปมากที่สุด
แบนเนอร์
โฆษณาทรงสี่เหลี่ยมผืนผ้าที่ปรากฏด้านบนหรือด้านล่างของหน้าจออุปกรณ์ โฆษณาแบนเนอร์ จะแสดงในหน้าจอขณะที่ผู้ใช้โต้ตอบกับแอป และจะรีเฟรชโดยอัตโนมัติหลังจากเวลาผ่านไปช่วงหนึ่ง หากคุณยังใหม่ต่อการโฆษณาบนอุปกรณ์เคลื่อนที่ เป็นจุดเริ่มต้นที่ดี
โฆษณาคั่นระหว่างหน้า
โฆษณาแบบเต็มหน้าจอที่ครอบคลุมอินเทอร์เฟซของแอปจนกว่าผู้ใช้จะปิด ช่วงนี้จะเหมาะสําหรับช่วงหยุดชั่วคราวสุดๆ ระหว่างการดําเนินการของแอป เช่น ในระหว่างเลเวลของเกมหรือหลังจากทํางานเสร็จ
เนทีฟ
โฆษณาที่สามารถกําหนดค่าได้ซึ่งตรงกับรูปลักษณ์ของแอปคุณ คุณกําหนดได้ว่าจะวางโฆษณาไว้ที่ใดและที่ใด ดังนั้นการออกแบบจึงสอดคล้องกับการออกแบบของแอปคุณมากขึ้น
ได้รับรางวัลแล้ว
โฆษณาที่ให้รางวัลแก่ผู้ใช้หลังจากชมวิดีโอสั้นๆ และโต้ตอบกับโฆษณาและแบบสํารวจที่เล่นได้ เหมาะสําหรับการสร้างรายได้จากผู้ใช้ที่เล่นเกมฟรี