โฆษณาแบนเนอร์จะแสดงในตำแหน่งภายในเลย์เอาต์ของแอปที่ด้านบนหรือด้านล่างของหน้าจออุปกรณ์ โฆษณาเหล่านี้จะยังคงแสดงบนหน้าจอในระหว่างที่ผู้ใช้โต้ตอบกับแอป และสามารถรีเฟรชโดยอัตโนมัติหลังจากเวลาผ่านไประยะหนึ่ง
คู่มือนี้จะช่วยคุณเริ่มต้นใช้งานโฆษณาแบนเนอร์ยึดตําแหน่งที่ปรับเปลี่ยนได้ แบนเนอร์โฆษณา Anchor แบบปรับขนาดได้จะเพิ่มประสิทธิภาพขนาดโฆษณาสําหรับอุปกรณ์แต่ละเครื่องโดยใช้ความกว้างของโฆษณาที่คุณระบุ
โฆษณาแบนเนอร์แบบปรับขนาดที่ยึดตำแหน่งไว้เป็นโฆษณาที่มีสัดส่วนภาพคงที่ ไม่ใช่โฆษณาขนาดคงที่ สัดส่วนภาพคล้ายกับ 320x50 เมื่อคุณระบุความกว้างเต็มรูปแบบที่ใช้ได้ SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google จะแสดงโฆษณาที่มีความสูงเหมาะสมที่สุดสำหรับความกว้างนั้น ความสูงที่เหมาะสมที่สุดสําหรับโฆษณาจะคงที่ในคําขอโฆษณาต่างๆ และเนื้อหารอบๆ โฆษณาจะยังคงอยู่ในตําแหน่งเดิมเมื่อโฆษณารีเฟรช
ทดสอบด้วยโฆษณาทดสอบเสมอ
เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทนโฆษณาเวอร์ชันที่ใช้งานจริง หากไม่ดำเนินการดังกล่าวอาจส่งผลให้บัญชีถูกระงับ
วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบโดยเฉพาะสำหรับแบนเนอร์
Android
ca-app-pub-3940256099942544/9214589741
iOS
ca-app-pub-3940256099942544/2435281174
หน่วยโฆษณาทดสอบได้รับการกําหนดค่าให้แสดงโฆษณาทดสอบสําหรับคําขอทุกรายการ และคุณใช้หน่วยโฆษณาทดสอบในแอปของคุณเองได้ขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่อง เพียงตรวจสอบว่าได้แทนที่รหัสเหล่านั้นด้วยรหัสหน่วยโฆษณาของคุณเองแล้วก่อนที่จะเผยแพร่แอป
รับขนาดโฆษณา
หากต้องการขอโฆษณาแบนเนอร์ที่มีขนาดโฆษณาถูกต้อง ให้ทําตามขั้นตอนต่อไปนี้
รับความกว้างของหน้าจออุปกรณ์เป็นหน่วยความหนาแน่นของพิกเซลอิสระ (dp) โดยใช้
MediaQuery.of(context)
หากคุณไม่ต้องการใช้ความกว้างเต็มหน้าจอ คุณสามารถตั้งค่าความกว้างของตัวเองได้ใช้เมธอดแบบคงที่ที่เหมาะสมในคลาส
AdSize
เพื่อรับออบเจ็กต์AdSize
เช่น ใช้AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
เพื่อดูขนาดโฆษณาสําหรับการวางแนวปัจจุบัน
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
โหลดโฆษณา
ตัวอย่างต่อไปนี้เป็นการสร้างอินสแตนซ์โฆษณาแบนเนอร์
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/9214589741'
: 'ca-app-pub-3940256099942544/2435281174';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: size,
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();
}
}
เหตุการณ์โฆษณาแบนเนอร์
การใช้ 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/9214589741'
: 'ca-app-pub-3940256099942544/2435281174';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: size,
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
สืบทอดมาจากคลาสวิดเจ็ตของ 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 ทุกระดับ
ตัวอย่างที่สมบูรณ์ใน GitHub
ดูตัวอย่างการผสานรวมแบนเนอร์ที่ครอบคลุมในหน้านี้อย่างเต็มรูปแบบใน banner_example
ดูข้อมูลเกี่ยวกับแบนเนอร์ประเภทอื่นๆ
ทำความคุ้นเคยกับแบนเนอร์ประเภทอื่นๆ ที่ระบุไว้ในส่วนนี้สำหรับแอปพลิเคชัน Flutter
แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัด
แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดมีความสูงที่ไม่ตายตัว และเป็นแบนเนอร์ที่ใหญ่และสูงกว่าเมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่ง ขอแนะนำให้ใช้แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้แทนโฆษณาแบนเนอร์แบบปรับขนาดได้ที่อยู่ด้านล่างสุดสำหรับแอปที่วางโฆษณาแบนเนอร์ไว้ในเนื้อหาที่เลื่อนได้ ดูรายละเอียดเพิ่มเติมได้ที่แบนเนอร์แบบปรับขนาดได้ในบรรทัด
แบนเนอร์แบบย่อได้
โฆษณาแบนเนอร์แบบยุบได้คือโฆษณาแบนเนอร์ที่แสดงเป็นโฆษณาซ้อนทับขนาดใหญ่ในตอนแรก โดยมีปุ่มสำหรับยุบโฆษณาให้มีขนาดเล็กลง ลองใช้แบนเนอร์นี้เพื่อเพิ่มประสิทธิภาพให้ดียิ่งขึ้น ดูรายละเอียดเพิ่มเติมได้ที่โฆษณาแบนเนอร์แบบยุบได้