แบนเนอร์

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

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

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

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

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

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

/21775744923/example/adaptive-banner

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

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

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

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>{
  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() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

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

เหตุการณ์โฆษณาแบนเนอร์

การใช้ 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() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: size,
      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 สืบทอดมาจากคลาสวิดเจ็ตของ 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()

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

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

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

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

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

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

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

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

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