自動調整橫幅廣告是新一代的回應式廣告 根據裝置調整廣告大小,有效提升廣告成效。進一步改善智慧型橫幅廣告 僅支援固定高度,自動調整橫幅廣告則可讓您指定 並以此決定最合適的廣告大小。
為了選擇最佳廣告大小,自動調整橫幅廣告會採用固定的長寬比,而非 固定高度。這會導致橫幅廣告佔用比例更加一致 且能幫助他們提升廣告品質 才需進行
請注意,使用自動調整橫幅廣告時,一定會傳回 常數的大小。在網站上測試版面配置後 就能確保廣告大小不會改變不過, 橫幅廣告素材的尺寸可能因裝置而異。因此 建議您在版面配置中配合廣告高度的變化。在極少數情況下 可能無法填入完整自動調整大小,且系統會傳回標準大小的廣告素材 已改為在這個版位置中
必要條件
- 按照入門指南的說明操作 瞭解如何匯入行動廣告 Flutter 外掛程式。
自動調整橫幅廣告的使用時機
自動調整橫幅廣告的用途是直接取代這兩類廣告 標準 320x50 橫幅廣告大小以及取而代之智慧型橫幅廣告格式。
這些橫幅廣告大小經常被當做錨定橫幅廣告, 並固定在畫面的頂端或底部
對於這類錨定橫幅廣告,使用自動調整橫幅廣告時的顯示比例會與標準 320x50 廣告相似,如以下三個範例所示:
320x50 橫幅 |
自動調整橫幅廣告 |
智慧型橫幅廣告 |
自動調整橫幅廣告會善用可用的螢幕大小。此外, 與智慧型橫幅廣告相比,自動調整橫幅廣告是更好的選擇,原因如下:
使用你提供的任何寬度,不會強制要求整個寬度 畫面,進而考量 iOS 上的安全區域以及螢幕凹口 。
它會為特定裝置選取最佳高度,而不是在不同大小的裝置上使用固定高度,藉此減輕裝置分散化造成的影響。
實作注意事項
在應用程式中導入自動調整橫幅廣告時,請注意以下幾點:
- 您必須知道廣告擺放的檢視畫面寬度 考量裝置寬度和任何安全區域 建議採用的剪接方式
- 確保廣告檢視畫面背景不透明,以符合相關規定 AdMob 政策 (適用於較小的廣告大小) 未填滿廣告版位。
- 確認您使用的是最新版的 Google 行動廣告 Flutter 外掛程式。
- 自動調整橫幅廣告大小經過精心設計,最適合使用 可用的寬度。在大多數情況下,這會是 使用中的裝置。請務必考量適用的安全區域。
- Google Mobile Ads SDK 會根據最佳化的廣告高度調整橫幅廣告大小 自動調整大小
- 有兩種方法可以取得自動調整的廣告大小:
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)
要求特定螢幕方向AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
適用於 所需時間 - 針對特定裝置傳回的指定寬度大小一律為 因此在特定裝置上測試版面配置後 請確保廣告大小不會改變
- 錨定橫幅廣告高度絕不會超過 裝置高度或 90 像素密度獨立像素,且絕不會小於 50 各個像素密度獨立像素
快速入門導覽課程
導入簡易錨定自動調整橫幅廣告的步驟如下:
- 取得自動調整橫幅廣告尺寸。您取得的尺寸會用於
自動調整橫幅廣告如要取得自動調整廣告尺寸,請務必完成下列操作:
- 取得所用裝置的寬度 (以密度獨立像素為單位),或
不要使用畫面的完整寬度。
您可以使用
MediaQuery.of(context)
取得螢幕寬度。 - 針對廣告尺寸類別使用適當的靜態方法,例如
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
取得目前螢幕方向的自動調整AdSize
物件。
- 取得所用裝置的寬度 (以密度獨立像素為單位),或
不要使用畫面的完整寬度。
您可以使用
- 使用廣告單元 ID、自動調整廣告大小和
BannerAd
廣告請求物件 - 按照一般橫幅廣告載入廣告
AdWidget
,就像呈現一般廣告觀看次數一樣。
程式碼範例
以下小工具範例會載入錨定自動調整橫幅廣告以符合 螢幕寬度:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
@override
_AnchoredAdaptiveExampleState createState() =>
_AnchoredAdaptiveExampleState();
}
class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
BannerAd? _anchoredAdaptiveAd;
bool _isLoaded = false;
@override
void didChangeDependencies() {
super.didChangeDependencies();
_loadAd();
}
Future<void> _loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final AnchoredAdaptiveBannerAdSize? size =
await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.of(context).size.width.truncate());
if (size == null) {
print('Unable to get height of anchored banner.');
return;
}
_anchoredAdaptiveAd = BannerAd(
// TODO: replace these test ad units with your own ad unit.
adUnitId: Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716',
size: size,
request: AdRequest(),
listener: BannerAdListener(
onAdLoaded: (Ad ad) {
print('$ad loaded: ${ad.responseInfo}');
setState(() {
// When the ad is loaded, get the ad size and use it to set
// the height of the ad container.
_anchoredAdaptiveAd = ad as BannerAd;
_isLoaded = true;
});
},
onAdFailedToLoad: (Ad ad, LoadAdError error) {
print('Anchored adaptive banner failedToLoad: $error');
ad.dispose();
},
),
);
return _anchoredAdaptiveAd!.load();
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Anchored adaptive banner example'),
),
body: Center(
child: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
itemBuilder: (context, index) {
return Text(
'Placeholder text',
style: TextStyle(fontSize: 24),
);
},
separatorBuilder: (context, index) {
return Container(height: 40);
},
itemCount: 20),
if (_anchoredAdaptiveAd != null && _isLoaded)
Container(
color: Colors.green,
width: _anchoredAdaptiveAd!.size.width.toDouble(),
height: _anchoredAdaptiveAd!.size.height.toDouble(),
child: AdWidget(ad: _anchoredAdaptiveAd!),
)
],
),
),
);
@override
void dispose() {
super.dispose();
_anchoredAdaptiveAd?.dispose();
}
}
這裡的函式
已使用「AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize
」
取得位於目前介面錨定位置的橫幅廣告大小
方向。如要針對特定方向預先載入錨定橫幅廣告,請使用
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)
並傳遞所需方向
GitHub 上的完整範例
如要查看完整範例,請參閱 GitHub 存放區的橫幅範例 ,直接在 Google Cloud 控制台實際操作。