錨定自動調整橫幅廣告

自動調整橫幅廣告是新一代的回應式廣告，可根據每種裝置調整廣告大小，盡可能提高成效。改善智慧型橫幅廣告 (僅支援固定高度) 後，自動調整橫幅廣告可讓您指定廣告寬度，並據此決定最佳廣告大小。

為了選擇最合適的廣告大小，自動調整橫幅廣告採用固定的顯示比例，而非固定高度。如此一來，不同裝置螢幕顯示的橫幅廣告區塊就會更一致，並有機會提升成效。

請注意，使用自動調整橫幅廣告時，系統會針對特定裝置和寬度傳回固定的大小。在特定裝置上測試版面配置後，您可以確保廣告大小不會改變。不過，橫幅廣告素材的大小可能會在不同裝置上改變。因此，建議您配合廣告高度變化的版面配置進行調整。在極少數情況下，系統可能無法完整自動調整大小，而會改為將標準大小的廣告素材置於這個版位的中心。

必要條件

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

自動調整橫幅廣告的設計，可立即取代業界標準的 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 像素密度獨立像素。

快速入門導覽課程

請按照下方步驟導入簡易錨定自動調整橫幅廣告。

  1. 取得自動調整橫幅廣告大小。您取得的尺寸會用於請求自動調整橫幅廣告。如要取得自動調整廣告大小，請務必確認以下事項：
    1. 取得目前使用的裝置的寬度 (以密度獨立像素為單位)。如果不想使用整個螢幕的整個寬度，可以自行設定寬度。您可以使用 MediaQuery.of(context) 取得螢幕寬度。
    2. 在廣告大小類別中使用適當的靜態方法，例如 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)，即可取得目前螢幕方向的自動調整 AdSize 物件。
  2. 使用廣告單元 ID、自動調整廣告大小和廣告請求物件建立 AdManagerBannerAd 物件。
  3. 載入廣告，方法與載入一般橫幅廣告相同，然後在 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) 並傳遞所需的方向。