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

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

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

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

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

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

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

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

ca-app-pub-3940256099942544/9214589741

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(),
);
main.dart

โหลดโฆษณา

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

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;
  }

  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();
}
main.dart

แทนที่ _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 an 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.");
},
main.dart

รีเฟรชโฆษณา

หากกำหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จำเป็นต้องขอโฆษณาอื่นเมื่อโฆษณาโหลดไม่สำเร็จ 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!),
      ),
    ),
  ),
main.dart

คุณต้องยกเลิกการจัดสรรโฆษณาเมื่อไม่จำเป็นต้องเข้าถึงโฆษณาอีกต่อไป แนวทางปฏิบัติแนะนำสำหรับเวลาที่ควรเรียกใช้ dispose() คือหลังจากนำ AdWidget ออกจากแผนผังวิดเจ็ตแล้ว หรือใน Callback BannerAdListener.onAdFailedToLoad()

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

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

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

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

ดูตัวอย่างการผสานรวมแบนเนอร์ที่สมบูรณ์ซึ่งครอบคลุมในหน้านี้ได้ที่ banner_example

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

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

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

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

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

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