แบนเนอร์

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

คู่มือนี้แสดงวิธีผสานรวมโฆษณาแบนเนอร์จาก 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สูง) คำอธิบาย ค่าคงที่ขนาดโฆษณา
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 รับค่ามาจากคลาสวิดเจ็ตของ 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 ทุกระดับ

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

แบนเนอร์