錨定自動調整橫幅廣告

自動調整橫幅廣告是新一代的回應式廣告,會針對每部裝置調整廣告大小,藉此獲得最佳成效。原本智慧型橫幅廣告僅支援固定高度,改良後的自動調整橫幅廣告則可讓您指定廣告寬度,從而決定理想的廣告大小。

為了選擇最佳廣告大小,自動調整橫幅廣告會採用固定的長寬比,而非固定高度。進而使不同裝置和螢幕大小上顯示的橫幅廣告版面比例更加一致,有助提升廣告成效。

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

必要條件

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

自動調整橫幅廣告的用途為直接取代業界標準的 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 像素密度獨立像素的尺寸。

快速入門導覽課程

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

  1. 取得自動調整橫幅廣告尺寸。您取得的尺寸會用於請求自動調整橫幅廣告。如要取得自動調整廣告大小,請務必完成下列事項:
    1. 取得所用裝置的寬度 (以密度獨立像素為單位),或者,如果您不想使用螢幕的完整寬度,也可以自行設定寬度。您可以使用 MediaQuery.of(context) 取得螢幕寬度。
    2. 針對廣告尺寸類別使用適當的靜態方法 (例如 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)),取得目前螢幕方向的自動調整 AdSize 物件。
  2. 使用廣告單元 ID、自動調整廣告大小和廣告要求物件,建立 BannerAd 物件。
  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> {
  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 存放區中的「橫幅廣告範例」。