本頁面由 Cloud Translation API 翻譯而成。

錨定自動調整橫幅廣告

自動調整橫幅廣告是新一代的回應式廣告根據裝置調整廣告大小，有效提升廣告成效。進一步改善智慧型橫幅廣告僅支援固定高度，自動調整橫幅廣告則可讓您指定並以此決定最合適的廣告大小。

為了選擇最佳廣告大小，自動調整橫幅廣告會採用固定的長寬比，而非固定高度。這會導致橫幅廣告佔用比例更加一致且能幫助他們提升廣告品質才需進行

請注意，使用自動調整橫幅廣告時，一定會傳回常數的大小。在網站上測試版面配置後就能確保廣告大小不會改變不過，橫幅廣告素材的尺寸可能因裝置而異。因此建議您在版面配置中配合廣告高度的變化。在極少數情況下可能無法填入完整自動調整大小，且系統會傳回標準大小的廣告素材已改為在這個版位置中

必要條件

按照入門指南的說明操作瞭解如何匯入行動廣告 Flutter 外掛程式。

自動調整橫幅廣告的使用時機

自動調整橫幅廣告的用途為直接取代這兩類廣告標準 320x50 橫幅廣告大小以及取而代之智慧型橫幅廣告格式。

這些橫幅廣告大小經常被當做錨定橫幅廣告，並固定在畫面的頂端或底部

就這類錨定橫幅廣告而言，採用自動調整橫幅廣告時的顯示比例會是就像標準 320x50 廣告一樣如下：

320x50 橫幅

自動調整橫幅廣告

智慧型橫幅廣告

自動調整橫幅廣告會善用可用的螢幕大小。此外，與智慧型橫幅廣告相比，自動調整橫幅廣告是更好的選擇，原因如下：

使用你提供的任何寬度，不會強制要求整個寬度畫面，進而考量 iOS 上的安全區域以及螢幕凹口。
這個模式會選擇該裝置適用的最佳高度，而不是讓不同尺寸的裝置保持固定高度，減緩裝置結構化

實作注意事項

在應用程式中導入自動調整橫幅廣告時，請注意以下幾點：

您必須知道廣告擺放的檢視畫面寬度 考量裝置寬度和任何安全區域建議採用的剪接方式
確保廣告檢視畫面背景不透明，以符合相關規定 AdMob 政策 (適用於較小的廣告大小) 未填滿廣告版位。
確認您使用的是最新版的 Google 行動廣告 Flutter 外掛程式。
自動調整橫幅廣告大小經過精心設計，最適合使用可用的寬度。在大多數情況下，這會是使用中的裝置。請務必考量適用的安全區域。
Google Mobile Ads SDK 會根據最佳化的廣告高度調整橫幅廣告大小自動調整大小
有兩種方法可以取得自動調整的廣告大小： AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) 要求特定螢幕方向 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)：所需時間
針對特定裝置傳回的指定寬度大小一律為因此在特定裝置上測試版面配置後請確保廣告大小不會改變
錨定橫幅廣告高度絕不會超過裝置高度或 90 像素密度獨立像素，且絕不會小於 50 各個像素密度獨立像素

快速入門導覽課程

導入簡易錨定自動調整橫幅廣告的步驟如下：

取得自動調整橫幅廣告尺寸。您取得的尺寸會用於自動調整橫幅廣告如要取得自動調整廣告尺寸，請務必完成下列操作：
1. 取得所用裝置的寬度 (以密度獨立像素為單位)，或不要使用畫面的完整寬度。您可以使用 MediaQuery.of(context) 取得螢幕寬度。
2. 針對廣告尺寸類別使用適當的靜態方法，例如 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 控制台實際操作。