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

เลือกแพลตฟอร์ม: 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 สืบทอดมาจากคลาส 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()` กับโฆษณาเมื่อไม่จำเป็นต้องเข้าถึงโฆษณาอีกต่อไป แนวทางปฏิบัติแนะนำในการเรียกใช้ dispose() คือหลังจากนำ AdWidget ออกจากแผนผังวิดเจ็ตแล้ว หรือใน Callback BannerAdListener.onAdFailedToLoad()

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

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

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

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

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

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

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

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

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

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

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