แบนเนอร์

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

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

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

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

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

• /6499/example/banner

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

โหลดโฆษณา

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

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/6499/example/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 = '/6499/example/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()

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

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

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