แบนเนอร์

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

คู่มือนี้จะช่วยคุณเริ่มต้นใช้งานโฆษณาแบนเนอร์ยึดตําแหน่งแบบปรับขนาดได้ แบนเนอร์แบบปรับขนาดได้แบบโฆษณา 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();
  }
}

รีเฟรชโฆษณา

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

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

หากต้องการแสดง 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() callback

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

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

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

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

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

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

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

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

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