โฆษณาแบนเนอร์จะใช้ตำแหน่งภายในเลย์เอาต์ของแอป โดยจะอยู่ด้านบนหรือด้านล่างของหน้าจออุปกรณ์ก็ได้ ในระหว่างที่ผู้ใช้กำลังโต้ตอบกับแอป โฆษณาเหล่านี้จะอยู่บนหน้าจอและจะรีเฟรชโดยอัตโนมัติได้หลังจากผ่านไประยะหนึ่ง
คู่มือนี้จะแสดงวิธีผสานรวมโฆษณาแบนเนอร์จาก 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()
เท่านี้ก็เรียบร้อย ตอนนี้แอปของคุณพร้อมแสดงโฆษณาแบนเนอร์แล้ว
การจำกัดการเลื่อนใน Android 9 และเก่ากว่า
เราทราบว่าอุปกรณ์รุ่นเก่ากว่าหรือที่มีประสิทธิภาพน้อยกว่าซึ่งใช้ Android 9 หรือรุ่นก่อนหน้านี้อาจมีประสิทธิภาพไม่ดีพอ เมื่อแสดงโฆษณาแบนเนอร์ในบรรทัดในมุมมองแบบเลื่อน เราขอแนะนำให้ใช้แบนเนอร์ประเภทนี้ใน Android 10 ขึ้นไปเท่านั้น แบนเนอร์ยึดตำแหน่งแบบตายตัว เช่น แบนเนอร์ยึดตำแหน่งจะไม่ได้รับผลกระทบและจะใช้ได้กับประสิทธิภาพสูงสุดใน API ของ Android ทุกระดับ