คู่มือนี้มีไว้สำหรับผู้เผยแพร่โฆษณาที่ต้องการสร้างรายได้จากแอป Flutter
การผสานรวม SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เข้ากับแอป Flutter ซึ่งคุณทําได้ ที่นี่ เป็นขั้นตอนแรกสู่การแสดงโฆษณา AdMob และสร้างรายได้ เมื่อผสานรวมเสร็จแล้ว คุณจะเลือกรูปแบบโฆษณาเพื่อดูขั้นตอนการติดตั้งใช้งานโดยละเอียดได้
ปัจจุบัน Google Mobile Ads SDK สําหรับ Flutter รองรับการโหลดและการแสดงโฆษณาแบนเนอร์ โฆษณาคั่นระหว่างหน้า (แบบเต็มหน้าจอ) โฆษณาเนทีฟ และโฆษณาที่มีการให้รางวัล
ข้อกำหนดเบื้องต้น
- Flutter 1.22.0 ขึ้นไป
- Android
- Android Studio 3.2 ขึ้นไป
- กำหนดเป้าหมายเป็น Android API ระดับ 20 ขึ้นไป
- ตั้งค่า
compileSdkVersion
เป็น 28 ขึ้นไป
- iOS
- Xcode เวอร์ชันล่าสุดที่มีเครื่องมือบรรทัดคำสั่งที่เปิดใช้
- ขอแนะนํา: สร้างบัญชี AdMob และลงทะเบียนแอป Android และ/หรือ iOS
นําเข้า SDK โฆษณาในอุปกรณ์เคลื่อนที่
- รวมปลั๊กอิน Google Mobile Ads SDK สําหรับ Flutter ไว้ในโปรเจ็กต์ 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
ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่า AndroidManifest.xml
และการตั้งค่ารหัสแอปได้จากคู่มือ Android
iOS
อัปเดต Info.plist
ในไฟล์ ios/Runner/Info.plist
ของแอป ให้เพิ่มGADApplicationIdentifier
คีย์ที่มีค่าสตริงของรหัสแอป AdMob ตามที่ระบุในเว็บอินเตอร์เฟซของ AdMob
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-################~##########</string>
คุณต้องส่งค่าเดียวกันเมื่อเริ่มต้นใช้งานปลั๊กอินในโค้ด Dart
ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่า Info.plist
และการตั้งค่ารหัสแอปได้ที่คู่มือ iOS
เริ่มต้นใช้งาน SDK โฆษณาในอุปกรณ์เคลื่อนที่
ก่อนโหลดโฆษณา ให้แอปเริ่มต้นใช้งาน Mobile Ads 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.
}
}
เลือกรูปแบบโฆษณา
หลังจากนําเข้า Mobile Ads SDK แล้ว คุณก็พร้อมที่จะติดตั้งใช้งานโฆษณา AdMob มีโฆษณาหลากหลายรูปแบบเพื่อให้คุณเลือกรูปแบบที่เหมาะกับประสบการณ์ของผู้ใช้แอปมากที่สุด
แบนเนอร์
โฆษณาสี่เหลี่ยมผืนผ้าที่ปรากฏที่ด้านบนหรือด้านล่างของหน้าจออุปกรณ์ โฆษณาแบนเนอร์จะแสดงบนหน้าจอขณะที่ผู้ใช้โต้ตอบกับแอป และสามารถรีเฟรชโดยอัตโนมัติหลังจากเวลาผ่านไประยะหนึ่ง ฟีเจอร์เหล่านี้เหมาะอย่างยิ่งสําหรับผู้เริ่มต้นใช้งานการโฆษณาบนอุปกรณ์เคลื่อนที่
โฆษณาคั่นระหว่างหน้า
โฆษณาแบบเต็มหน้าจอที่ครอบคลุมอินเทอร์เฟซของแอปจนกว่าผู้ใช้จะปิด โฆษณาประเภทนี้เหมาะสําหรับใช้ในช่วงหยุดชั่วคราวตามปกติของขั้นตอนการทํางานของแอป เช่น ระหว่างด่านของเกมหรือหลังจากทํางานเสร็จ
ติดตั้งใช้งานโฆษณาคั่นระหว่างหน้า
เนทีฟ
โฆษณาที่ปรับแต่งได้ซึ่งตรงกับรูปลักษณ์ของแอป โดยคุณเลือกลักษณะและตําแหน่งที่จะวางโฆษณาได้ ทําให้เลย์เอาต์สอดคล้องกับการออกแบบแอปของคุณมากขึ้น
ได้รับรางวัลแล้ว
โฆษณาที่ให้รางวัลแก่ผู้ใช้หลังจากชมวิดีโอสั้นๆ จบแล้วมีการโต้ตอบกับโฆษณาที่เล่นได้และแบบสำรวจ เหมาะสำหรับการสร้างรายได้จากผู้ใช้ที่เล่นฟรี