คู่มือนี้มีไว้สําหรับผู้เผยแพร่โฆษณาที่ต้องการสร้างรายได้จากแอป Flutter
การผสานรวม SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เข้ากับแอป Flutter ซึ่งคุณจะทำที่นี่เป็นขั้นตอนแรกในการแสดงโฆษณา Ad Manager และสร้างรายได้ เมื่อการผสานรวมเสร็จสมบูรณ์แล้ว คุณสามารถเลือกรูปแบบโฆษณาเพื่อดูขั้นตอนการใช้งานโดยละเอียดได้
ปัจจุบัน SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google สำหรับ Flutter รองรับการโหลดและการแสดงแบนเนอร์ โฆษณาคั่นระหว่างหน้า (เต็มหน้าจอ) โฆษณาเนทีฟ และโฆษณาที่มีการให้รางวัล
ข้อกำหนดเบื้องต้น
- Flutter 1.22.0 ขึ้นไป
- Android
- Android Studio 3.2 ขึ้นไป
- กำหนดเป้าหมาย Android API ระดับ 20 ขึ้นไป
- ตั้งค่า
compileSdkVersion
เป็น 28 ขึ้นไป
- iOS
- Xcode เวอร์ชันล่าสุดที่มีเครื่องมือบรรทัดคำสั่งที่เปิดใช้
นำเข้า SDK โฆษณาในอุปกรณ์เคลื่อนที่
- รวม SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google สำหรับปลั๊กอิน Flutter ไว้ในโปรเจ็กต์ Flutter
การตั้งค่าเฉพาะแพลตฟอร์ม
Android
อัปเดต AndroidManifest.xml
ต้องระบุรหัสแอป Ad Manager ใน AndroidManifest.xml
หากไม่ดำเนินการ ระบบจะทำให้ข้อขัดข้องขณะเปิดแอป
เพิ่มรหัสแอป Ad Manager (ระบุใน UI ของ Ad Manager) ลงในไฟล์ android/app/src/main/AndroidManifest.xml
ของแอปด้วยการเพิ่มแท็ก <meta-data>
ที่มีชื่อ
com.google.android.gms.ads.APPLICATION_ID
คุณดูรหัสแอปได้ใน UI ของ Ad Manager สำหรับ android:value
ให้แทรกรหัสแอป Ad Manager ของคุณเองในเครื่องหมายคำพูดดังที่แสดงด้านล่าง
<manifest> <application> <!-- Sample 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
ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่า AndroidManifest.xml
และการตั้งค่ารหัสแอปได้ที่คำแนะนำสำหรับ Android
iOS
อัปเดต Info.plist ของคุณ
ในไฟล์ ios/Runner/Info.plist
ของแอป ให้เพิ่มคีย์ GADApplicationIdentifier
ที่มีค่าสตริงเป็นรหัสแอป Ad Manager (ระบุใน UI ของ Ad Manager) ดังนี้
<key>GADApplicationIdentifier</key> <string>ca-app-pub-################~##########</string>
คุณต้องส่งค่าเดียวกันเมื่อเริ่มต้นปลั๊กอินในโค้ด Dart
ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่า Info.plist
และการตั้งค่ารหัสแอปได้ที่คำแนะนำสำหรับ iOS
เริ่มต้น 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 โฆษณาบนอุปกรณ์เคลื่อนที่แล้ว และคุณพร้อมที่จะติดตั้งโฆษณา Ad Manager มีโฆษณาหลายรูปแบบเพื่อให้คุณเลือก รูปแบบที่เหมาะกับประสบการณ์ของผู้ใช้แอปมากที่สุด
แบนเนอร์
โฆษณาทรงสี่เหลี่ยมผืนผ้าที่ปรากฏด้านบนหรือด้านล่างของหน้าจออุปกรณ์ โฆษณาแบนเนอร์จะแสดงอยู่บนหน้าจอขณะที่ผู้ใช้โต้ตอบกับแอป และรีเฟรชโดยอัตโนมัติได้หลังจากผ่านไประยะหนึ่ง หากคุณเพิ่งเริ่มใช้การโฆษณา บนอุปกรณ์เคลื่อนที่ วิธีนี้เป็นการเริ่มต้นที่ดี
โฆษณาคั่นระหว่างหน้า
โฆษณาแบบเต็มหน้าจอที่บดบังอินเทอร์เฟซของแอปจนกว่าผู้ใช้จะปิด โดยจะเหมาะสำหรับการหยุดพักตามปกติระหว่างการทำงานของแอป เช่น ระหว่างการเปลี่ยนด่านเกม หรือหลังจากทำงานเสร็จ
เนทีฟ
โฆษณาที่ปรับแต่งได้และกลมกลืนกับรูปลักษณ์ของแอป คุณสามารถกำหนดได้ว่าจะวางโฆษณาไว้อย่างไรและที่ใดเพื่อให้เลย์เอาต์มีความสอดคล้องกับการออกแบบของแอปมากขึ้น
ได้รับรางวัลแล้ว
โฆษณาที่ให้รางวัลผู้ใช้จากการชมวิดีโอสั้นๆ และโต้ตอบกับโฆษณาที่เล่นได้และแบบสำรวจ เหมาะสำหรับการสร้างรายได้จากผู้ใช้ที่เล่นเกมฟรี