自動調整橫幅廣告是新一代的回應式廣告,會針對每部裝置調整廣告大小,藉此獲得最佳成效。原本智慧型橫幅廣告僅支援固定高度,改良後的自動調整橫幅廣告則可讓您指定廣告寬度,從而決定理想的廣告大小。
為了選擇最佳廣告大小,自動調整橫幅廣告會採用固定的長寬比,而非固定高度。進而使不同裝置和螢幕大小上顯示的橫幅廣告版面比例更加一致,有助提升廣告成效。
使用自動調整橫幅廣告時,請注意,自動調整橫幅廣告一律會針對特定裝置和寬度傳回固定大小,在特定裝置上測試版面配置後,您可以確保廣告大小不會改變。不過,橫幅廣告素材的大小可能會因裝置而異。因此,建議您在版面配置中配合廣告高度的變化。在極少數情況下,系統可能不會填入完整的自動調整大小,而標準大小的廣告素材會改放在這個版位的中心位置。
必要條件
- 請按照入門指南中的操作說明,匯入行動廣告 Flutter 外掛程式。
自動調整橫幅廣告的使用時機
自動調整橫幅廣告的用途為直接取代業界標準的 320x50 橫幅廣告大小和智慧型橫幅廣告格式 (取而代之)。
這些橫幅廣告尺寸通常用於錨定橫幅,通常會固定在畫面的頂端或底部。
就這類錨定橫幅廣告而言,自動調整橫幅廣告採用的長寬比會與標準 320x50 廣告的顯示比例類似,如以下三個範例所示:
320x50 橫幅 |
自動調整橫幅廣告 |
智慧型橫幅廣告 |
自動調整橫幅廣告可更有效地運用可用的螢幕大小。此外,與智慧型橫幅相比,自動調整橫幅是更好的選擇,原因如下:
它會使用您提供的任何寬度,而不會強制寬度為全螢幕,讓您在 iOS 上考量安全區域,並在 Android 上顯示缺口。
這可以為特定裝置選擇最佳高度,而不是讓不同大小的裝置維持固定高度,減少裝置分裂的影響。
實作注意事項
在應用程式中導入自適應橫幅時,請注意下列事項:
- 您必須知道廣告放置的檢視畫面寬度,並考量裝置寬度和任何適用的安全區域或裁剪區域。
- 請務必確保廣告檢視畫面背景為不透明,以便在放送較小廣告尺寸時,符合 AdMob 政策規定,不會填滿廣告版位。
- 請確認您使用的是最新版 Google Mobile Ads Flutter 外掛程式。
- 自動調整橫幅廣告尺寸的設計目的,是為了在使用可用寬度的情況下發揮最佳效能。在大多數情況下,這會是所用裝置螢幕的完整寬度。請務必考量適用的安全區域。
- 使用自適應 AdSize API 時,Google Mobile Ads SDK 會根據指定的寬度,為橫幅廣告設定最佳化的廣告高度。
- 取得自適應廣告大小的方法有兩種:
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)
可用於要求特定方向,AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
則可用於執行時的目前方向。 - 在特定裝置上針對指定寬度傳回的大小一律相同,因此在特定裝置上測試版面配置後,就能確保廣告大小不會改變。
- 錨定橫幅廣告高度絕不會大於裝置高度或 90 像素密度獨立像素的 15%,以及小於 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 存放區中的「橫幅廣告範例」。