ตั้งค่าโฆษณาแบนเนอร์

เลือกแพลตฟอร์ม: Android iOS Unity Flutter Android (เดิม)

โฆษณาแบนเนอร์จะใช้พื้นที่ภายในเลย์เอาต์ของแอป ไม่ว่าจะเป็นที่ด้านบนหรือด้านล่างของหน้าจออุปกรณ์ ในระหว่างที่ผู้ใช้กําลังโต้ตอบกับแอป โฆษณาเหล่านี้จะยังคงแสดงบนหน้าจอและรีเฟรชโดยอัตโนมัติหลังจากเวลาผ่านไปช่วงหนึ่ง

คู่มือนี้จะช่วยให้คุณเริ่มต้นใช้งานโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ แบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้จะเพิ่มประสิทธิภาพขนาดโฆษณาสำหรับอุปกรณ์แต่ละเครื่องโดยใช้ความกว้างของโฆษณาที่คุณระบุ

โฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้เป็นโฆษณาที่มีสัดส่วนภาพคงที่ ไม่ใช่โฆษณาขนาดคงที่ สัดส่วนภาพจะคล้ายกับ 320x50 เมื่อคุณระบุความกว้างเต็มที่พร้อมใช้งาน Google Mobile Ads Flutter Plugin จะแสดงโฆษณาที่มีความสูงที่เหมาะสมที่สุดสำหรับความกว้างนั้น ความสูงที่เหมาะสมที่สุดสำหรับโฆษณาจะคงที่ในคำขอโฆษณาต่างๆ และเนื้อหาที่อยู่รอบๆ โฆษณาจะยังคงอยู่ในตำแหน่งเดิมเมื่อโฆษณารีเฟรช

ทดสอบด้วยโฆษณาทดสอบเสมอ

เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทนโฆษณาจริงที่ใช้งานจริง หากไม่ดำเนินการดังกล่าว อาจส่งผลให้บัญชีถูกระงับ

วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบเฉพาะสำหรับแบนเนอร์ ดังนี้

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

หน่วยโฆษณาทดสอบได้รับการกำหนดค่าให้แสดงโฆษณาทดสอบสำหรับทุกคำขอ และคุณสามารถใช้หน่วยโฆษณาดังกล่าวในแอปของคุณเองได้อย่างอิสระขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่อง เพียงตรวจสอบว่าคุณได้แทนที่รหัสเหล่านั้นด้วยรหัสหน่วยโฆษณาของคุณเองก่อนที่จะเผยแพร่แอป

รับขนาดโฆษณา

แบนเนอร์แบบปรับขนาดได้ขนาดใหญ่มีรูปแบบที่ใหญ่ขึ้นซึ่งออกแบบมาสำหรับเลย์เอาต์แบบไม่เลื่อน เมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้แบบมาตรฐาน แบนเนอร์เหล่านี้จะมีความสูงสูงสุดที่สูงกว่า (สูงสุด 20% ของความสูงของหน้าจอ ระหว่าง 50 ถึง 150 dp) พื้นที่ที่เพิ่มขึ้นนี้ได้รับการเพิ่มประสิทธิภาพสำหรับเนื้อหาวิดีโอ

หากต้องการขอโฆษณาแบนเนอร์ที่มีขนาดโฆษณาที่ถูกต้อง ให้ทำตามขั้นตอนต่อไปนี้

  1. ดูความกว้างของหน้าจออุปกรณ์เป็นหน่วยความหนาแน่นของพิกเซลอิสระ (dp) โดยใช้ MediaQuery.of(context) หากไม่ต้องการใช้ความกว้างเต็มหน้าจอ คุณสามารถกำหนดความกว้างเองได้

  2. ใช้เมธอดแบบคงที่ที่เหมาะสมในคลาส AdSize เพื่อรับออบเจ็กต์ AdSize เช่น ใช้ AdSize.getLargeAnchoredAdaptiveBannerAdSize(int width) เพื่อรับขนาดโฆษณาสำหรับการวางแนวปัจจุบัน

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
  MediaQuery.sizeOf(context).width.truncate(),
);

โหลดโฆษณา

ตัวอย่างต่อไปนี้จะโหลดโฆษณาแบนเนอร์

void _loadAd() async {
  // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
  final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate(),
  );

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  unawaited(
    BannerAd(
      adUnitId: "_adUnitId",
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        onAdLoaded: (ad) {
          // Called when an ad is successfully received.
          debugPrint('Ad was loaded.');
          setState(() {
            _bannerAd = ad as BannerAd;
          });
        },
        onAdFailedToLoad: (ad, err) {
          // Called when an ad request failed.
          debugPrint('Ad failed to load with error: $err');
          ad.dispose();
        },
      ),
    ).load(),
  );
}

แทนที่ _adUnitId ด้วยรหัสหน่วยโฆษณาของคุณเอง

คุณสามารถใช้ BannerAdListener เพื่อฟังเหตุการณ์ในวงจร เช่น เมื่อโหลดโฆษณา ตัวอย่างนี้ใช้แต่ละเมธอดและบันทึกข้อความไปยังคอนโซล

onAdOpened: (Ad ad) {
  // Called when an ad opens an overlay that covers the screen.
  debugPrint('Ad was opened.');
},
onAdClosed: (Ad ad) {
  // Called when an ad removes an overlay that covers the screen.
  debugPrint('Ad was closed.');
},
onAdImpression: (Ad ad) {
  // Called when an impression occurs on the ad.
  debugPrint('Ad recorded an impression.');
},
onAdClicked: (Ad ad) {
  // Called when a click event occurs on the ad.
  debugPrint('Ad was clicked.');
},
onAdWillDismissScreen: (Ad ad) {
  // iOS only. Called before dismissing a full screen view.
  debugPrint('Ad will be dismissed.');
},

รีเฟรชโฆษณา

หากคุณกำหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จำเป็นต้องขอโฆษณาอื่นเมื่อโฆษณาโหลดไม่สำเร็จ Google Mobile Ads Flutter Plugin จะยึดตามอัตราการรีเฟรชที่คุณระบุไว้ใน UI ของ AdMob หากคุณไม่ได้เปิดใช้การรีเฟรช ให้ส่งคำขอใหม่ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการรีเฟรชหน่วยโฆษณา เช่น การตั้งค่าอัตราการรีเฟรชได้ที่ใช้การรีเฟรชอัตโนมัติสําหรับโฆษณาแบนเนอร์

แสดงโฆษณาแบนเนอร์

หากต้องการแสดง 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 ออกจากโครงสร้างวิดเจ็ตหรือใน Callback BannerAdListener.onAdFailedToLoad()

เท่านี้ก็เรียบร้อย ตอนนี้แอปของคุณพร้อมแสดงโฆษณาแบนเนอร์แล้ว

ข้อจำกัดในการเลื่อนบน Android 9 และต่ำกว่า

เราทราบดีว่าอุปกรณ์รุ่นเก่าหรือมีประสิทธิภาพน้อยกว่าซึ่งใช้ Android 9 หรือเวอร์ชันก่อนหน้าอาจมีประสิทธิภาพต่ำกว่ามาตรฐานเมื่อแสดงโฆษณาแบนเนอร์ในบรรทัดภายในมุมมองการเลื่อน เราขอแนะนำให้ใช้แบนเนอร์ประเภทนี้ใน Android 10 ขึ้นไปเท่านั้น แบนเนอร์ตำแหน่งคงที่ เช่น แบนเนอร์ Anchor จะไม่ได้รับผลกระทบและสามารถใช้ได้อย่างมีประสิทธิภาพสูงสุดในระดับ API ของ Android ทุกระดับ

ตัวอย่างที่เสร็จสมบูรณ์ใน GitHub

หากต้องการดูตัวอย่างทั้งหมด โปรดดูเดโม API

ดูข้อมูลเกี่ยวกับแบนเนอร์ประเภทอื่นๆ

ทำความคุ้นเคยกับแบนเนอร์ประเภทอื่นๆ ที่กำหนดไว้ในส่วนนี้สำหรับแอปพลิเคชัน Flutter

แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัด

แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดมีความสูงที่ปรับเปลี่ยนได้ และเป็นแบนเนอร์ที่ใหญ่และสูงกว่าเมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ เราขอแนะนำให้ใช้แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดแทนโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้สำหรับแอปที่วางโฆษณาแบนเนอร์ในเนื้อหาที่เลื่อนได้ ดูรายละเอียดเพิ่มเติมได้ที่แบนเนอร์แบบปรับขนาดได้ในบรรทัด

แบนเนอร์แบบยุบได้

โฆษณาแบนเนอร์แบบยุบได้คือโฆษณาแบนเนอร์ที่เริ่มแรกจะแสดงเป็นโฆษณาซ้อนทับขนาดใหญ่ โดยมีปุ่มสำหรับยุบโฆษณาให้มีขนาดเล็กลง ลองใช้แบนเนอร์นี้เพื่อเพิ่มประสิทธิภาพให้ดียิ่งขึ้น ดูรายละเอียดเพิ่มเติมได้ที่โฆษณาแบนเนอร์แบบยุบได้