横幅广告会占据应用布局中的一处位置,要么是设备屏幕的顶部,要么是底部。当用户与应用互动时,这类广告会停留在屏幕上 并可在一段时间后自动刷新。
本指南介绍了如何将 Ad Manager 横幅广告植入到 Flutter 应用中。除了代码段和说明之外,本指南还介绍了如何将横幅广告调整至合适的尺寸。
始终使用测试广告进行测试
在构建和测试应用时,请务必使用测试广告 实际投放的广告。否则,可能会导致您的账号被暂停。
对于横幅广告,加载测试广告最简便的方法就是使用我们的专用测试广告单元 ID:
/21775744923/example/adaptive-banner
这些测试广告单元 ID 已经过专门配置,可确保每个请求返回的都是测试广告。您可以在自己应用的编码、测试和调试过程中随意使用这些测试广告单元 ID。只需确保您会在发布应用前用自己的广告单元 ID 替换这些测试广告单元 ID 即可。
加载广告
以下示例实例化了一个横幅广告:
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(); } }
横幅尺寸
下表列出了标准的横幅广告尺寸。
尺寸(宽 x 高,以 dp 为单位) | 说明 | 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
显示为 widget,您必须实例化 AdWidget
并在调用 load()
后返回受支持的广告。你可以先创建微件
调用 load()
,但必须先调用 load()
,然后才能将其添加到 widget 中
树。
AdWidget
继承自 Flutter 的 Widget 类,可像其他任何应用一样使用
微件。在 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
从
widget 树或 AdManagerBannerAdListener.onAdFailedToLoad()
中
回调。
大功告成!您的应用现在就可以展示横幅广告了。
Android 9 及更低版本上的滚动限制
我们知道,运行 Android 9 或 可能效果不佳 。仅建议 在 Android 10 或更高版本中使用这些类型的横幅广告。固定位置横幅广告,例如 因为锚定横幅广告不会受到影响 所有 Android API 级别