內嵌自動調整橫幅廣告

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

為了選擇最合適的廣告大小，內嵌自動調整橫幅廣告會採用最大值而非固定高度。進而有機會提高成效。

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

與錨定自動調整橫幅廣告相比，內嵌自動調整橫幅廣告的大小較大。它們的高度可變，高度可以與裝置螢幕一樣高。

這類廣告適合放在捲動內容中，例如：

必備條件

事前準備

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

  • 確認您使用的是最新版的 Google Mobile Ads SDK；如果使用中介服務，則應提供最新版的中介服務轉接程式。

  • 內嵌自動調整橫幅廣告大小在使用完整可用寬度時成效最佳。在多數情況下，這會是使用中裝置螢幕的最大寬度。請務必考量適用的安全區域。

  • 您可能需要更新或建立新的委刊項，才能使用自動調整大小。 瞭解詳情。

  • 取得廣告大小的方法為

    • AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
    • AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)
    • AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)
    • AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)

  • 使用內嵌自動調整橫幅廣告 API 時，Google Mobile Ads SDK 會傳回具有指定寬度和內嵌標記的 AdSize。視您使用的 API 而定，高度可以是零或 maxHeight。廣告傳回後即會提供廣告的實際高度。

  • 內嵌自動調整橫幅廣告經過特別設計，能放置在可捲動的內容中。橫幅的高度可以與裝置螢幕一樣高，也可以受限於最大高度，視 API 而定。

導入作業

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

  1. 取得內嵌自動調整橫幅廣告大小。您取得的尺寸會用於要求自動調整橫幅廣告。如要取得自動調整廣告大小，請務必：
    1. 取得目前使用的裝置的寬度 (以密度獨立像素為單位)。如果不想使用整個螢幕的整個寬度，可以自行設定寬度。您可以使用 MediaQuery.of(context) 取得螢幕寬度。
    2. 在廣告大小類別中使用適當的靜態方法，例如 AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)，即可取得目前螢幕方向的內嵌自動調整 AdSize 物件。
    3. 如果您想限制橫幅的高度，可以使用靜態方法 AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)。
  2. 使用廣告單元 ID、自動調整廣告大小和廣告請求物件建立 AdManagerBannerAd 物件。
  3. 載入廣告。
  4. 在 onAdLoaded 回呼中，使用 AdManagerBannerAd.getPlatformAdSize() 取得更新後的平台廣告大小，並更新 AdWidget 容器高度。

程式碼範例

以下小工具範例會載入內嵌自動調整橫幅廣告，以符合螢幕寬度，並考量插邊：

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

/// This example demonstrates inline adaptive banner ads.
///
/// Loads and shows an inline adaptive banner ad in a scrolling view,
/// and reloads the ad when the orientation changes.
class InlineAdaptiveExample extends StatefulWidget {
  @override
  _InlineAdaptiveExampleState createState() => _InlineAdaptiveExampleState();
}

class _InlineAdaptiveExampleState extends State<InlineAdaptiveExample> {
  static const _insets = 16.0;
  AdManagerBannerAd? _inlineAdaptiveAd;
  bool _isLoaded = false;
  AdSize? _adSize;
  late Orientation _currentOrientation;

  double get _adWidth => MediaQuery.of(context).size.width - (2 * _insets);

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _currentOrientation = MediaQuery.of(context).orientation;
    _loadAd();
  }

  void _loadAd() async {
    await _inlineAdaptiveAd?.dispose();
    setState(() {
      _inlineAdaptiveAd = null;
      _isLoaded = false;
    });

    // Get an inline adaptive size for the current orientation.
    AdSize size = AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
        _adWidth.truncate());

    _inlineAdaptiveAd = AdManagerBannerAd(
      // TODO: replace with your own ad unit.
      adUnitId: '<your-ad-unit>',
      size: size,
      request: AdManagerAdRequest(),
      listener: AdManagerBannerAdListener(
        onAdLoaded: (Ad ad) async {
          print('Inline adaptive banner loaded: ${ad.responseInfo}');

          // After the ad is loaded, get the platform ad size and use it to
          // update the height of the container. This is necessary because the
          // height can change after the ad is loaded.
          AdManagerBannerAd bannerAd = (ad as AdManagerBannerAd);
          final AdSize? size = await bannerAd.getPlatformAdSize();
          if (size == null) {
            print('Error: getPlatformAdSize() returned null for $bannerAd');
            return;
          }

          setState(() {
            _inlineAdaptiveAd = bannerAd;
            _isLoaded = true;
            _adSize = size;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Inline adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    await _inlineAdaptiveAd!.load();
  }

  /// Gets a widget containing the ad, if one is loaded.
  ///
  /// Returns an empty container if no ad is loaded, or the orientation
  /// has changed. Also loads a new ad if the orientation changes.
  Widget _getAdWidget() {
    return OrientationBuilder(
      builder: (context, orientation) {
        if (_currentOrientation == orientation &&
            _inlineAdaptiveAd != null &&
            _isLoaded &&
            _adSize != null) {
          return Align(
              child: Container(
            width: _adWidth,
            height: _adSize!.height.toDouble(),
            child: AdWidget(
              ad: _inlineAdaptiveAd!,
            ),
          ));
        }
        // Reload the ad if the orientation changes.
        if (_currentOrientation != orientation) {
          _currentOrientation = orientation;
          _loadAd();
        }
        return Container();
      },
    );
  }

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: Text('Inline adaptive banner example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: _insets),
          child: ListView.separated(
            itemCount: 20,
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                height: 40,
              );
            },
            itemBuilder: (BuildContext context, int index) {
              if (index == 10) {
                return _getAdWidget();
              }
              return Text(
                'Placeholder text',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
      ));

  @override
  void dispose() {
    super.dispose();
    _inlineAdaptiveAd?.dispose();
  }
}