แบนเนอร์

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

คู่มือนี้แสดงวิธีผสานรวมโฆษณาแบนเนอร์จาก Ad Manager ลงใน แอป Flutter นอกจากข้อมูลโค้ดและวิธีการแล้ว ยังมี เกี่ยวกับการปรับขนาดแบนเนอร์อย่างเหมาะสม

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

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

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

/21775744923/example/adaptive-banner

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

โหลดโฆษณา

ตัวอย่างต่อไปนี้เป็นการสร้างอินสแตนซ์โฆษณาแบนเนอร์

class BannerExampleState extends State<BannerExample> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-banner';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // 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('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

ตารางด้านล่างแสดงรายการขนาดแบนเนอร์มาตรฐาน

ขนาดเป็นหน่วย dp (กว้างxสูง) คำอธิบาย ขนาดคงที่ของ AdSize
320x50 แบนเนอร์มาตรฐาน banner
320x100 แบนเนอร์ขนาดใหญ่ largeBanner
320x250 สี่เหลี่ยมผืนผ้ากลาง mediumRectangle
468x60 แบนเนอร์ขนาดเต็ม fullBanner
728x90 ลีดเดอร์บอร์ด leaderboard
ความกว้างที่ระบุ x ความสูงแบบปรับได้ แบนเนอร์แบบปรับขนาดได้ ไม่มี

หากต้องการกำหนดขนาดแบนเนอร์ที่กำหนดเอง ให้ตั้งค่าAdSizeที่ต้องการดังนี้

final AdSize adSize = AdSize(300, 50);

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

class BannerExampleState extends State<BannerExample> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-banner';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // 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('AdManagerBannerAd 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();
  }
}

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

หากต้องการแสดง AdManagerBannerAd เป็นวิดเจ็ต คุณต้องสร้างอินสแตนซ์ AdWidget ที่มีโฆษณาที่รองรับหลังจากเรียก load() คุณสร้างวิดเจ็ตก่อนเรียกใช้ load() ได้ แต่ต้องเรียกใช้ load() ก่อนเพิ่มลงในต้นไม้วิดเจ็ต

AdWidget รับค่ามาจากคลาส Widget ของ Flutter และสามารถใช้งานได้เหมือนกับประเภทอื่นๆ วิดเจ็ต สำหรับ iOS ให้ตรวจสอบว่าได้วางวิดเจ็ตไว้ในวิดเจ็ตโดยระบุ ความกว้างและความสูง มิฉะนั้น โฆษณาของคุณอาจไม่แสดง AdManagerBannerAd สามารถวางในคอนเทนเนอร์ที่มีขนาดตรงกับโฆษณา ดังนี้

...
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 ออกจากต้นไม้วิดเจ็ตหรือใน AdManagerBannerAdListener.onAdFailedToLoad() callback

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

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

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