自動調整橫幅廣告是新一代的回應式廣告,可根據每種裝置調整廣告大小,盡可能提高成效。改善智慧型橫幅廣告 (僅支援固定高度) 後,自動調整橫幅廣告可讓您指定廣告寬度,並據此決定最佳廣告大小。
為了選擇最合適的廣告大小,自動調整橫幅廣告採用固定的顯示比例,而非固定高度。如此一來,不同裝置螢幕顯示的橫幅廣告區塊就會更一致,並有機會提升成效。
請注意,使用自動調整橫幅廣告時,系統會針對特定裝置和寬度傳回固定的大小。在特定裝置上測試版面配置後,您可以確保廣告大小不會改變。不過,橫幅廣告素材的大小可能會在不同裝置上改變。因此,建議您配合廣告高度變化的版面配置進行調整。在極少數情況下,系統可能無法完整自動調整大小,而會改為將標準大小的廣告素材置於這個版位的中心。
必要條件
- 請按照入門指南中的操作說明,瞭解如何匯入 Mobile Ads Flutter 外掛程式。
自動調整橫幅廣告的使用時機
自動調整橫幅廣告的設計,可立即取代業界標準的 320x50 橫幅廣告大小,以及要取代的智慧型橫幅廣告格式。
這些橫幅廣告大小常用為錨定橫幅廣告,通常會鎖定在螢幕的頂端或底部。
對於這類錨定橫幅廣告,使用自動調整橫幅廣告時的顯示比例將與標準 320x50 廣告類似,如以下三個範例所示:
320x50 橫幅廣告 |
自動調整橫幅廣告 |
智慧型橫幅廣告 |
自動調整橫幅廣告能充分運用可用的螢幕大小。此外,與智慧型橫幅廣告相比,自動調整橫幅廣告是較適合的選擇,原因如下:
它會使用您提供的任何寬度,而不是強制將寬度設為全螢幕,這樣才能考量 iOS 上的安全區域和 Android 上的螢幕凹口。
它會針對特定裝置選擇最合適的高度,而不是在不同大小的裝置上維持固定的高度,減少裝置片段化的影響。
實作注意事項
在應用程式中導入自動調整橫幅廣告時,請注意以下幾點:
- 您必須知道要顯示廣告的檢視畫面寬度,且應將裝置寬度和任何適用的安全區域或切出位置納入考量。
- 您可能需要更新或建立新的委刊項,才能使用自動調整大小。 瞭解詳情。
- 當放送較小的廣告未填滿廣告版位時,請確保廣告檢視畫面背景不透明,符合 AdMob 政策規定。
- 確認您使用的是最新版的 Google Mobile Ads Flutter 外掛程式。
- 自動調整橫幅廣告大小在採用完整可用寬度時,會呈現最佳效果。在多數情況下,這會是使用中裝置螢幕的最大寬度。請務必考量適用的安全區域。
- 使用 Adaptive AdSize API 時,Google Mobile Ads SDK 會根據指定寬度,將橫幅廣告調整至指定寬度。
- 有兩種方法可以取得自動調整廣告大小:
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)
用於要求特定方向,而在執行時適用於目前方向的AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
。 - 在特定裝置上針對特定寬度傳回的尺寸一律會相同,因此在特定裝置上測試版面配置後,您可以確保廣告大小不會改變。
- 錨定橫幅廣告的高度絕不會大於裝置高度 15% 或 90 像素密度獨立像素,也絕不會小於 50 像素密度獨立像素。
快速入門導覽課程
請按照下方步驟導入簡易錨定自動調整橫幅廣告。
- 取得自動調整橫幅廣告大小。您取得的尺寸會用於請求自動調整橫幅廣告。如要取得自動調整廣告大小,請務必確認以下事項:
- 取得目前使用的裝置的寬度 (以密度獨立像素為單位)。如果不想使用整個螢幕的整個寬度,可以自行設定寬度。您可以使用
MediaQuery.of(context)
取得螢幕寬度。 - 在廣告大小類別中使用適當的靜態方法,例如
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
,即可取得目前螢幕方向的自動調整AdSize
物件。
- 取得目前使用的裝置的寬度 (以密度獨立像素為單位)。如果不想使用整個螢幕的整個寬度,可以自行設定寬度。您可以使用
- 使用廣告單元 ID、自動調整廣告大小和廣告請求物件建立
AdManagerBannerAd
物件。 - 載入廣告,方法與載入一般橫幅廣告相同,然後在
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> {
AdManagerBannerAd? _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 = AdManagerBannerAd(
// TODO: replace with your own ad unit.
adUnitId: '<your-ad-unit>',
sizes: [size],
request: AdManagerAdRequest(),
listener: AdManagerBannerAdListener(
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 AdManagerBannerAd;
_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)
並傳遞所需的方向。