แบนเนอร์

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

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

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

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

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

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

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

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

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

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

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

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

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

โหลดโฆษณา

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

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/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      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();
  }
}

การใช้ 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/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      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();
  }
}

รีเฟรชโฆษณา

หากกําหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จําเป็นต้องขอโฆษณาอื่นเมื่อโฆษณาโหลดไม่สําเร็จ Google Mobile Ads SDK จะยึดตามอัตราการรีเฟรชที่คุณระบุไว้ใน 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 ออกจากต้นไม้วิดเจ็ตหรือใน BannerAdListener.onAdFailedToLoad() callback

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

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

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

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

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

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

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

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

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

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

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