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