โฆษณาแบนเนอร์จะใช้ตำแหน่งภายในเลย์เอาต์ของแอป โดยจะอยู่ด้านบนหรือด้านล่างของแอปก็ได้ หน้าจออุปกรณ์ ในระหว่างที่ผู้ใช้กำลังโต้ตอบกับแอป โฆษณาเหล่านี้จะอยู่บนหน้าจอ และสามารถรีเฟรชโดยอัตโนมัติ เมื่อเวลาผ่านไปช่วงหนึ่ง
คู่มือนี้แสดงวิธีผสานรวมโฆษณาแบนเนอร์จาก AdMob ลงใน แอป Flutter นอกจากข้อมูลโค้ดและวิธีการแล้ว ยังมี เกี่ยวกับการปรับขนาดแบนเนอร์อย่างเหมาะสม
ทดสอบด้วยโฆษณาทดสอบเสมอ
เมื่อสร้างและทดสอบแอป โปรดตรวจสอบว่าคุณใช้โฆษณาทดสอบแทน โฆษณาที่ใช้งานจริง หากไม่ดำเนินการ บัญชีจะถูกระงับ
วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบโดยเฉพาะของเรา แบนเนอร์:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
ระบบจะกำหนดค่าให้หน่วยโฆษณาทดสอบแสดงโฆษณาทดสอบสำหรับทุกคำขอ และ คุณสามารถใช้เครื่องมือดังกล่าวในแอปของคุณเองขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่อง เพียงตรวจสอบให้แน่ใจว่าได้แทนที่รหัสเหล่านั้นด้วยรหัสหน่วยโฆษณาของคุณเอง ก่อนที่จะเผยแพร่ แอป
โหลดโฆษณา
ตัวอย่างต่อไปนี้เป็นการสร้างอินสแตนซ์โฆษณาแบนเนอร์
class BannerExampleState extends State<BannerExample> { BannerAd? _bannerAd; bool _isLoaded = false; // TODO: replace this test ad unit with your own ad unit. final adUnitId = Platform.isAndroid ? 'ca-app-pub-3940256099942544/6300978111' : 'ca-app-pub-3940256099942544/2934735716'; /// Loads a banner ad. void loadAd() { _bannerAd = BannerAd( adUnitId: adUnitId, request: const AdRequest(), size: AdSize.banner, listener: BannerAdListener( // Called when an ad is successfully received. onAdLoaded: (ad) { debugPrint('$ad loaded.'); setState(() { _isLoaded = true; }); }, // Called when an ad request failed. onAdFailedToLoad: (ad, err) { debugPrint('BannerAd failed to load: $error'); // Dispose the ad here to free resources. ad.dispose(); }, ), )..load(); } }
ขนาดของแบนเนอร์
ตารางด้านล่างแสดงรายการขนาดแบนเนอร์มาตรฐาน
ขนาดเป็นหน่วย dp (กว้างxสูง) | คำอธิบาย | ขนาดคงที่ของ AdSize |
---|---|---|
320x50 | แบนเนอร์มาตรฐาน | banner
|
320x100 | แบนเนอร์ขนาดใหญ่ | largeBanner
|
320x250 | สี่เหลี่ยมผืนผ้ากลาง | mediumRectangle
|
468x60 | แบนเนอร์ขนาดเต็ม | fullBanner
|
728x90 | ลีดเดอร์บอร์ด | leaderboard
|
ความกว้างที่ระบุ x ความสูงแบบปรับอัตโนมัติ | แบนเนอร์แบบปรับขนาดได้ | ไม่มี |
หากต้องการกำหนดขนาดแบนเนอร์ที่กำหนดเอง ให้ตั้งค่า AdSize
ที่ต้องการ ดังนี้
final AdSize adSize = AdSize(300, 50);
เหตุการณ์โฆษณาแบนเนอร์
เมื่อใช้ BannerAdListener
คุณจะสามารถฟังเหตุการณ์ในวงจรได้ เช่น
เหมือนกับตอนที่โฆษณาโหลด ตัวอย่างนี้ใช้แต่ละวิธีและบันทึกข้อความ
ลงในคอนโซล
class BannerExampleState extends State<BannerExample> { BannerAd? _bannerAd; bool _isLoaded = false; // TODO: replace this test ad unit with your own ad unit. final adUnitId = Platform.isAndroid ? 'ca-app-pub-3940256099942544/6300978111' : 'ca-app-pub-3940256099942544/2934735716'; /// Loads a banner ad. void loadAd() { _bannerAd = BannerAd( adUnitId: adUnitId, request: const AdRequest(), size: AdSize.banner, listener: BannerAdListener( // Called when an ad is successfully received. onAdLoaded: (ad) { debugPrint('$ad loaded.'); setState(() { _isLoaded = true; }); }, // Called when an ad request failed. onAdFailedToLoad: (ad, err) { debugPrint('BannerAd failed to load: $error'); // Dispose the ad here to free resources. ad.dispose(); }, // Called when an ad opens an overlay that covers the screen. onAdOpened: (Ad ad) {}, // Called when an ad removes an overlay that covers the screen. onAdClosed: (Ad ad) {}, // Called when an impression occurs on the ad. onAdImpression: (Ad ad) {}, ), )..load(); } }
แสดงโฆษณาแบนเนอร์
หากต้องการแสดง BannerAd
เป็นวิดเจ็ต คุณต้องสร้างอินสแตนซ์ AdWidget
ด้วยโฆษณาที่รองรับหลังจากเรียก load()
คุณจะสร้างวิดเจ็ตก่อนเวลา
กำลังโทรหา load()
แต่ต้องเรียกใช้ load()
ก่อนที่จะเพิ่มลงในวิดเจ็ต
ต้นไม้
AdWidget
รับค่ามาจากคลาส Widget ของ Flutter และสามารถใช้งานได้เหมือนกับประเภทอื่นๆ
วิดเจ็ต สำหรับ iOS ให้ตรวจสอบว่าได้วางวิดเจ็ตไว้ในวิดเจ็ตโดยระบุ
ความกว้างและความสูง มิฉะนั้น โฆษณาของคุณอาจไม่แสดง BannerAd
สามารถวางในคอนเทนเนอร์ที่มีขนาดตรงกับโฆษณา ดังนี้
... if (_bannerAd != null) { Align( alignment: Alignment.bottomCenter, child: SafeArea( child: SizedBox( width: _bannerAd!.size.width.toDouble(), height: _bannerAd!.size.height.toDouble(), child: AdWidget(ad: _bannerAd!), ), ), ) } ...
ต้องทิ้งโฆษณาเมื่อไม่จำเป็นต้องใช้การเข้าถึงแล้ว แนวทางปฏิบัติแนะนำ
ว่าจะโทรหา dispose()
เมื่อใดหลังจากที่นำ AdWidget
ออกจาก
แผนผังวิดเจ็ตหรือใน BannerAdListener.onAdFailedToLoad()
Callback
เท่านี้ก็เรียบร้อย ตอนนี้แอปของคุณพร้อมแสดงโฆษณาแบนเนอร์แล้ว
การจำกัดการเลื่อนใน Android 9 และเก่ากว่า
เราทราบว่าอุปกรณ์รุ่นเก่าหรือต่ำกว่าบางรุ่นที่ใช้ Android 9 หรือ ก่อนหน้านี้ อาจมีประสิทธิภาพไม่ดีพอ เมื่อแสดงโฆษณาแบนเนอร์แบบอินไลน์ในมุมมองที่เลื่อนได้ เราขอแนะนำเฉพาะ ใช้แบนเนอร์ประเภทนี้ใน Android 10 ขึ้นไป แบนเนอร์ที่อยู่ในตำแหน่งคงที่ เนื่องจากแบนเนอร์ยึดตำแหน่งจะไม่ได้รับผลกระทบ และสามารถใช้โดยมีประสิทธิภาพสูงสุดใน API ของ Android ทุกระดับ